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

Todo el contenido no textual que se presenta a las personas tiene una alternativa textual que cumple el mismo propósito [1].

Objetivo

Hacer que la información transmitida mediante contenido no textual sea accesible a través de alternativas textuales [2]. Proporcionar alternativas textuales para todo el contenido no textual de modo que se pueda convertir a otros formatos que las personas necesiten, tales como textos ampliados, braille, voz, símbolos o en un lenguaje más simple [3].

Importancia de cumplir el criterio

El texto alternativo es crucial para que una persona ciega pueda comprender una imagen, ya que la descripción textual le ofrece la misma información que la imagen [3]. Las alternativas textuales deben proporcionar la misma información o cumplir el mismo propósito que el contenido no textual [2].

El contenido no textual incluye imágenes, audios, vídeos, elementos funcionales como botones o campos de formulario, gráficas, CAPTCHAs, y contenido decorativo [1, 4].

Referencias WCAG / Técnicas

Este criterio se encuentra dentro del **Principio 1. Perceptible** (Pauta 1.1 Alternativas textuales) [5, 6] y su cumplimiento se basa en:

• **Alternativa textual breve:** Utilizar el atributo `alt` en imágenes o los atributos `aria-label` o `aria-labelledby` [7].
• **Alternativa textual larga:** Utilizar el atributo `aria-describedby` o incluir la descripción en otra ubicación con un enlace adyacente, especialmente para contenido complejo (gráficos o diagramas) [8-10].
• **Controles o campos de formulario:** Identificar su propósito usando atributos como `aria-label`, `aria-labelledby`, `alt` (en imágenes de botones) o el elemento `label` asociado al campo [1, 9, 11].
• **Imágenes decorativas:** Implementarlas de forma que los productos de apoyo puedan ignorarlas, usando CSS o dejando el atributo `alt` vacío sin añadir el `title` [7, 12-14].

• • Técnicas HTML y ARIA clave:**
• Using alt attributes on img elements (en inglés) [15]
• Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content (en inglés) [15]
• de ARIA, como usar `role="img"` y `aria-label` en iconos de fuentes [16, 17].

Recursos de apoyo

Para crear textos alternativos adecuados, se recomiendan las siguientes guías de Olga Carreras:

• Guía para incluir textos alternativos adecuados a las imágenes [12, 18].
• Mapa de decisión para proporcionar textos alternativos adecuados a las imágenes [12, 18].

• • Herramientas de comprobación manual** (según WCAG 2.1):

Se puede utilizar la **Web Developer Toolbar** para:

• Comprobar si hay imágenes sin atributo `alt` ("Images – Outline images without alt attributes") [2].
• Visualizar los atributos `alt` de las imágenes en la página ("Images – Display alt attributes") [15].
• Verificar que las imágenes incluidas desde hojas de estilo (CSS) sean puramente decorativas [19].

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