MasterClassAccesibilidad — Imágenes y el objetivo del alt.

<img src="cachorro.jpg" alt="cachorro">
  • src: especifica la ruta a la imagen.
  • alt: especifica un texto alternativo para la imagen.
<img src="camisetas.png" alt="camisetas comprar camisetas camisetas pequeñas camisetas grandes camisetas temporada camisetas online camisetas xl camisetas xxl camisetas azules camisetas rojas camisetas blancas camisetas de temporada camisetas 2022">

Buenas practicas con el uso del atributo alt

  • El atributo alt siempre debe de existir en todas las etiquetas img. Si no existe y usamos herramientas de validación w3c dará fallo en la validación.
Error en el validador de la w3c donde no se define el alt de la imagen
Se muestra un error en el tag img indicando que se debe añadir un atributo alt en la imagen
  • Respecto al caso anterior, si no necesitamos una descripción en la imagen ya que es una imagen “decorativa”, se añade el alt sin contenido y para mejorar el uso de los lectores de pantalla ocultamos el img con un aria-hidden=”true”, ya que si no es necesario dar una explicación, nos aseguramos que la imagen este oculta para que los lectores de pantalla no pasen por ella.
<img src="topinfo_bg.png" alt="" aria-hidden="true">
  • Si la imagen esta complementada con el contenido y es necesaria dar una explicación en la imagen, hay que aplicar una descripción clara y descriptiva. Con una descripción buena ayudamos a que gente que navegue con un lector de pantalla pueda saber qué hay en esa imagen y también si no se descarga la imagen por error o conexión lenta, se mostrará el alt en texto en la Web.
<img src="camisetaxlazul.png" alt="Camiseta de talla xl y de color azul">
  • Imágenes con gráficos. Hay que aplicar una descripción que explique lo que hay en ese gráfico. Recuerda que es fácil mirar a la pantalla, pero hay personas que usando un lector de pantalla necesitan saber que es lo que contiene ese gráfico
  • Asegúrate que la imagen esta posicionada sobre texto relevante y con contenido que este relacionado con la imagen. Por ejemplo, si tenemos una imagen de una camiseta roja, intentar complementarlo con el encabezado que hable de camisetas rojas y con un texto que hable de ellas. (Marcado html correcto plis!)
  • El nombre del archivo puede dar pistas a Google sobre la temática de la imagen. Por ejemplo, camiseta-roja.png es mejor que IMG0034.png
  • Evitar el keyword stuffing (palabras masivas clave para posicionar tu web) puede producir el efecto inverso, que Google trate nuestra Web como spam y caiga en picado en visitas.
  • Ayuda a Google a descubrir tus imágenes usando un Sitemap de tu sitio.
  • Optimiza las imágenes. Las imágenes son el principal causante de que la web sea lenta y pesada al cargar. Optimiza el tamaño y usa el formato correcto de imagen.

--

--

--

accessibility web

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Francisco Marquez Duro

Francisco Marquez Duro

accessibility web

More from Medium

Hacking Business Communication

Open Source — As a Rookie

What do NFTs have to do with Fashion? [2022 fashion trends taking over]

NFT NFTs in fashion fashion adidas

3 Fashion Techies took a nosedive into NFT’s. Here’s what what we’ve learned.