Change language to Change language to Spanish

Texto Alternativo

Published on 02/04/2015 @ 8:00am

[This post is a translation of the article "Alternative Text" Copyright © www.webaim.org. For that reason, it is only available in Spanish]

Contenidos del Artículo

Introducción

Añadir texto alternativo en las imágenes es el primer principio de la accesibilidad web. También es uno de los más difíciles de implementar correctamente. La web está llena de imágenes a las que les falta el texto alternativo o que tienen un texto alternativo incorrecto o deficiente. Como en otros aspectos de la accesibilidad web, determinar el texto alternativo apropiado es a menudo una cuestión de interpretación personal. A través de ejemplos, este artículo presentará nuestra interpretación experimentada del uso apropiado del texto alternativo.

Importante

Lee también nuestro artículo sobre imágenes para más información sobre imágenes y accesibilidad.

Fundamentos Sobre Texto Alternativo

El texto alternativo ofrece una alternativa textual a contenido no textual en páginas web. Vamos a hablar de texto alternativo sólo en imágenes, aunque los mismos fundamentos se pueden aplicar a media, applets y otros contenidos web no textuales.

El texto alternativo cumple varias funciones:

  • Es leído por lectores de pantalla en lugar de las imágenes permitiendo que el contenido y función de la imagen sean accesibles a personas con discapacidades visuales o cognitivas.
  • Los navegadores web lo muestran en lugar de la imagen si ésta no se ha cargado, o si el usuario tiene las imágenes deshabilitadas.
  • Proporciona un significado semántico y descriptivo a la imagen que puede ser usado posteriormente por motores de búsqueda para determinar el contenido de la imagen.

La clave es que los ordenadores y los lectores de pantalla no pueden analizar una imagen y determinar qué representa. Como desarrolladores, debemos proporcionar un texto al usuario que presente el CONTENIDO y FUNCIÓN de las imágenes dentro del contenido web.

El texto alternativo se puede presentar de dos maneras:

  • Dentro del atributo alt en el elemento img.
  • En el contexto y entorno de la propia imagen.

Esto significa que el atributo alt (a veces llamado etiqueta alt, aunque tecnicamente es incorrecto) no es el único mecanismo para proporcionar el contenido y función de la imagen. Esa información también se puede ofrecer en el texto adyacente a la imagen o dentro de la página que contiene la imagen. En algunos casos en los que el equivalente textual no puede presentarse brevemente, puede proporcionarse un enlace y/o un atributo longdesc que referencie a otra página que contenga una descipción más larga.

Importante

El término texto alternativo, tal y como se usa en este artículo, se refiere al equivalente textual de una imagen, independientemente de dónde resida ese texto. No se refiere exclusivamente al atributo alt de la etiqueta de imagen. Usaremos el atributo alt para referirnos al atributo en sí, que lo será a menudo, pero no exclusivamente, al contenido del atributo de texto.

Todas las imágenes deben tener un atributo alt. Esto es un requisito del estándar HTML (con algunas excepciones en HTML5). Las imágenes sin el atributo alt son probablemente inaccesibles. En algunos casos, las imágenes pueden tener el atributo alt vacío (p.e.: alt="").

El Contexto lo es Todo

A la hora de determinar el texto alternativo para una imagen, el contexto lo es todo. El texto alternativo para una imagen puede variar dependiendo del contexto y entorno de la propia imagen. Tomemos como ejemplo esta imagen de George Washington:

imagen de ejemplo

El texto alternativo para esta imagen puede cambiar completamente dependiendo del contexto (algo que veremos en los ejemplos más abajo abajo).

Nota

Para presentar mejor los fundamentos sobre texto alternativo, la mayoría de las imágenes de este artículo tienen el texto alternativo "imagen de ejemplo". De todos modos, el contenido de la imagen puede encontrarse en su entorno dentro de la página.

Ejemplo 1

imagen de ejemplo

Debido a su papel de Comandante de las fuerzas americanas durante la Guerra de la Independencia y, más tarde, como primer Presidente de los Estados Unidos, George Washington es a menudo llamado el "Padre de la Patria".

¿Cuál sería un texto alternativo adecuado para la imagen del ejemplo 1?

  1. "Imagen de George Washington".
  2. "George Washington, el primer presidente de los Estados Unidos".
  3. Un atributo alt vacío es suficiente (alt="").
  4. "George Washington".

El primer paso para determinar el texto alternativo apropiado para una imagen es decidir si la imagen presenta un contenido o si la imagen tiene una función. En la mayoría de los casos, una imagen tendrá función solamente si está dentro de un enlace (o si la imagen es un botón o parte de un mapa). Determinar si la imagen presenta contenido y qué contenido presenta, es mucho más difícil. Si el contenido que la imagen transmite se encuentra dentro del contenido presente en el texto que rodea la imagen, entonces un atributo alt vacío es suficiente. En el ejemplo de arriba, el contenido presentado en la imagen informa al usuario de que éste es George Washington. La imagen no tiene función porque no es un enlace y no se puede pinchar en ella.

Veamos algunas reglas importantes relacionadas con el atributo alt.

Importante

El atributo alt debe normalmente:

  • Ser preciso y equivalente para presentar el mismo contenido y función que la imagen.
  • Ser breve. Esto significa que el contenido (si hay contenido) y función (si hay función) de la imagen debería presentarse de una la forma más breve y concisa que sea apropiada. Tipicamente no hace falta más que unas pocas palabras, aunque raramente podrímos necesitar una o dos frases cortas.
  • NO ser redundante o proporcionar la misma información que el texto del entorno de la imagen.
  • NO usar frases como "imagen de..." o "gráfico de..." para describir la imagen. Es evidente para el usuario que es una imagen. Y si la imagen transmite contenido, no es necesario que el usuario sepa que la imagen transmite contenido, al contrario que el texto. Si el hecho de que una imagen sea una fotografía o ilustración es contenido importante, sólo entonces sería útil incluir eso en el texto alternativo.

Teniendo en cuenta estas reglas, la opción D (alt="George Washington") sería el mejor texto alternativo en este caso. La opción A describe innecesariamente la imagen como una imagen. La opción B proporciona información que no se presenta directamente en la imagen y que es redundante con el contenido presentado luego en el texto. La opción C (un alt vacío) no es apropiada porque la imagen suministra contenido que no está directamente presente en el contexto circundante. Aunque el texto de alrededor indica que se refiere a George Washington, los usuarios visuales lo saben por el contenido de la imagen - y si la imagen proporciona contenido, entonces debería tener un texto alternativo.

Ejemplo 2


George Washington

Debido a su papel de Comandante de las fuerzas americanas durante la Guerra de la Independencia y, más tarde, como primer Presidente de los Estados Unidos, George Washington es a menudo llamado el "Padre de la Patria".

¿Cuál sería un atributo alt adecuado para la imagen del ejemplo 2?

  1. "George Washington".
  2. Un atributo alt vacío es suficiente (alt="").
  3. "Imagen".
  4. La imagen no necesita un atributo alt.

En este caso, el contenido de la imagen está presente en el contenido que la rodea, así que la opción B (alt="") es la mejor elección. La opción A sería redundante. La opción C proporciona información extraña e inútil. La opción D (no poner el atributo alt) nunca es la elección correcta - todas las imágenes deben llevar el atributo alt.

Ejemplo 3

imagen de ejemplo
George Washington

¿Cuál sería un atributo alt adecuado para la imagen del ejemplo 3?

  1. Un atributo alt vacío es suficiente (alt="").
  2. "Entrada de George Washington en la Wikipedia".
  3. "Lee más".
  4. "George Washington".

En este caso, la imagen también es un enlace, así que tiene una función. Cuando una imagen está dentro de un enlace, la función de la imagen debe estar representada como texto alternativo también dentro del enlace. En este caso, no hay texto adyacente que describa la función dentro del enlace, así que tiene que suministrarse en el atributo alt. Como consecuencia, la opción D ("George Washington") en seguramente la mejor opción. Aunque las palabras "George Washington" del atributo alt son redundantes con el texto que sigue a la imagen, en esta situación la redundancia es necesaria para describir adecuadamente la función.

Lo opción A no es adecuada. Si una imagen aparece sola dentro de un enlace, dicha imagen nunca debe tener un atributo alt vacío o nulo. Esto es porque el lector de pantalla debe tener ALGO con lo que identificar el enlace. Los lectores de pantalla podrían leer el nombre de la imagen o la URL de la página enlazada, pero eso puede ser útil o no. Y recuerda que el enlace puede leerse fuera del contexto del texto que lo rodea, como cuando los usuarios navegan de enlace en enlace a través de la página. La opción B ofrece contenido que no se puede obtener con la imagen sola (p.e.: no puedes decir que la imagen enlaza con la Wikipedia sólo con mirarla). La opción C no proporciona una descripción adecuada de la función, especialmente si se saca fuera de su contexto.

El ejemplo anterior se podría haber hecho mucho mejor si tanto la imagen como el texto se hubieran incluido en el enlace:

En este caso, tanto la función como el contenido del enlace y la imagen están dentro del enlace, así que se podría usar alt="" para evitar redundancia.

Siempre que sea posible, intenta evitar usar "enlace a...", o "pulsa esta imagen para..." o similares para el atributo alt. Los enlaces son identificados como tales en los lectores de pantalla y deberían ser visualmente obvios para los usuarios videntes.

Ejemplo 4

imagen de ejemplo

En esta pintura, el artista Emanuel Leutze usa luz, color, forma, perspectiva, proporción y movimiento para crear la composición.

¿Cuál sería el atributo alt más adecuado para la imagen del ejemplo 4?

  1. "George Washington".
  2. "Cuadro de George Washington".
  3. "Cuadro de George Washington cruzando el río Delaware".
  4. "Una pintura clásica que demuestra el uso de la luz y el color para crear composición".
  5. "Cuadro de George Washington cruzando el río Delaware. Olas y remolinos envuelven la barca en la que un majestuoso George Washington mira hacia adelante, lejos de la tormenta y hacia los rayos de luz al otro lado del río, mientras lidera las tropas hacia la batalla".

Como antes, deberímos determinar si el contenido de la imagen está presente en el contexto del entorno de la imagen. Éste no es el caso (o no completamente). La imagen no está dentro de un enlace, así que no hay función. Esta imagen requiere más atención, y la mejor respuesta puede no determinarse a partir del contexto limitado que hemos dado. Pero vamos a ver las diferentes opciones.

La opción A ("George Washington") probablemente no describe el contenido de la imagen de forma adecuada. El hecho de que George Washington aparezca en el cuadro puede no ser relevante en el contexto de la imagen. La opción B ("Cuadro de George Washington") podría ser adecuado, pero no proporciona mucho contenido adicional. De todos modos, puede ser apropiado para describir la imagen como un cuadro, frente a una fotografía y otro tipo de gráfico. La opción C provee más información que puede ayudar al usuario a identificar el contenido. Recuerda que el texto alternativo no es exclusivamente para los invidentes. Muchos usuarios que pueden ver podrían identificar el cuadro en cuestión a partir de esta descripción, mientras que sólo "George Washington" no es suficiente. La opción D puede ser apropiada si el objetivo de la imagen es presentar una técnica artística específica y el contenido de la imagen en sí no es importante. La opción E podría ser otra alternativa adecuada si hace falta un examen más detallado del cuadro, pero es demasiado larga para ser útil - ese texto iría mejor dentro del texto de la página web.

Como puedes ver, no hay una única respuesta correcta. El mejor texto alternativo dependerá del contexto y de la intención del contenido de la imagen.

Imágenes Funcionales

A menudo las imágenes son utilizadas no para proporcionar contenido, sino para proporcionar alguna funcionalidad importante, como por ejemplo, navegación.

Ejemplo 5

imagen de ejemplo

La imagen "Productos" es parte de la barra de navegación.

¿Cuál sería el atributo alt más adecuado para la imagen del ejemplo 5?

  1. "Productos".
  2. "Enlace a productos".
  3. La imagen no aporta contenido, así que alt="" es suficiente.

En este caso, la opción A es la mejor. Provee tanto el contenido como la función de la imagen. La imagen muestra la palabra "Productos" y también es un enlace a la página de productos de ese sitio web. La imagen será identificada como parte de un enlace, así que no es necesario "Enlace a", esto hace que la opción B no sea buena. Como la imagen es el único objeto dentro del enlace, un alt vacío no es nunca apropiado. Cuando una imagen contiene sólo texto, el texto que muestra puede usarse normalmente como texto alternativo.

Ejemplo 6

Continúa a la siguiente página para leer más información sobre la presidencia de George Washington.

imagen de ejemplo

¿Cuál sería el atributo alt más adecuado para la imagen del ejemplo 6?

  1. "Siguiente".
  2. "Siguiente página".
  3. "La presidencia de George Washington".
  4. "Continúa a la presidencia de George Washington".

De nuevo, éste es un ejemplo que no tiene una repuesta clara. De hecho, cualquiera de las opciones de arriba podría ser apropiada en este ejemplo. Las opciones A y B probablemente sean suficientes en muchos casos, mientras quede claro al usuario que hay multiples páginas en el artículo. La opción C presenta claramente la función del enlace, pero no presenta que el enlace va a la siguiente página de una serie de páginas. La opción D puede que sea la mejor porque representa la función del enlace e implica que es una parte de una serie de páginas. Como hemos dicho anteriormente, determinar el texto alternativo más apropiado es una decisión personal basada en el contexto de la imagen en cuestión. Una descripción de la imagen ("flecha") no sería apropiada. Puede que una solución mejor fuera tener el texto "Siguiente página" (o similar) junto a la imagen y dentro del enlace, en ese caso, la imagen podría tener un alt vacío.

Ejemplo 7

¿Cuál sería el atributo alt más apropiado para la imagen del ejemplo 7? (ten en cuenta que el icono está dentro de un enlace)

  1. "Solicitud de trabajo".
  2. "Archivo PDF".
  3. "Icono PDF".
  4. El contenido de la imagen se encuentra en su contexto, así que alt="" es suficiente.

Hay que tener en cuenta que la imagen está dentro de un enlace. Si no estuviera en un enlace, entonces el texto del alt sería diferente. En este caso, como la imagen proporciona información adicional sobre la función del enlace, es importante que esté dentro del enlace y que se lea con él. Es vital porque a menudo se accede a los enlaces sin el contexto de su entorno.

La opción A ("Solicitud de trabajo") es redundante con el texto que rodea a la imagen y no es la mejor elección. La opción B es la mejor (aunque incluso el aún más breve "PDF" habría sido suficiente) - proporciona el contenido que se presenta en la imagen - que el enlace es a un fichero PDF. La función ("Descarga la solicitud de empleo") está presente en el texto del enlace, así que no necesita incluirse en el atributo alt. La opción C ("Icono PDF") realmente describe la imagen en sí, por ello no es la más apropiada en este caso. En otro contexto, podría ser importante que el usuario sepa que la imagen es, de hecho, un icono. La opción D (alt vacío) no proporciona la información que la imagen presenta.

Es importante remarcar que si sólo el icono estuviera en el enlace, entonces el texto alternativo debería dar una descripción completa del contenido y función de la imagen/enlace. Algo como "Descarga la solicitud de empleo en formato PDF". "Formato PDF" ya no sería suficiente, especialmente si hay varios documentos con enlaces de este tipo. En ese caso, un usuario de lector de pantalla que navega por los enlaces de la página escucharía: "Formato PDF, Formato PDF, Formato PDF...". Como regla general, si una misma imagen se utiliza como enlace varias veces en una página, entonces el texto alternativo dentro del enlace debe identificar las diferencias.

Imágenes Decorativas

Las imágenes decorativas no presentan contenido importante, cumplen funciones de diseño o no informativas, y no aparecen dentro de un enlace. En casi todos los casos, las imágenes decorativas y separadores deberán tener un alt vacío (alt="").

Ejemplo 8

El texto del contenido va aquí.

example image

El pie de página va aquí.

¿Cuál sería un atributo alt apropiado para la imagen del separador horizontal del ejemplo 8?

  1. "Línea decorativa".
  2. "Principio del pie de página".
  3. "Separador".
  4. alt="" es suficiente.

Como la imagen no implica contenido y no se encuentra dentro de un enlace, la opción D es la más acertada. No es apropiada ninguna descripción de la imagen.

Nota

Cuando una imagen se usa sólo con fines decorativos, a menudo es mejor eliminar la imagen del contenido de la página y añadirla como imagen de fondo usando CSS. Esto elimina la necesidad de un texto alternativo y elimina la imagen del flujo semántico y estructural de la página.

Ejemplo 9

example imageNuestro negocio promete el mejor servicio que vas a encontrar en este planeta. Nuestro equipo ha sido entrenado profesionalmente para ofrecer la mejor experiencia de usuario durante todo el proceso de negociación.

La satisfacción de nuestros clientes es nuestra mayor prioridad y está garantizada, o le devolvemos su dinero.

¿Cuál sería el atributo alt apropiado para la imagen en el ejemplo 9?

  1. "Apretón de manos".
  2. "Gente de negocios dando un apretón de manos para completar un contrato".
  3. alt="" será suficiente.
  4. "Garantizamos nuestros servicios profesionales".

Cuando analizamos este ejemplo, hay que determinar si la imagen presenta contenido importante. En ese caso, podríamos discutir que no lo hace. En la práctica en la web, a muchas imágenes de este tipo se les da un texto alternativo descriptivo aunque muchas de estas imágenes no parecen proporcionar ningún contenido útil. La opción C (alt="") probablemente sea la más adecuada porque la imagen no transmite un contenido relevante ni importante. Las opciones A y B son descriptivas de la imagen, pero no transmiten un equivalente a lo que la imagen en sí transmite - que en este caso no es nada, o puede que sólo un gesto emotivo. En otras palabras, la imagen es meramente decorativa. La opción D es claramente incorrecta, aunque es interesante destacar que a menudo se utiliza el atributo alt para proporcionar información adicional o palabra clave a los motores de búsqueda. Esta práctica no es un uso apropiado del texto alternativo.

Nota

En muchos casos, para determinar el texto alternativo puedes hacerte la pregunta "si no usara esta imagen, ¿qué pondría en su lugar?".

En el ejemplo de arriba, es muy probable que la foto del apretón de manos no se sustituyera con ningún texto, por lo tanto alt="" es seguramente suficiente.

Imágenes Avanzadas

Hay algunos casos en los que determinar el texto alternativo puede ser más difícil. Los tests de usuario y las pruebas con lectores de pantalla o con navegadores en modo texto pueden ayudarte a determinar el método más apropiado para implementar el texto alternativo.

Imágenes Botón de Formulario

Las imágenes que actúan como botones en un formulario deben tener un atributo alt que describa la función del botón. Los botones de imagen se usan a menudo para dar un toque más visual o una versión más pequeña de los botones de formulario estándar. El texto alternativo debería describir qué hará el botón cuando se seleccione, frases como "Buscar", "Enviar", "Registrarse", "Realizar pedido", etc. Por ejemplo, <input type="image" alt="Buscar Ahora"> puede ser apropiado como botón de imagen en un formulario de búsqueda.

Mapas de Imagen

Cuando se usan mapas de imagen en el lado del cliente, la imagen principal debe tener un atributo alt. El atributo alt deberá presentar cualquier contenido que la imagen presente, pero que no esté presentado por los puntos calientes del mapa de imagen. Por ejemplo, si tuvieras un mapa del estado de Nueva York que tuviera puntos calientes para cada región, la imagen podría tener un atributo alt tal que "Regiones de Nueva York". Si la imagen no transmite contenido, sino que es simplemente un contenedor para los puntos calientes (e.j.: barra de navegación), entonces alt="" es apropiado.

Cada punto caliente del mapa (elementos area) debe tener un atributo alt equivalente. Como los puntos calientes se pueden pinchar, cada uno debe tener un texto alternativo que describa la función del mismo.

Los puntos calientes de un mapa de imagen en el lado del servidor no pueden tener un texto alternativo y no son accesibles desde teclado, por lo que este tipo de mapas no deberían usarse.

Recortes de Imágenes

Algunas veces, las imágenes grandes se recortan y dividen en multiples imágenes por motivos de diseño. Cuando varios recortes de imagen juntos transmiten contenido, entonces ese contenido debe presentarse al usuario. Tipicamente, esto se hace añadiendo un texto alternativo en el atributo alt del recorte de imagen más grande. No es apropiado repetir el texto alternativo innecesariamente, romper el texto alternativo y ponerlo a través de varios atributos alt, o no poner ningún texto alternativo. Si un recorte de imagen está dentro de un enlace, el texto alternativo describiendo la función del enlace debe proporcionarse dentro del atributo alt de la imagen, en el alt de otra imagen dentro del mismo enlace, o dentro del texto del enlace. Cada enlace debe contener un texto que describa la función del mismo.

Imágenes de Fondo

No es posible añadir texto alternativo directamente en el CSS o en las imágenes de fondo. Las imágenes que transmitan contenido por normal general no deberían ponerse como fondo de páginas o elementos.

Las imágenes de fondo sin embargo, sí pueden usarse como imágenes decorativas, eliminándolas así del flujo de contenido de la página y ahorrándonos la necesidad de un alt vacío.

A veces, las imágenes de sprite u otro tipo de imágenes de fondo se usan para presentar contenido. Aunque esto debería evitarse, si se hace, cualquier contenido que se transmita con la imagen de fondo debe ser accesible a través del texto de la página. Por ejemplo, si la imagen del icono PDF del ejemplo 7 se pusiera como fondo utilizando CSS, se podría usar alguna técnica de remplazo de texto para presentar el contenido dentro del enlace:

<a href="solicitud.pdf">Descarga la Solicitud de Empleo<span class="iconopdf">(PDF)</span></a>

Entonces podrías usar CSS para posicionar el texto "(PDF)" (el elemento span class="iconopdf") fuera de la pantalla. Lee CSS en Acción: Contenido Invisible Sólo para Usuarios de Lectores de Pantalla para obtener más detalles. Los usuarios videntes verán la imagen con el icono PDF de fondo, mientras que los usuarios invidentes oirán el texto "(PDF)".

Logos

Una práctica común en la web es tener el logo del sitio web como enlace a la página principal. Como es una práctica bastante estándar, poner como texto alternativo de la imagen el nombre de la compañía será suficiente (alt="Marca Acme"). Identificar el logo como logo (alt="Logo de la Marca Acme") no es necesario. El contenido y función de la imagen no es "logo". Los desarrolladores a menudo identifican la imagen como enlace a la página principal (alt="Página principal de la Marca Acme"), aunque si la imagen se muestra de manera consistente al principio de la página y el texto alternativo es apropiado, esta información adicional no es necesaria.

Imágenes Complejas

Cuando el texto alternativo para una imagen compleja (como un gráfico, tabla o mapa) no se puede limitar al breve atributo alt Y no está presente dentro del contexto de la página (como en una tabla adyacente), entonces se debe ofrecer una alternativa en otro lugar. Esto se logra enlazando a una página web diferente que proporcionará una descripción más adecuada. En enlace puede estar junto a la imagen, o la imagen en sí puede ser el enlace a dicha página. El texto alternativo de la imagen se debe usar para describir el contenido general de la imagen.

También se puede usar el atributo longdesc en la imagen. El valor del atributo longdesc del elemento img contendrá la URL de la página con la descripción extendida de la imagen. NO debe contener el texto de la descripción.

<img src="ventas.jpg" alt="Gráfica con los datos de venta anuales" longdesc="datosventas.htm">
<br>
<a href="datosventas.htm">Ver datos de ventas</a>

Nota

El atributo longdesc sólo proporciona acceso a la página con la descripción extendida a los usuarios de lectores de pantalla. Los usuarios videntes no son conscientes de que dicha descripción está disponible, incluso cuando podría serles muy útil. También, el atributo longdesc no es parte de HTML5. Por estos motivos, se recomienda que si se usa longdesc, entonces también debería añadirse un enlace a la página con la descripción extendida.

Figure y figcaption

HTML5 introduce el elemento figure, que se define así:

El elemento figure representa una unidad de contenido, opcionalmente con un título, que es autónoma, y que tipicamente hace referencia a una sola unidad del flujo principal del documento, y que se puede eliminar del flujo principal del documento sin afectar a su significado.

Figure y figcaption permiten una asociación semántica entre la imagen y su título. Si el figcaption de una imagen dentro de un figure contiene una alternativa equivalente a la imagen, entonces el atributo alt se puede omitir para evitar redundancia y duplicidad de contenido. El figcaption se mostrará (o debería mostrarse) como el texto alternativo para la imagen dentro de la figura.

<figure>
<img src="acme.jpg">
<figcaption>Empresa Acme</figcaption>
</figure>

Conclusión

A pesar de ser el principal problema que afecta a la accesibilidad web, aún hay muchos métodos diferentes e incorrectos para implementar el texto alternativo. Siguiendo los principios básicos explicados aquí, los programadores web pueden hacer su contenido web más accesible para los individuos con discapacidades.

  • Añadir texto alternativo a las imagenes es uno de los principios de accesibilidad más fáciles de aprender, pero uno de los más difíciles de dominar.
  • El texto alternativo puede ir en el atributo alt o en el contexto alrededor de la imagen.
  • Todas las imágenes deben tener un atributo alt.
  • El texto alternativo debería:
    • presentar el CONTENIDO y FUNCIÓN de la imagen.
    • ser breve y conciso.
  • El texto alternativo no debería:
    • ser redundante (ser igual que el texto contiguo o en el cuerpo de la página).
    • usar frases como "imagen de..." o "gráfico de...".
  • El texto alternativo apropiado depende en gran medida del contexto de la imagen.
  • El texto alternativo de una imagen funcional (p.e.: una imagen dentro de un enlace) debe describir tanto la función como el contenido.
  • Las imágenes decorativas también deben llevar un atributo alt, pero puede estar vacío (alt="").

En general, la accesibilidad web crecería radicalmente si su usara el texto alternativo y se implementase de manera correcta.