Cuando los proveedores de navegadores infringen los estándares y hacen cosas que no siguen las reglas, pueden causar problemas o al menos confusión. Un ejemplo es la forma en que algunos navegadores manejan los atributos alt (a menudo llamados incorrectamente etiquetas alt), como Internet Explorer para Windows, que tiene una gran cantidad de usuarios.
El texto alternativo (texto alternativo) no se utiliza como información sobre herramientas o, más precisamente, no proporciona información descriptiva adicional para la imagen. En cambio, el atributo de título debe usarse para proporcionar información descriptiva adicional para el elemento. Esta información se muestra como información sobre herramientas en la mayoría de los navegadores de imágenes, aunque los fabricantes son libres de representar el texto del atributo del título de otras maneras.
Mucha gente parece estar confundida por estas dos propiedades (esta pregunta ha estado apareciendo últimamente en la lista de correo del Web Standards Group ), así que escribí mis pensamientos sobre cómo usarlas.
atributo alternativo
Para agentes de usuario (UA) que no pueden mostrar imágenes, formularios o subprogramas, el atributo alt se utiliza para especificar texto alternativo. El idioma del texto de reemplazo se especifica mediante el atributo lang.
Fuente: Cómo especificar texto alternativo .
El atributo Alt (tenga en cuenta "atributo" en lugar de "etiqueta") contiene instrucciones de reemplazo, que son necesarias para imágenes y puntos de acceso a imágenes. Solo se puede utilizar en elementos img, area y input (incluidos los elementos del subprograma). Para los elementos de entrada, el atributo alt está destinado a reemplazar la imagen del botón de envío. Por ejemplo: <input type="image" src="image.gif" alt="Enviar" />.
Utilice el atributo alt para proporcionar una descripción de texto para los espectadores que no pueden ver las imágenes de su documento. Esto incluye a los usuarios que utilizan navegadores que no admiten de forma nativa la visualización de imágenes o que tienen la visualización de imágenes desactivada, los usuarios con discapacidad visual y los usuarios que utilizan lectores de pantalla. El texto alternativo se utiliza para reemplazar una imagen en lugar de proporcionar texto descriptivo adicional.
Piense detenidamente antes de escribir su texto alternativo para asegurarse de que realmente proporcione información para las personas que no pueden ver la imagen y que tenga sentido en contexto. Para imágenes decorativas, utilice un valor vacío (alt="", sin espacios entre comillas) en lugar de texto de reemplazo irrelevante como "viñeta azul" o "spacer.gif". No lo ignore Si lo ignora, algunos lectores de pantalla leerán el nombre del archivo de imagen directamente y los navegadores de texto como Lynx mostrarán el nombre del archivo de imagen, y eso no será de utilidad para su navegador. .
Es más fácil configurar texto alternativo para imágenes que contienen texto. En términos generales, el texto contenido en la imagen se puede utilizar como valor del atributo alt.
En cuanto a la longitud del texto alternativo, mire lo que WCAG 2.0 (Pautas de disponibilidad de contenido del sitio web 2.0) tiene que decir:
La longitud del 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 como "lo más breve posible y tan largo como sea necesario".
Incluso si desea que aparezca como información sobre herramientas, no use el atributo alt en elementos de texto. Este no es su uso previsto. Hasta donde yo sé, esto sólo funciona en el navegador IE de Windows y en el antiguo Netscape 4.* (versión de Windows). Ningún navegador de Mac muestra esto como información sobre herramientas.
Se recomienda el uso indebido del atributo alt cuando los navegadores muestran texto alternativo como información sobre herramientas. Algunas personas empiezan a escribir texto alternativo sin sentido porque tienden a pensar en él como información descriptiva adicional en lugar de un reemplazo que no puede mostrar la imagen. Es posible que otros no quieran que aparezca la información sobre herramientas y luego ignoren por completo el valor del atributo alt. Estas prácticas incorrectas causan dificultades a los espectadores que no pueden ver las imágenes.
Para obtener información descriptiva adicional e información no esencial, utilice el atributo de título.
atributo de título
El atributo de título proporciona información de asesoramiento para el elemento en el que se establece.
Fuente: El atributo del título .
El atributo de título se puede utilizar en todas las etiquetas excepto base, basefont, head, html, meta, param, script y title. Pero no es necesario. Quizás por eso mucha gente no sabe cuándo usarlo.
Utilice 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 información sobre herramientas cuando el mouse se coloca sobre un elemento específico. Sin embargo, depende del fabricante 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, las primeras versiones del navegador Safari.
Un buen uso del atributo de título es agregar texto descriptivo a un enlace, especialmente cuando el enlace en sí no transmite claramente el propósito del enlace. De esta manera, los visitantes saben adónde los llevarán los enlaces y no cargarán una página que tal vez no les interese en absoluto. Otra posible aplicación es proporcionar información descriptiva adicional para imágenes, como fechas u otra información no esencial.
El valor del atributo del título se puede establecer más largo que el valor del atributo alt. Sin embargo, tenga en cuenta que algunos navegadores truncarán el texto que sea demasiado largo (como información sobre herramientas u otros). Por ejemplo, el navegador principal de Mozilla sólo puede mostrar los primeros 60 caracteres. Esto se considera un error de Mozilla y es algo que debes tener en cuenta.
Piensa antes de usar
Mi consejo es mantener el texto alternativo en la esencia. En la mayoría de las aplicaciones, debe dejarse en blanco, alt="" (tenga en cuenta que no hay espacios entre las comillas). Piense en esas imágenes, ¿qué información brindan a quienes las ven, qué palabras debería usar para describirlas o qué información debería brindar a las personas que no pueden ver las imágenes? ¿Realmente ayudará a alguien que no puede ver la imagen escribir el texto alternativo como "Foto: CEO parado afuera de un edificio, vestido con traje gris y corbata negra, mirando al cielo"? Si lo crees, entonces escríbelo. En muchos casos, creo que es mejor dejar el texto de reemplazo en blanco.
Para el atributo de título, es difícil dar instrucciones de uso estrictas. Lo uso principalmente en enlaces que no se explican por sí mismos, como el mismo texto de enlace en la misma página, pero en diferentes páginas enlazadas. A veces se proporciona texto más descriptivo para algunos botones o elementos de formulario.
descripción más larga
Cuando una imagen requiere una descripción más larga que los límites del atributo alt, existen algunas opciones.
El atributo longdesc se puede utilizar para proporcionar un enlace a una página separada que contenga una descripción de texto de la imagen. Esto significa vincular al espectador a otra página, lo que puede causar dificultades de comprensión. Además, la compatibilidad del navegador con el atributo longdesc es inconsistente y no muy buena.
El atributo longdesc puede contener un enlace a otra parte del documento actual (un ancla) en lugar de un enlace a otra página. En las notas a pie de página de Accesibilidad , Andy Clarke da una buena explicación de cómo aplicarla.
Los enlaces de descripción (enlaces D) se pueden utilizar para complementar longdesc. Un enlace de descripción es un enlace normal a una página que contiene texto alternativo. El enlace se coloca al lado de la imagen y está disponible en todos los navegadores. Hay muchas opiniones diferentes sobre su eficacia y a mí personalmente no me gusta esta nota. WCAG también, en su borrador de trabajo Técnicas HTML para WCAG 2.0 , los enlaces de descripción están "obsoletos".
Si una descripción larga de la imagen es útil para cualquier espectador, entonces puede considerar simplemente mostrarla dentro del mismo documento, en lugar de vincularla a otras páginas u ocultarla. Para que todos puedan leerlo. Este es un enfoque simple y de baja tecnología.