Las im\u00e1genes son un componente fundamental del dise\u00f1o web: comunican ideas, rompen bloques de texto y generan impacto visual que retiene a los usuarios. Junto a ellas debemos a\u00f1adir siempre texto alternativo (alt text), ya que facilita el acceso a quienes no pueden ver las im\u00e1genes y aporta se\u00f1ales \u00fatiles para SEO.<\/p>\n
Las im\u00e1genes desempe\u00f1an m\u00faltiples funciones en una p\u00e1gina y, por tanto, el texto alternativo debe redactarse pensando en su prop\u00f3sito concreto. El alt text ayuda tanto a la accesibilidad como a la indexaci\u00f3n por los motores de b\u00fasqueda.<\/p>\n
El texto alternativo describe una imagen para el usuario y aporta contexto sobre la informaci\u00f3n o la acci\u00f3n representada. En este art\u00edculo analizamos por qu\u00e9 es importante el texto alternativo y proponemos m\u00e9todos pr\u00e1cticos para redactar descripciones eficaces para el atributo alt.<\/p>\n
El texto alternativo, tambi\u00e9n llamado Alternative Text o alt text, es la representaci\u00f3n textual de una imagen que utilizan los lectores de pantalla para describir su contenido a personas con discapacidad visual. Los screen readers leen ese texto en voz alta, lo que facilita la comprensi\u00f3n del contenido visual a usuarios con baja visi\u00f3n o discapacidad.<\/p>\n
Con frecuencia encontramos sitios inaccesibles porque no se a\u00f1ade alt text a las im\u00e1genes. En esos casos, los lectores de pantalla no proporcionan descripci\u00f3n alguna, lo que impide que muchos usuarios comprendan el contenido visual del sitio.<\/p>\n
No existe una \u00fanica f\u00f3rmula para un buen alt text, pero la descripci\u00f3n debe ser breve, precisa y \u00fatil para el contexto. Redactar un alt convincente no es complicado: no hace falta narrar cada detalle, sino describir lo relevante seg\u00fan la funci\u00f3n de la imagen.<\/p>\n
Al escribir alt text, lo primero que debemos valorar es la funci\u00f3n de la imagen en la p\u00e1gina. Si la imagen no aporta informaci\u00f3n relevante al mensaje, cabe plantearse eliminarla. Las im\u00e1genes meramente decorativas que no a\u00f1aden contenido suelen poder suprimirse sin afectar la experiencia.<\/p>\n
Si no es posible eliminar una imagen decorativa, conviene describirla de forma alternativa. Por ejemplo, si se usa una imagen como encabezado, podemos reutilizar el texto del encabezado como atributo alt. Esto no perjudica nuestro SEO porque las keywords ya aparecen en el encabezado.<\/p>\n
La importancia del texto alternativo radica en que hace nuestro sitio accesible para quienes usan lectores de pantalla. Esos usuarios pueden no ver las im\u00e1genes por baja visi\u00f3n o por limitaciones del navegador. Al proporcionar descripciones en el alt para todas las im\u00e1genes relevantes, garantizamos que cualquier persona pueda acceder y aprovechar la informaci\u00f3n. A continuaci\u00f3n resumimos las razones principales que explican su relevancia.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
El alt text es una v\u00eda alternativa para que usuarios con im\u00e1genes desactivadas o que emplean lectores de pantalla obtengan el contenido de la p\u00e1gina, por lo que debe transmitir informaci\u00f3n precisa y contextual. Tambi\u00e9n debemos tener en cuenta la compatibilidad con distintos navegadores y screen readers para facilitar la comprensi\u00f3n.<\/p>\n
Hace a\u00f1os se cre\u00eda que los motores no pod\u00edan leer el texto alternativo y muchos desarrolladores empleaban descripciones gen\u00e9ricas como \u00abimagen (n\u00famero)\u00bb. Eso no aporta valor: hoy los motores de b\u00fasqueda reconocen keywords dentro del alt y las usan para entender la relevancia de la imagen respecto a las consultas de los usuarios.<\/p>\n
Las descripciones deben evitar palabras para im\u00e1genes puramente decorativas y centrarse en el contenido esencial que el usuario necesita conocer. Esto ayuda a mantener coherencia en el dise\u00f1o y una experiencia homog\u00e9nea en todas las p\u00e1ginas.<\/p>\n
Conviene que las etiquetas alt sean claras, sin abreviaturas confusas ni jerga t\u00e9cnica innecesaria. Describan la imagen en s\u00ed, no informaci\u00f3n exterior a ella; as\u00ed facilitamos el acceso a cualquiera y, como consecuencia, favorecemos el engagement.<\/p>\n
No hay una \u00fanica respuesta: depende del prop\u00f3sito de la imagen. Preg\u00fantese si la imagen transmite informaci\u00f3n importante o ilustra un concepto. Si la respuesta es afirmativa, el alt text es imprescindible y debe aportar contexto relevante al contenido.<\/p>\n
Si la imagen responde a un fin est\u00e9tico, puede optar por una descripci\u00f3n gen\u00e9rica, aunque esto no contribuye al valor informativo ni al SEO. En cualquier caso, evaluemos la importancia de la imagen para el tema y el mensaje que deseamos transmitir.<\/p>\n
Valorando el prop\u00f3sito, podremos decidir si el alt debe ser descriptivo, funcional o vac\u00edo (alt=\u00bb\u00bb) en el caso de elementos puramente decorativos.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
Si la imagen es el logotipo de su empresa, debe ser identificable y accesible. Incluiremos un alt que describa tanto la marca como el mensaje, por ejemplo: \u00abCompany X \u2013 Celebrando 15 a\u00f1os en el mercado\u00bb.<\/p>\n
El alt ayuda a los motores de b\u00fasqueda a entender el contenido visual y a evaluar la relevancia de una p\u00e1gina frente a una consulta. Por ejemplo, si un usuario busca informaci\u00f3n sobre tortugas, una imagen etiquetada correctamente facilitar\u00e1 la aparici\u00f3n de esa p\u00e1gina en resultados relevantes. Adem\u00e1s, el alt puede incluir informaci\u00f3n contextual, como el autor de la imagen: \u00abEl famoso cuadro de la lata de sopa Campbell de Andy Warhol\u00bb. En definitiva, el alt contribuye a la accesibilidad y a la comprensi\u00f3n del contenido.<\/p>\n
Existen herramientas en l\u00ednea que nos ayudan a generar alt text para nuestras im\u00e1genes.<\/p>\n
Tras subir las im\u00e1genes, tome el nombre de archivo original y p\u00e9guelo en el campo correspondiente; al aceptar, la herramienta propondr\u00e1 tanto un t\u00edtulo como un atributo alt para cada imagen.<\/p>\n
Otra alternativa es usar servicios que generan el alt autom\u00e1ticamente durante la subida y enlazan la imagen con su descripci\u00f3n, lo que resulta \u00fatil cuando los usuarios no pueden ver la imagen.<\/p>\n
El atributo alt se aplica en HTML para proporcionar la descripci\u00f3n que se mostrar\u00e1 cuando la imagen no pueda cargarse, por ejemplo por enlaces rotos o si JavaScript est\u00e1 deshabilitado. No es necesario incluir un valor alt para im\u00e1genes puramente decorativas empleadas como background en CSS.<\/p>\n
Por defecto, algunas funciones relacionadas con informaci\u00f3n emergente est\u00e1n desactivadas en varios navegadores. Si necesita ver informaci\u00f3n adicional, consulte la documentaci\u00f3n del navegador; las combinaciones de teclado var\u00edan seg\u00fan la plataforma.<\/p>\n
Cada imagen debe tener un alt \u00fanico que la describa de forma espec\u00edfica y transparente. Esto permitir\u00e1 que los lectores de pantalla transmitan con precisi\u00f3n lo que aparece a quienes no pueden ver la imagen.<\/p>\n
Use la puntuaci\u00f3n adecuada en el alt, ya que mejora la lectura por parte de los screen readers y evita ambig\u00fcedades en la interpretaci\u00f3n del texto.<\/p>\n
Evite incluir etiquetas HTML, enlaces o marcado dentro del alt, porque esto puede confundir a los lectores de pantalla.<\/p>\n
Si el sujeto de la imagen es claro fuera de contexto, considere incluir el nombre de archivo original en la descripci\u00f3n para facilitar la referencia desde herramientas de gesti\u00f3n de activos.<\/p>\n
\u00bfQu\u00e9 es el texto alternativo en HTML?<\/strong><\/p>\n La etiqueta HTML <img> admite el atributo alt para definir esa descripci\u00f3n.<\/p>\n Debe usar el atributo alt en HTML para crear el texto alternativo; se introduce como una cadena de texto que describa la imagen de forma concisa.<\/p>\n<\/div>\n<\/div>\n<\/div>\n El atributo alt en un sitio web contiene la descripci\u00f3n que queremos mostrar cuando una imagen no se carga o no es visible para el usuario.<\/p>\n Los atributos alt tambi\u00e9n son \u00fatiles con estrategias de dise\u00f1o que recurren a CSS para mostrar im\u00e1genes cuando no est\u00e1n disponibles. Si desea optimizar el atributo alt para motores de b\u00fasqueda, incluya keywords relevantes pero sin caer en keyword stuffing; evite duplicar el nombre de archivo o el pie de foto.<\/p>\n El atributo alt forma parte integral de la estrategia SEO y de accesibilidad de cualquier sitio web. Implementado correctamente, facilita la navegaci\u00f3n tanto a usuarios como a los crawlers de los motores de b\u00fasqueda en sitios con contenido visual. Esperamos que estas recomendaciones le resulten pr\u00e1cticas y aplicables.<\/p>\n P\u00e1ginas a las que los resultados de b\u00fasqueda enlazan (excluyendo enlaces internos):<\/p>\n developers.google.com<\/strong><\/a><\/p>\n support.google.com<\/strong><\/a><\/p>\n en.wikipedia.org<\/strong><\/a><\/p>\n knowledge.hubspot.com<\/strong><\/a><\/p>\n support.siteimprove.com<\/strong><\/a><\/p>\n diagramcenter.org<\/strong><\/a><\/p>\n Microsoft Edge puede ahora generar alt text para im\u00e1genes sin etiquetar y a\u00f1adir etiquetas autom\u00e1ticas que ayudan a screen readers y a usuarios con baja visi\u00f3n.<\/p>\n<\/p>\n<\/div>\n<\/div>\n\u00bfQu\u00e9 es el atributo alt en un sitio web?<\/strong><\/h2>\n
Conclusi\u00f3n:<\/strong><\/h2>\n
Fuentes y enlaces externos<\/strong><\/h2>\n
\n
\n
\n
\n
\n
\n
\n\t\tMicrosoft Edge puede generar alt text para im\u00e1genes en la web \u2013 XDA Developers <\/h4>\n
\n\t\tMarch 18, 2022 \u2013
\n XDA Developers<\/a>
\n <\/small><\/p>\n