Principio 1/1.1 Texto Alternativo/1.1.1- A

1.1.1- A. Alternativa textual breve obligatoria

• Nivel: A
• Versión: 2.2
• Principio: 1. Perceptible
• Pauta: 1.1 Textos alternativos
• Categoría: Contenido
• Subcategoría: No-texto

Usuarios más afectados

• Personas con discapacidad visual total - Barrera grave
• Personas con baja visión – Barrera moderada
• Personas con discapacidad cognitiva – Barrera leve

Descripción y comprensión del criterio

Descripción resumida

Todas las imágenes, iconos o gráficos deben tener un texto que explique qué muestran o para qué sirven.

• Imágenes importantes: poner un texto corto con alt que explique la imagen o su función.

• Imágenes decorativas: usar alt="" o CSS, para que no molesten al lector de pantalla.

• Botones y formularios: darles un nombre que explique qué hacen.

• Diagramas o mapas: hacer un texto largo que explique toda la información y ponerlo cerca del contenido.

Así cualquier persona puede entenderlos, aunque no pueda verlos.

Objetivo

Que los lectores de pantalla y otras ayudas puedan decir o mostrar la información que aparece en imágenes y gráficos.

Importancia de cumplir el criterio

Sin alternativas textuales, las personas ciegas o con baja visión no pueden entender la información visual.

Referencias WCAG

• Comprender el criterio 1.1.1 (en inglés)

Recursos de apoyo

Puedes usar guías y herramientas para escribir textos alternativos:

• Guías que enseñan a hacer descripciones claras.
  • Mapa de decisión para proporcionar textos alternativos adecuados a las imágenes de tu web.

• • Árbol de decisión de W3C (en inglés).

Se indica un video con un ejemplo del criterio.

Evaluación del criterio

Tipo de comprobación

Comprobación Manual

Es necesario revisar visualmente las imágenes y leer las descripciones para comprobar que la información esté completa.

Procedimiento de evaluación

Paso 1. Usa la herramienta de Web Developer Toolbar.

Paso 2. Seleccionar Images – Outline images without alt attributes y comprobar la página. Si hay alguna imagen resaltada, es un error y debe proporcionársele un atributo alt.

Paso 3. Seleccionar Images – Display alt attributes. Verificar que el texto alternativo se ajusta a la imagen. (Consulta la sección de Recursos de apoyo)

Ejemplo Accesible

El texto alternativo de la imagen se muestra en el atributo

Ejemplo NO Accesible

No hay texto alternativo de la imagen<

      <img src="imagen.jpg">
    

</html>

Otras herramientas de evaluación

Herramienta de inspección con un Bookmarklet

Al mostrar la información con el bookmarklet, comprobar que el texto de cada imagen corresponde a la imagen.

Arrastra este botón a tu barra de marcadores: Haz clic para ver los textos alternativos de las imágenes

Lector de pantalla

Uso de lectores de pantalla como JAWS, NVDA o VoiceOver, para comprobar que la información que se escucha al acceder a una imagen, es comprensible.