2009-03-05 9 views
7

¿Cuál es exactamente el uso previsto del atributo alt en las etiquetas <img>?Mejores prácticas de atributo de imagen alternativa

¿Debería describir la imagen, o debería proporcionar un texto de reemplazo significativo para los lectores de pantalla (y las personas que tienen imágenes apagadas)?

Por ejemplo, si tengo una breve biografía de una persona en mi sitio web, e incluyo una pequeña foto de ellas, ¿es realmente significativo para los usuarios con discapacidad visual que se les lea "Foto de John Smith"?

Respuesta

18

La especificación HTML 5 tiene una huge section en esto.

Básicamente, el atributo alt debería ser lo que estaría allí como texto si no hubiera usado una imagen. Si su imagen es puramente decorativa, puede usar alt="".Una descripción va en el atributo title.

+0

cierto, no debe usar el atributo alt en imágenes decorativas, pero ¿qué valor tiene saber que hay una foto de John Smith para una persona ciega? A menos que vayas a profundizar y describir sus características, parece un poco inútil. – nickf

+0

También lo han cubierto; si realmente no puede proporcionar ningún texto alternativo útil, o si no tiene sentido porque el texto de la página es lo suficientemente bueno, omita el atributo por completo. – flussence

+7

No omita el atributo por completo. Déjalo como alt = "" o de lo contrario algunos lectores de pantalla lo leerán como "gráfico " – Kai

2

Proporciona texto "alternativo" si la imagen no se pudo cargar por algún motivo. En su ejemplo, yo diría que sí, sería apropiado.

0

Debe ser cualquier cosa que ayude al usuario si la imagen no se muestra.

Por cierto, la "función" de pasar el puntero del ratón sobre una imagen en IE y la información sobre herramientas muestra que la ALT no es el comportamiento correcto de ALT. Se supone que el título debe usarse para esto.

+0

IE sólo muestra el texto ALT si el texto del título no está disponible. Y ese es solo un uso posible de TITLE. – Sparr

1

primero en google para esto [img alt accesibility] da Considere cómo se ve la página o cómo suena cuando las imágenes no se muestran. Luego, escriba para cada imagen un texto alternativo que mejor funcione como reemplazo (Guidelines on alt texts in img elements)

0

Describa la imagen sucintamente, como si estuviera hablando con una persona ciega. Bastante simple.

Estoy seguro de que este valor de atributos es utilizado por Google para indexar las búsquedas de imágenes.

3

De w3.org:

Mientras que el texto alternativo puede ser muy útil, debe ser manejado con cuidado. Los autores deben seguir las siguientes pautas:

  • No especificar texto alternativo irrelevante si se incluyen imágenes destinadas a dar formato a una página, por ejemplo, alt = "bola roja" sería inapropiado para una imagen que añade una bola roja para decorar un encabezado o párrafo. En tales casos, el texto alternativo debe ser la cadena vacía (""). En cualquier caso, se recomienda a los autores evitar el uso de imágenes para formatear páginas; las hojas de estilo deben usarse en su lugar.
  • No especifique texto alternativo sin sentido (por ejemplo, "texto ficticio"). Esto no solo frustrará a los usuarios, sino que ralentizará los agentes de usuario que deben convertir texto a voz o salida en braille.
4

Creo que la idea es utilizar el texto alternativo para comunicar la misma información que se pretendía con la imagen. Esto depende de lo que es la imagen.

Los elementos de navegación se describen mejor por su función ("página siguiente", "posterior") que por su aspecto ("flecha derecha").

La foto de John Smith podría sustituirse con una descripción de John Smith, o una descripción del evento que tendrá lugar, etc.

2

El atributo "alt" es una representación alternativa (textual) de la semántica de la imagen. Esto no solo se usa para imágenes que no se pueden cargar: también se usa para lectores de pantalla o navegadores de solo texto.

En su caso particular, incluir el tipo de texto alternativo depende de si considera que es importante tener en cuenta que la página contiene una imagen de la persona o no. Si se trata de un elemento puramente visual, es posible que no desee ningún texto alternativo. Si también se usa como un enlace de algún tipo, probablemente haga desee un texto alternativo para que una persona que usa un lector de pantalla tenga alguna pista sobre lo que podría hacer el siguiente enlace.

0

si tengo una pequeña biografía de una persona en mi sitio web, e incluyen un foto pequeña de ellos, es lo que realmente significativa para los usuarios con discapacidad visual tener "foto de John Smith" leyó para ellos?

Si no tienes ese texto alternativo, ¿qué crees que supondrán que es la imagen? "Foto de John Smith y su esposa"? "Foto de John Smith aceptando su Oscar"? "Foto de John Smith asesinando a JFK"? "Foto de John Smith yaciendo muerto en su patio después de haber sido asesinado por su mascota elefante"?

Si se trata de una foto de John Smith, sí, dígalo. Si es otra cosa, dilo.

+0

hombre, ese tipo de John Smith tiene grandes aventuras. La alternativa a la que aludía era usar alt = "" para las imágenes que no incluyen Oscars o paquidermos homicidas. – nickf

0

Alt atributo se utiliza con img etiqueta. significa

Alt alternativo

Se utiliza para breve descripción de imagen.

se muestra en la pantalla en el navegador caso es no puede cargar la imagen

Click to Know more

+1

Explica cómo el enlace ayudaría a resolver el problema. – Phani

+0

Por favor, explique su respuesta también. –