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

Si una persona no puede ver la página, solo escuchará lo que haya en el código.

Por ejemplo, un botón con un carrito debe decir "Botón Comprar", para que la persona sepa qué hace.

Referencias WCAG

• Texto de contenido no textual (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 Semiautomática

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

El texto alternativo de la imagen se muestra en el atributo alt

<img src="imagen.jpg" alt="texto de la imagen">

Herramientas recomendadas

Herramienta de inspección con un Bookmarklet

Existen otras maneras de observar este criterio en un sitio web.

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 imagenes