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

Objetivo

El propósito principal de este criterio es asegurar que la información sea **perceptible** por todas las personas, sin importar cómo accedan a la página [4].

Queremos que el contenido no textual pueda ser "traducido" por el software (como un lector de pantalla) a otros formatos que la persona necesite, ya sea voz, braille, o texto ampliado [3]. Si la información se ofrece solo visualmente, una persona ciega o con baja visión se perdería ese contenido por completo [4].

Importancia de cumplir el criterio

Este es uno de los requisitos más importantes de la accesibilidad porque afecta a la capacidad de las personas para comprender y operar el contenido.

• • Imagina la web sin poder verla:** Cuando una persona ciega utiliza un lector de pantalla, este software solo puede leer lo que está escrito en el código [4]. Si la página muestra un botón con el icono de un carrito de compra, pero el código solo dice `<img src="carrito.png">`, el lector de pantalla no sabrá qué anunciar. La persona se queda sin información sobre cómo interactuar.

El texto alternativo actúa como **los ojos** para el lector de pantalla [4]. Debe ser una descripción concisa que entregue la **misma información** o tenga el **mismo propósito** que el elemento visual.

Por ejemplo:

• Si es la foto de un perro, el texto alternativo es: "Un labrador marrón jugando en el parque".
• Si es un botón con un icono de lupa, el texto alternativo es: "Botón Buscar" [4].
• Si es un gráfico de barras complejo, la descripción debe resumir los datos importantes y luego ofrecer un texto más largo (descripción larga) con todas las cifras y tendencias [5].

Referencias WCAG / Técnicas

Para proporcionar estas alternativas textuales, se utilizan diferentes técnicas de implementación:

• **Imágenes informativas:** Se usa el atributo alt para ofrecer una descripción corta que transmita la misma información o propósito que el contenido visual [6, 7].

   *   Using alt attributes on img elements (en inglés)

• **Imágenes decorativas:** Si la imagen es solo un adorno (como un espaciador o un borde visual), debe tener un atributo alt="" vacío, o bien implementarse mediante CSS, para que los lectores de pantalla la ignoren y no molesten al usuario con información irrelevante [6, 8, 9].

• **Controles y formularios:** Los campos de formulario y botones deben tener un nombre que describa claramente su propósito [4, 5]. Si son elementos complejos (como un carrusel), a menudo necesitan atributos **ARIA** (como `role="img"` o `aria-label`) para definir su función y nombre accesible, especialmente si no están construidos con etiquetas HTML nativas [5, 6].

• **Contenido complejo:** Si la imagen es un diagrama o un mapa (contenido complejo), no basta con una descripción corta. Se requiere una **descripción larga** que detalle todo el significado, por ejemplo, utilizando un enlace inmediatamente adyacente al contenido no textual que lleve al texto completo [5, 10, 11].

Recursos de apoyo

Si tiene dudas sobre cómo describir correctamente una imagen, puede consultar guías especializadas para generar textos alternativos adecuados. Por ejemplo, Olga Carreras ha desarrollado una guía y un mapa de decisión para ayudar en este proceso [8, 12].

Herramientas como la **Web Developer Toolbar** permiten revisar la página para:

• Comprobar si existen imágenes a las que les falta el atributo `alt` [13].
• Visualizar directamente los textos alternativos existentes y verificar si su contenido es descriptivo [7].
• Verificar si las imágenes de fondo (incluidas por CSS) son realmente solo decorativas y no transmiten información esencial [14].

EVALUACIÓN

HERRAMIENTAS DE APOYO

Nombre de la herramienta: Web Developer Toolbar

PROCEDIMIENTO DE COMPROBACIÓN

1. 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”.

2. Seleccionar “Images – Display alt attributes”. Comprobar la página valorando si el texto de dicho atributo describe el cometido de la imagen.

REFERENCIA WCAG 2.1

• G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
• H35: Providing text alternatives on applet elements
• H37: Using alt attributes on img elements
• H53: Using the body of the object element
• F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image
• F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)
• F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"

LISTA DE EJEMPLOS ACCESIBLES Y NO ACCESIBLES

Se listan diferentes ejemplos

EJEMPLO ACCESIBLE

Ejemplo accesible 1

Esta imagen es accesible porque tiene un atributo "alt" y se muestra un texto alternativo que describe la imagen de forma correcta. Es una imagen que complementa la información textual y por ello necesita una descripción para comunicar en texto su contenido

alt="Atributo alt con un texto descriptivo y adecuado a la imagen"

EJEMPLO NO ACCESIBLE

  

    
Exemple NO accesible 1
    
Falta etiqueta alt en la imagen
    
    
alt=""
  

  

    
Exemple NO accesible 2
    
El texto del atributo alt que describe la imagen no corresponde a la información visual de la imagen
    
    
alt=""
  

En esta imagen se puede observar como correctamente hay un atributo alt

{{sust:discutido}}

<ref>Plantilla:Cita web</ref>

Cambios recientes