Good Mood

Page Content

terminología

Hay varios términos que se utilizan comúnmente para describir el texto alternativo. Se pueden utilizar en diferentes contextos, incluso dentro de este sitio Web.,

• ALT text-el concepto de agregar una descripción alternativa de texto amigable para el lector de pantalla de una imagen. Esto se puede implementar de manera diferente según los tipos de documentos.
• atributo ALT (HTML) – en HTML, el texto ALT se inserta en el atributo ALT dentro de la etiqueta IMG.
• ALT «Tag» – referencia abreviada al atributo ALT.

demostración de texto alternativo

propósito

el texto alternativo agrega una descripción de texto a una imagen en una página Web y debe usarse para todas las imágenes, viñetas gráficas y reglas horizontales gráficas.,

los usuarios del lector de pantalla acceden al texto alternativo para proporcionarles un texto equivalente a las imágenes. En navegadores visuales como Firefox, el texto alternativo se muestra cuando una imagen se rompe o cuando todas las imágenes se han deshabilitado.

WCAG Guideline

WCAG 2.0 Guideline 1.1.1.- «Todo el contenido no textual que se presenta al usuario tiene una alternativa de texto que sirve al propósito equivalente.»

ejemplos de botones de imagen

considere las imágenes de las secciones como un sitio educativo hipotético debajo del cual todas contienen texto decorativo.,nota: cualquier texto utilizado en una imagen debe seguir las pautas de legibilidad y contraste.

Lector de Pantalla de Salida Con la tecla ALT de la Etiqueta

Si las imágenes no se cargan, ALT texto mostrará lo que las imágenes han dicho en un navegador como Firefox.

Salida del lector de pantalla sin etiqueta ALT

sin el texto ALT, nadie puede saber cuál habría sido el contenido de la imagen.

Implementando el Atributo ALT

a Continuación hay algunos ejemplos de cómo el texto ALT puede ser implementado en función del contexto.

George Washington Painting

ver el código

implementar el texto ALT como un atributo en la etiqueta IMG. Vea el ejemplo a continuación.

nota: una longitud de texto alternativo recomendada es de aproximadamente 125 caracteres. Esto acomoda el campo de texto ALT DEL LECTOR DE PANTALLA DE JAWS. Sin embargo, esto no está dentro de las directrices de WCAG.

subtítulos de la imagen vs.texto alternativo

cualquier información sobre la imagen, como información de derechos de autor, fuente de la imagen o información adicional, debe colocarse en el texto del título debajo de la imagen, no en el texto alternativo. Vea el ejemplo a continuación.

leyenda: pintura «Washington y Lafayette en Valley Forge» de John Ward Dunsmore de 1907. Imagen cortesía de la Biblioteca del Congreso.,

Logos

para logotipos, especialmente logotipos que se repiten, es suficiente identificar qué logotipo es, no necesariamente describirlo completamente

usos inadecuados del texto ALT

no se debe utilizar para:

• introducir texto de ayuda,
• Proporcionar información de copyright o fuente sobre una imagen o
• transmitir información complementaria sobre el gráfico.,
• introducir términos de búsqueda (esto se puede hacer mediante un buen uso de los encabezados).

texto alternativo vacío para imágenes decorativas

algunas imágenes se utilizan únicamente con fines de diseño o para mejorar el contenido para usuarios videntes y no proporcionan contenido.

La etiqueta ALT para estas imágenes pueden ser en blanco ( <alt= «» > o <alt=» «>), de modo que los lectores de pantalla ignorarlos por completo.,

el siguiente ejemplo utilizará una imagen de muestra de una barra de herramientas rainbow, seguida de algunos ejemplos de código accesibles e inaccesibles.

barra de herramientas Rainbow

supongamos que se diseñó un lado Web con una barra de herramientas rainbow utilizada para separar piezas de texto.

Nota: el atributo ALT con el carácter de espacio se considera menos correcto, pero puede ser la única opción permitida en algunos sistemas de administración de contenido.

Concise Alt Text

Si ya se proporciona una descripción de texto para una imagen dentro del texto principal de la página, la etiqueta ALT solo puede proporcionar un resumen de la imagen, no una descripción completa.,

Vea imágenes complejas para ejemplos de cómo esto se puede usar en diferentes situaciones.

texto de ejemplo con imagen

a continuación se muestra una imagen de una molécula de grasa saturada con 18 moléculas de carbono. Observe que los enlaces simples entre los elementos hacen que la cadena de carbono sea relativamente recta.,

enlaces a descripciones extendidas

en algunos casos puede ser necesario agregar un enlace a una descripción extendida de una imagen, especialmente en los casos en que las imágenes se utilizan para transmitir contenido significativo. Hay varias maneras en que esto se puede lograr, incluyendo una etiqueta LONGDESC, un enlace D o un enlace más abierto a la descripción más larga. Vea a continuación ejemplos

enlace al texto de la leyenda

si la información es crítica, entonces un enlace de leyenda abierta puede ser la mejor solución. Este método proporciona la indicación más clara de que una descripción más larga está disponible.,

Ver descripción de texto extendida

enlaces D

algunos expertos abogan por el uso de un enlace D para señalar la presencia de una descripción de texto extendida. Sin embargo, es posible que algunos usuarios no conozcan la Convención. Este método se utiliza mejor para proporcionar información que es puramente complementaria.

D

atributo LONGDESC

Este es un atributo que está oculto en los navegadores visuales, pero reconocido por Algunos lectores de pantalla. LONGDESC es mejor para proporcionar detalles adicionales que mejoran el contenido, pero no es crítico., Cabe señalar que LONGDESC tiene un soporte incompleto entre los navegadores visuales y los lectores de pantalla, y está obsoleto en HTML5.

enlaces y botones

para las imágenes utilizadas como elementos de navegación para activar funciones como imprimir, cargar o guardar, el texto alternativo debe describir el destino o la función, no la imagen.

Escudo de Estado de Penn que se puede hacer clic vs.Escudo de Estado de Penn que no se puede hacer clic

Cuando se usa un escudo de Estado de Penn en una página Web, el texto alternativo utilizado depende de si se puede hacer clic (es decir, enlaces a la página de inicio de Penn State) o no.,

Si se utiliza una imagen de escudo de Estado de Penn para proporcionar un enlace clicable a la página de inicio, el texto ALT debe indicar el destino (es decir, ALT=»página de inicio de Estado de Penn») tenga en cuenta que la etiqueta IMG está incrustada dentro de una etiqueta A para el enlace.

Nota: Si no se puede hacer clic en el escudo, el texto alternativo puede ser «Penn State» o «Penn State shield».

atributo TITLE para sugerencias de herramientas

el atributo TITLE de un texto IMG se puede usar para generar una sugerencia para usuarios videntes. Pero por favor, tenga en cuenta que.,

• El atributo TITLE no se lee en voz alta de forma predeterminada en la mayoría de los lectores de pantalla.
• El texto alternativo generalmente no se muestra como una sugerencia de herramienta en la mayoría de los navegadores.

si se necesita una sugerencia de herramienta para usuarios videntes, se pueden usar tanto un atributo TITLE como ALT con la misma información para garantizar que la misma información se entregue a ambas audiencias.

vea este ejemplo a continuación

botón de corazón favoritos con punta de Herramienta

considere una versión de la imagen de corazón de abajo que se puede usar en una interfaz para seleccionar elementos favoritos (por ejemplo, canciones favoritas o libros electrónicos).,

el texto ALT y el atributo de TÍTULO son «Favoritos»

vea el Código