Escribir texto ALT efectivo para imágenes

Escribir texto ALT efectivo para imágenes

Contar palabras:
946

Resumen:
Basta con insertar texto ALT no es necesariamente suficiente para garantizar que las imágenes de acceso - el texto también debe ser efectivamente por escrito. Descubre cómo conseguirlo ...


Palabras clave:
usabilidad, accesibilidad, usabilidad web, la credibilidad web, accesibilidad web, CSS, web, diseño web accesible


Cuerpo del artículo:
Cualquiera que sepa algo acerca de la accesibilidad web, sabe que las imágenes necesitan alternativas, o ALT, el texto que se les asignen. Esto se debe a los lectores de pantalla no puede entender las imágenes, sino que lea en voz alta el texto alternativo que se les asignen. En Internet Explorer se puede ver este texto ALT, simplemente pasando el ratón sobre la imagen y ver el color amarillo que aparece información sobre herramientas. Otros navegadores (correctamente) no lo hace. El código HTML para insertar texto ALT es la siguiente:

Pero ciertamente no puede ser una habilidad para la escritura de texto ALT para las imágenes? Que acaba de estallar una descripción de allí y ya está bueno para ir, ¿verdad? Bueno, algo así. Claro, no es ciencia de cohetes, pero hay algunas pautas que debe seguir ...

Spacer imágenes y texto que falta ALT

las imágenes de espaciador siempre se debe asignar el texto ALT nulo, o alt = "". Esta manera más lectores de pantalla total desconocimiento de la imagen y ni siquiera anuncian su presencia. las imágenes de espaciador son imágenes invisibles que la mayoría de sitios web bastante uso. El objetivo de ellos es, como su nombre indica, para crear un espacio en la página. A veces no es posible crear la representación visual que necesita, así que usted puede pegar una imagen en un (especificando su altura y anchura) y Volia, usted tiene el espacio adicional que necesita.

No todo el mundo utiliza este texto ALT nulo para las imágenes de espaciador. Algunos sitios web palo en alt = "imagen de espaciador". Imagínese lo molesto que esto puede ser por un usuario del lector de pantalla, especialmente cuando usted tiene diez de ellos en una fila. Un lector de pantalla diría, "la imagen, imagen de espaciador" diez veces en una fila (los lectores de pantalla suelen decir la palabra "imagen", antes de la lectura de su texto ALT) - ahora que no es útil!

Otros desarrolladores Web simplemente dejar de lado el atributo ALT para las imágenes de espaciador (y tal vez otras imágenes). En este caso, la mayoría de los lectores de pantalla leerá en voz alta el nombre del archivo, lo que podría ser "sitionuevo / imágenes onepixelspacer.gif / '. Un lector de pantalla que anunciará esta imagen como "imagen, imágenes barra barra sitionuevo un separador de punto pixel gif". Imagínese lo que esto suena como si hubiera diez de ellos en una fila!

Las balas y los iconos

Las balas y los iconos deben ser tratados de la misma manera como las imágenes de espaciador, por lo que se debe asignar un texto alternativo nulo, o alt = "". Piense en una lista de elementos con una bala de lujo procedimiento cada artículo. Si el texto ALT, 'bala' se asigna a cada imagen a continuación, "Imagen, topo" se leerán en voz alta por los lectores de pantalla antes de cada elemento de la lista, por lo que es tener que poco más de tiempo para trabajar a través de la lista.

Iconos, por lo general utilizados para complementar los enlaces, también se debe asignar alt = "". Muchos sitios web, que ponen en el icono junto al enlace de texto, utilice el enlace de texto como el texto ALT del icono. Los lectores de pantalla en primer lugar anunciar este texto ALT y, a continuación el texto del enlace, por lo que diría a continuación, el enlace dos veces, lo que obviamente no es necesario.

(Idealmente, las balas y los iconos deben ser llamados como imágenes de fondo en el documento CSS - esto les quitará del documento HTML completo y por lo tanto eliminar la necesidad de cualquier descripción ALT.)

Las imágenes decorativas

Las imágenes decorativas también se debe asignar texto alternativo nulo, o alt = "". Si una imagen es caramelo puro del ojo entonces no hay necesidad de un usuario de lector de pantalla para saber siquiera que está ahí y ser informado de su presencia no hace sino aumentar la contaminación acústica.

Por el contrario, se podría argumentar que las imágenes en su sitio crear una identidad de marca y ocultándolos de usuarios de lectores de pantalla que esté negando este grupo de usuarios la misma experiencia. Accesibilidad expertos tienden a favorecer el argumento anterior, pero ciertamente es un caso válido para el segundo también.

Navegación y texto incrustado en imágenes

Los menús de navegación que requieren texto de fantasía no tienen más opción que integrar el texto dentro de una imagen. En esta situación, el texto alternativo no debe ser utilizado para ampliar la imagen. Bajo ninguna circunstancia debe el texto ALT decir, 'Leer todo acerca de nuestros servicios excepcional, diseñado para ayudarle en todo lo que haces ". Si el elemento de menú, dice, 'Servicios', entonces el texto ALT también debería decir "Servicios". texto alternativo siempre debe describir el contenido de la imagen y debe repetir la palabra del texto-por-palabra. Si desea ampliar la navegación, como en este ejemplo, puede utilizar el atributo de título.

Lo mismo se aplica para cualquier otro texto incrustado en una imagen. El texto ALT simplemente debe repetir, palabra por palabra, el texto que figura en esa imagen.

(A menos que la fuente que se utiliza es especialmente único a menudo es necesario incorporar al texto dentro de imágenes - Efectos de navegación avanzado y el fondo ahora se puede lograr con CSS.)

Logotipo de la empresa

Sitios web tienden a variar en la forma de aplicar texto ALT para logotipos. Algunos dicen, 'Nombre de la empresa', 'Nombre de la empresa logotipo de "otros, y otros describen la función de la imagen (normalmente un enlace a la página principal)," Regreso a casa ". Recuerde, el texto ALT siempre debe describir el contenido de la imagen por lo que el primer ejemplo, alt = "Nombre de la empresa", es probablemente el mejor. Si el logotipo es un enlace a la página principal, entonces esto puede ser efectivamente comunicada a través de la etiqueta del título.

Conclusión

Escritura de texto ALT efectiva no es demasiado difícil. Si se trata de una imagen decorativa a continuación el texto alternativo nulo, o alt = "" por lo general se debe utilizar - Nunca, nunca omite el atributo ALT. Si la imagen contiene un texto a continuación, el texto ALT simplemente debe repetir este texto, palabra por palabra. Recuerde, el texto ALT debe describir el contenido de la imagen y nada más.

¿También asegúrese también a mantener el texto ALT lo más breve y concisa posible. Escuchando a una página web con un lector de pantalla tarda mucho más que los métodos tradicionales, por lo que no hacen la dolorosa experiencia de navegación para los usuarios de lector de pantalla con el texto ALT hinchada e innecesario.