El texto alternativo \u2014o atributo alto\u2014 se una descripci\u00f3n textual que se asocia a cada imagen del web. Cuando un usuario usa un lector de pantalla, este lee lo texto alternativo en lugar de mostrar la imagen. Cuando la imagen no se carga miedo problemas de conexi\u00f3n, el navegador muestra lo texto alto como sustituto visual.<\/p>\n
El criterio WCAG 1.1.1 exige que todo contenido no textual \u2014im\u00e1genes, iconos, gr\u00e1ficos, botones con imagen\u2014 tenga una alternativa textual que transmita la misma informaci\u00f3n o funci\u00f3n.<\/p>\n
Una imagen sin texto alternativo es literalmente invisible para una persona que usa un lector de pantalla. El lector puede leer el nombre del fichero (\u00abIMG_3847.jpg\u00bb) o simplemente decir \u00abimagen\u00bb sin ning\u00fan contexto. En una galer\u00eda de productos, un portfolio o una p\u00e1gina de servicios, esto hace que el contenido sea completamente inaccesible.<\/p>\n
Adem\u00e1s de la accesibilidad, el texto alternativo tiene un impacto directo en el SEO: Google indexa las im\u00e1genes a trav\u00e9s del atributo alto. Una imagen muy descrita aparece a los resultados de b\u00fasqueda de im\u00e1genes y refuerza el posicionamiento de la p\u00e1gina.<\/p>\n
No todas las im\u00e1genes necesitan el mismo tratamiento:<\/p>\n
Su im\u00e1genes que transmiten informaci\u00f3n relevante que no aparece en el texto adyacente. Necesitan un alto descriptivo y conciso que explique el contenido. Ejemplo: una foto del personal de la empresa necesita el nombre y cargo de la persona.<\/p>\n
Su im\u00e1genes puramente est\u00e9ticas que no a\u00f1aden informaci\u00f3n al contenido. Tienen que tener el atributo alto vac\u00edo (alt=\u00bb\u00bb) para indicar al lector de pantalla que las ignore. Si no pones el atributo, el lector leer\u00e1 el nombre del fichero, que es peor.<\/p>\n
Su im\u00e1genes que hacen una funci\u00f3n, como un bot\u00f3n con icono o un logo que es un enlace al inicio. El texto alt tiene que describir la funci\u00f3n, no la apariencia. El logo que puerta al inicio tendr\u00eda que tener alto=\u00bbVolver al inicio\u00bb o alt=\u00bbLogo NombreEmpresa \u2014 Inicio\u00bb.<\/p>\n
Si una imagen contiene texto visible (como un banner promocional con texto), el texto alt tiene que reproducir exactamente el texto de la imagen. Mejor opci\u00f3n: usar texto HTML real en lugar de imagen con texto.<\/p>\n
<!– Imagen informativa –>
\n<img src=\u00bbequipo.jpg\u00bb alt=\u00bbEl equipo de webaccessible.cat: Rub\u00e8n, dise\u00f1ador web, y Maria, consultora de accesibilidad\u00bb><\/p>\n
<!– Imagen decorativa –>
\n<img src=\u00bbseparator.png\u00bb alt=\u00bb\u00bb><\/p>\n
<!– Logo que es un enlace –>
\n<a href=\u00bb\/\u00bb><img src=\u00bblogo.png\u00bb alt=\u00bbwebaccessible.cat \u2014 Inicio\u00bb><\/a><\/p>\n
<!– MAL: sin alt –>
\n<img src=\u00bbfoto-hotel.jpg\u00bb><\/p>\n
<!– MAL: alt poco descriptivo –>
\n<img src=\u00bbfoto-hotel.jpg\u00bb alt=\u00bbimagen\u00bb><\/p>\n
Hay varias maneras de detectar este error:<\/p>\n
En WordPress, puedes a\u00f1adir el texto alternativo desde la Biblioteca de Medios: selecciona la imagen, busca el campo \u00abTexto alternativo\u00bb y escribe la descripci\u00f3n. Este valor se aplica a todas las instancias de aquella imagen al web.<\/p>\n
Si usas el bloque de imagen de Gutenberg o el m\u00f3dulo de imagen de Divi, encontrar\u00e1s el campo de alt texto directamente a las opciones del bloque. Para im\u00e1genes en bloques HTML, tienes que a\u00f1adir el atributo manualmente.<\/p>\n
Una cosa importante: WordPress permite dejar el campo alto en blanco para im\u00e1genes decorativas, pero tienes que asegurarte que el atributo alto=\u00bb\u00bb est\u00e9 presente al c\u00f3digo HTML. Si el campo es vac\u00edo pero el atributo no existe, el comportamiento depende del tema.<\/p>\n
Depende del n\u00famero de im\u00e1genes del web. A\u00f1adir alto texto a im\u00e1genes nuevas es r\u00e1pido \u2014pocos minutos por imagen\u2014. El trabajo importante es la auditor\u00eda inicial: identificar todas las im\u00e1genes existentes sin alt y priorizar las m\u00e1s relevantes para los usuarios.<\/p>\n
Si tienes centenares de im\u00e1genes, puedes priorizar:<\/p>\n
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div>