Alt y título que son confusos

Los vendedores de navegadores distorsionan los estándares y hacen las cosas por sí mismos sin seguir las reglas, lo que puede causar algunos problemas, o al menos causar confusión. Un ejemplo es la forma en que algunos navegadores tratan con los atributos ALT (generalmente llamadas etiquetas ALT de manera incorrecta), como el navegador IE con una gran cantidad de usuarios en Windows.

El texto alternativo no se usa como consejos de herramientas, o más bien, no proporciona instrucciones adicionales para las imágenes. Por el contrario, el atributo de título debe usarse para proporcionar información de explicación adicional para el elemento. Esta información se muestra como un consejo de herramienta en la mayoría de los navegadores de imágenes, aunque los fabricantes pueden usar cualquier otra forma de representar el texto del atributo de título.

Muchas personas parecen estar confundidas con estos dos atributos (la pregunta se ha vuelto más común en la lista de correo del grupo de estándares web recientemente), por lo que escribí mis pensamientos sobre cómo usarlos.

Para el agente de usuario (UA) que no puede mostrar imágenes, formularios o applets, el atributo ALT se utiliza para especificar texto alternativo. El lenguaje del texto de reemplazo es especificado por el atributo Lang. Fuente: Cómo especificar texto alternativo.

Los atributos ALT (enfoque en "atributos" en lugar de "etiquetas") incluyen instrucciones de reemplazo, que son necesarias para imágenes y puntos de acceso de imágenes. Solo se puede usar en IMG, área y elementos de entrada (incluidos los elementos del applet). Para los elementos de entrada, el atributo ALT está destinado a reemplazar la imagen del botón Enviar. Por ejemplo: <input type = "image" src = "image.gif" />.

Use el atributo ALT para proporcionar descripciones de texto a los espectadores que no pueden ver las imágenes en su documento. Esto incluye a los usuarios que usan navegadores que no admiten la visualización de imágenes o la pantalla de imagen apagada, los usuarios que tienen discapacidad visual y usuarios que usan lectores de pantalla. Se utiliza texto alternativo para reemplazar imágenes en lugar de proporcionar un subtítulo adicional.

Piense cuidadosamente antes de escribir texto de reemplazo para asegurarse de que esas palabras proporcionen información ilustrativa para aquellos que no ven la imagen y tienen sentido en el contexto. Para las imágenes decorativas, use valores vacíos (alt = "" sin espacios en el medio de las citas) en lugar de usar sustitutos irrelevantes como "bala azul" o "spacer.gif". No lo ignores. Si lo ignora, algunos lectores de pantalla leerán directamente el nombre del archivo del archivo de imagen, y esos navegadores de texto, como Lynx, mostrarán el nombre del archivo del archivo de imagen, que será de poca utilidad para su navegador.

Es más fácil establecer el texto de reemplazo en una imagen que contiene texto. El texto contenido en la imagen generalmente se puede usar como el valor de atributo ALT.

En cuanto a la longitud del texto de reemplazo, consulte lo que dice WCAG 2.0 (Guía de usabilidad del contenido del sitio web 2.0):

El valor del atributo ALT debe ser inferior a 100 caracteres en inglés o el usuario debe asegurarse de que el texto de reemplazo sea lo más corto posible.

Lo entiendo lo más corto posible, el mayor tiempo posible ".

Incluso si desea que aparezca como un consejo de herramienta, no use el atributo ALT para el elemento de texto, que no es su uso. Hasta donde yo sé, eso solo funciona en Windows, es decir, el navegador y en el antiguo Netscape 4.* (Versión de Windows). Ningún navegador de Mac lo mostrará como un consejo de herramienta.

Cuando el navegador muestra el texto de reemplazo como un consejo de herramienta, también se fomenta el comportamiento de usar el atributo ALT incorrectamente. Algunas personas comienzan a escribir texto de sustitución sin sentido porque tienden a pensar que es una información de ilusión adicional en lugar de un reemplazo que no puede mostrar imágenes. Es posible que otros no quieran que aparezca la punta de la herramienta, y luego ignorar por completo la escritura del valor de atributo ALT. Estas prácticas incorrectas han causado dificultades a los espectadores que no pueden ver la imagen.

Para obtener instrucciones adicionales e información no esencial, utilice el atributo de título.

El atributo de título proporciona sugerencias para elementos que establecen este atributo. Fuente: El atributo de título.

El atributo de título se puede usar en todas las etiquetas excepto Base, BaseFont, Head, HTML, Meta, Param, Script y Título. Pero no es necesario. Tal vez es por eso que muchas personas no entienden cuándo usarlo.

Use el atributo de título para proporcionar información adicional no esencial. La mayoría de los navegadores visuales muestran el texto del título como sugerencia de la herramienta cuando el mouse se suspende en un elemento específico, pero esto depende del fabricante para decidir cómo representar el texto del título. Algunos navegadores mostrarán el texto del título en la barra de estado. Por ejemplo, la versión anterior del navegador Safari.

El atributo del título tiene un buen propósito, que es agregar texto descriptivo al enlace, que es extraordinario cuando el enlace en sí no expresa el propósito del enlace muy claramente. Esto permite a los visitantes saber dónde los llevarán esos enlaces, y no cargarán una página que puede no ser completamente desfavorable. Otra aplicación potencial es proporcionar información ilustrativa adicional para imágenes, como fechas u otra información no esencial.

El valor del atributo de título puede ser más largo que el valor de atributo ALT. Pero debe tenerse en cuenta que algunos navegadores truncan el texto demasiado largo (como la información sobre herramientas u otro). Por ejemplo, el navegador central de Mozilla solo puede mostrar los primeros 60 caracteres. Esto se considera un error de Mozilla, al que debe prestar atención.

Mi consejo es asegurarme de que el texto de reemplazo sea esencial. En la mayoría de las aplicaciones, debe dejarse en blanco, alt = "" (tenga en cuenta que no hay espacios en las dos citas). Piense en esas imágenes, ¿qué tipo de información proporciona esas vistas, qué texto debe usar para describirla o qué información debe proporcionar a las personas que no ven las imágenes? Escribir el texto de reemplazo como "Foto: CEO de pie fuera del edificio, con un traje gris y una corbata negra, mirar el cielo" es realmente útil para las personas que no pueden ver la imagen. Si lo crees, entonces puedes escribirlo. En muchos casos, creo que es mejor dejar el texto de reemplazo en blanco.

Para los atributos del título, es difícil dar instrucciones estrictas. La mayor parte de mi uso está en enlaces que no pueden ser autoexplicados, como el mismo texto de enlace en la misma página y diferentes páginas de enlaces. A veces se proporciona más texto de subtítulos para algunos botones o elementos de formulario.

Cuando una imagen requiere una descripción más larga y excede la limitación del atributo ALT, hay algunas opciones.

La propiedad LongDesc se puede usar para proporcionar enlaces a una página separada que contiene la descripción del texto de la imagen. Esto significa vincular al espectador a otra página, lo que puede causar dificultades para comprender. Además, el soporte de los navegadores para los atributos de LongDesc también es inconsistente, y no es muy bueno.

La propiedad LongDesc puede contener un enlace a otra parte del documento actual (punto de anclaje) en lugar de vincular a otra página. En las notas al pie de accesibilidad, Andy Clarke explica cómo aplicarlo muy bien.

Los enlaces de descripción (D) se pueden usar para complementar LongDesc. Un enlace de descripción es un enlace regular que se conecta a una página que contiene texto alternativo. El enlace se coloca al lado de la imagen y está bien en todos los navegadores. Las personas tienen muchas opiniones diferentes sobre su efectividad, y no me gusta mucho este enfoque en mi opinión personal. WCAG también es, y en sus técnicas HTML de borrador de trabajo para WCAG 2.0, el enlace de descripción está "desaprobado".

Si una descripción larga de la imagen es útil para cualquier espectador, entonces debe considerar simplemente mostrarlo en el mismo documento en lugar de vincularlo a otras páginas o ocultarla. De esta manera, todos pueden leerlo. Este es un método simple y de baja tecnología.