Día 23: Proveer texto equivalente para las imágenes

Este es el día más importante de la serie, así que presten atención:

Cada imagen de cada página de su sitio de Internet debe tener un equivalente textual, el llamado "texto alt", especificado en el atributo alt de la etiqueta <img>.

Los lectores de pantalla lo leen, los navegadores de texto lo muestran, Google lo clasifica, y los navegadores visuales pueden mostrarlo como una información de herramienta o en la línea de estado (aunque usted como diseñador puede anularlo). Ya hemos visto como especificar texto alt vacío para imágenes espaciadoras, y diversas formas de crear listados accesibles con viñetas de imágenes. Que nos queda?

  • Iconos Permalink
  • Iconos "Powered by"
  • Iconos Mail-to
  • Iconos XML
  • Gráficos pequeños flotando dentro sus ítems de apuntes
  • Cualquier otra imagen que haya añadido a su plantilla

Todos estos necesitan texto alt apropiado.

Quién se beneficia?

  1. Jackie se beneficia. JAWS lee el texto alt. Sin texto alt válido, Jackie escucha el nombre de archivo en su lugar, que suena horrible.
  2. Marcus se beneficia. Lynx, como navegador de texto, no muestra imágenes, solo texto alt. Sin texto alt, Lynx muestra el nombre del archivo, que se ve tan mal como suena en JAWS.
  3. Michael se beneficia. Links, como navegador de texto, no muestra imágenes, solo texto alt. Sin texto alt Links no muestra nada en lugar de la imagen (a menos que la imagen sea un vínculo, en cuyo caso Links muestra "[IMG]"). Al navegar con Opera con las imágenes desactivadas, Michael ve el texto alt en lugar de la imagen.
  4. Lillian se beneficia. Internet Explorer muestra el texto alt como una información de herramienta (aunque usted como diseñador puede suprimir esto).
  5. Google se beneficia. El Googlebot clasifica el texto alt, y este es usado no solo para buscar palabras clave compatibles en las búsquedas normales, pero también en las búsquedas de imágenes (Como creías que funcionaba esto?).

Como hacerlo

La plantilla por defecto de Movable Type no incluye ninguna etiqueta <img>. Si está usando una imagen gráfica de "Powered by Movable Type", debe asegurarse de que la etiqueta <img> incluye el atributo alt="Powered by Movable Type".

La plantilla por defecto de Greymatter incluye solamente una imagen, generada por la variable de plantilla {{gmicon}}. Esta genera una etiqueta <img> que incluye el texto alt apropiado, "Powered by Greymatter".

Radio genera automáticamente el texto alt para los siguientes iconos estándar:

  • Taza de café (XML coffee mug): alt="Subscribe to <site name> in Radio UserLand."
  • Icono XML: alt="Click to see the XML version of this web page."
  • Icono Mailto: alt="Click here to send an email to the editor of this weblog."

Sin embargo, los usuarios de Radio necesitaran especificar manualmente el texto alt para imágenes personalizadas. Vaya a Prefs, luego a Customized Images (bajo Templates), y añada estos atributos alt:

  • Permalink de nivel diario: alt="Permanent link: <%longDate%>".
  • Permalink a nivel de ítem: alt="Permanent link".
  • Icono de vinculo de fuente: alt="source".
  • Icono de vinculo de Enclosure: alt="enclosure".

También puede añadir title="" para suprimir la información de herramientas en los navegadores visuales.

Por supuesto, sin importar la herramienta de publicación, si ha añadido sus propias imágenes a su plantilla, o si tiene gráficos pequeños flotando dentro de los ítems de sus apuntes, cada uno necesita de texto alt apropiado. Como aprendo mejor por ejemplo, aquí hay algunos ejemplos. Más principios generales y ejemplos son listados en la sección "lectura añadida".

Ejemplos incorrectos de texto alt

  • Cualquier marcaje de HTML. El texto alt solamente puede contener texto normal y entidades, ninguna etiqueta.
  • alt="nombredearchivo.jpg". Esto no nos lleva a ningún lado. Cual es la función del grafico? No nos importa como se llama.
  • alt="texto alt". Insertado por algunos editores de HTML como recordatorio, y dejado allí por diseñadores despistados.
  • alt="Haga clic aquí!" No sirve ningún propósito útil (a menos que este en un grafico que diga "Haga clic aquí!").
  • alt="Active las imágenes!" Esto es como que una persona no vidente le pida la hora, y que le responda, "Abra los ojos!" Las imágenes pueden estar desactivadas por alguna razón (como la lenta conexión de Michael), pueden no estar disponibles (en el navegador de texto de Marcus), o pueden que no estén desactivadas en absoluto (como en el lector de pantalla de Jackie, que muestra las imágenes pero lee el texto alt en voz alta).
  • Más ejemplos incorrectos de texto alt, artículo en inglés.

Ejemplos correctos de texto alt

  • Jonathon Delacour tiene un gráfico de un símbolo Chino en el anuncio publicitario de su página. alt="Logo del sitio: xin, la caracter chino equivalente al corazón".
  • Leslie Harpold tiene un anuncio publicitario de su página que incluye el nombre del sitio, "The Historical Present", y un mensaje, "Hypermodernism has a posse". alt="the historical present: hypermodernism has a posse".
  • Simon Willison tiene un sticker de "W3C XHTML 1.0". alt="XHTML 1.0 Válido!"
  • Jeffrey Zeldman una barra de navegación de texto como gráficos. Al poner el Mouse encima, cada grafica pone un pequeño mensaje en la barra de estado con JavaScript. Desde luego, los usuarios ciegos se pierden de esto, así que Zeldman también puso el mismo texto en el texto alt de cada gráfico. Habilidoso.
  • Dean Allen tiene un gráfico en el anuncio publicitario de su página que incluye el nombre del sitio y un mensaje. Su texto alt es un poco largo e incluye un mensaje distinto (lo cual es un poco confuso), pero Dean es lo suficientemente habilidoso como para salirse con la suya. alt="Textism is an ephemeris focused on the composition, design, and reading of text. In addition, there will be pie". Nota: probablemente usted no sea lo suficientemente habilidoso como para hacer esto. Haga algo sencillo.

Lectura añadida

 
<< Día 22: Usar listas reales (o simularlas de manera correcta) | Contenido | Día 24: Proveer texto equivalente para los mapas de imágenes >>