Mapa WCAG 2.2 - por tema (versión AAA)
Este diagrama agrupa todos los criterios de éxito de las Pautas de Accesibilidad para el Contenido Web (WCAG) por tema, en la versión 2.2, niveles A, AA y AAA.
Ilustra las conexiones prácticas entre cada criterio que pueden no ser evidentes en los nombres de las pautas. Por ejemplo, todos los criterios que se pueden probar utilizando un teclado están en una misma línea. La estructura se basa en gran medida en el árbol de decisiones de WCAG, el cual proporciona más detalles sobre cómo probar cada criterio.
Otras versiones:
Mapa
Descripción
El mapa se asemeja a un mapa de metro, mostrando 86 criterios de éxito como estaciones distribuidas a lo largo de 8 líneas.
Cada marcador de estación muestra si un criterio es de nivel A, AA o AAA. Los 4 principios de las WCAG se identifican a partir del primer dígito de cada etiqueta:
- 1.x.x - Perceptible (estos están más cerca del centro)
- 2.x.x - Operable
- 3.x.x - Comprensible
- 4.x.x - Robusto (estos están más alejados del centro)
Cada línea se describe en detalle en las siguientes secciones. Algunos nombres de los criterios están ligeramente simplificados.
Teclado
Estos criterios aseguran que la funcionalidad funcione de manera predecible con un teclado, teniendo estados de enfoque visibles.
La línea es de color azul sólido. Va de oeste a norte.
| Número | Criterio de éxito | Nivel | Intercambios |
|---|---|---|---|
| 2.5.6 | Mecanismos de entrada concurrentes | AAA | |
| 1.4.13 | Contenido en hover o focus | AA | |
| 2.1.1 | Teclado | A | ninguno |
| 2.1.3 | Teclado (sin excepción) | AAA | ninguno |
| 2.1.2 | Sin trampa de teclado | A | ninguno |
| 2.1.4 | Atajos de teclado | A | ninguno |
| 2.4.1 | Saltar bloques | A | ninguno |
| 2.4.3 | Orden de foco | A | ninguno |
| 2.4.7 | Foco visible | AA | |
| 2.4.13 | Aspecto del enfoque nuevo | AAA | |
| 2.4.11 | Foco no oscurecido nuevo | AA | ninguno |
| 2.4.12 | Foco no oscurecido (mejorado) nuevo | AAA | ninguno |
| 3.2.1 | Con foco | A | ninguno |
| 3.2.2 | Con entrada de datos | A | |
| 4.1.2 | Nombre, rol, valor | A | |
| 3.2.5 | Cambio a petición | AAA |
Zoom y legibilidad
Estos criterios aseguran que el texto es:
- legible cuando se amplía o se espacia
- almacenado como texto en lugar de solo en una imagen y personalizable
- controlable cuando aparece al pasar el ratón o al enfocar
La línea es de color rojo oscuro con dos líneas blancas en su interior. Se extiende hacia el oeste desde el lado occidental del centro.
| Número | Criterio de éxito | Nivel | Intercambios |
|---|---|---|---|
| 1.4.8 | Presentación visual | AAA | |
| 1.4.6 | Contraste (mejorado) | AAA | |
| 1.4.3 | Contraste | AA | |
| 1.4.5 | Imágenes de texto | AA | |
| 1.4.9 | Imágenes de texto (sin excepción) | AAA | |
| 1.4.4 | Redimensionar texto | AA | ninguno |
| 1.4.10 | Reajuste de elementos | AA | |
| 1.4.12 | Espaciado del texto | AA | ninguno |
| 1.4.13 | Contenido en hover o focus | AA |
Sensorial
Estos criterios evitan que el contenido dependa de sentidos específicos, mediante:
- tener suficiente contraste
- no depender de la visión, el color, la audición o el tiempo
- evitar distracciones de audio o video
La línea es amarilla con un borde negro. Principalmente va de noroeste a este, volviendo sobre sí misma a partir de Solo audio/Solo vídeo. Los criterios relacionados con las Audiodescripciones también se dividen en dos ramas, con Audiodescripción Extendida y Alternativa multimedia (AAA) en una rama separada de las demás.
Código y etiquetas
Estos criterios hacen que el contenido sea compatible con la tecnología asistiva, siendo:
- codificado de manera coherente con su apariencia visual
- etiquetado de manera apropiada
Formularios tienen un conjunto adicional de criterios.
La línea es negra con un borde blanco. Principalmente va de sur a norte.
| Número | Criterio de éxito | Nivel | Intercambios |
|---|---|---|---|
| 3.1.2 | Idioma de partes | AA | |
| 3.1.1 | Idioma de la página | A | |
| 2.4.2 | Página titulada | A | |
| 1.1.1 | Contenido no textual | A | |
| 1.3.1 | Información y relaciones | A | |
| 1.3.2 | Secuencia significativa | A | |
| 2.4.4 | Propósito de un enalce (en su contexto) | A | |
| 2.4.9 | Propósito de un enlace (solo enlace) | AAA | |
| 2.4.6 | Encabezados y etiquetas | AA | |
| 2.4.10 | Encabezados de sección | AAA | ninguno |
| 2.5.3 | Etiqueta en el nombre | A | |
| 3.3.2 | Instrucciones o etiquetas | A | |
| 3.2.2 | Con entrada de datos | A | |
| 4.1.2 | Nombre, rol, valor | A | |
| 4.1.3 | Mensajes de estado | AA |
Formularios
Estos criterios ayudan a garantizar formularios utilizables que:
- no dependan del tiempo o de instrucciones sensoriales
- tengan instrucciones y mensajes de error apropiados
- sean interactivos con la tecnología asistiva
- sean fáciles de iniciar sesión y completar
La línea es verde con una sola línea blanca en su interior. Principalmente va desde la parte orienta del centro hacia el norte. Vuelve sobre sí misma a partir de Características Sensoriales en adelante.
| Número | Criterio de éxito | Nivel | Intercambios |
|---|---|---|---|
| 2.2.1 | Límite de tiempo ajustable | A | |
| 2.2.3 | Sin tiempo | AAA | |
| 2.2.5 | Reautentificación | AAA | ninguno |
| 2.2.6 | Límites de tiempo | AAA | ninguno |
| 1.3.3 | Características sensoriales | A | |
| 1.3.5 | Identificación del propósito del campo | AA | ninguno |
| 1.3.6 | Identificación del propósito | AAA | ninguno |
| 2.5.3 | Etiqueta en el nombre | A | |
| 3.3.2 | Instrucciones o etiquetas | A | |
| 3.2.2 | Con entrada de datos | A | |
| 4.1.2 | Nombre, rol, valor | A | |
| 4.1.3 | Mensajes de estado | AA | |
| 3.2.5 | Cambio a petición | AAA | |
| 3.3.1 | Identificación de errores | A | |
| 3.3.3 | Sugerencia tras error | AA | |
| 3.3.4 | Prevención de errores (legales, financieros o de datos) | AA | |
| 3.3.6 | Prevención de errores (todos) | AAA | |
| 3.3.5 | Ayuda | AAA | |
| 3.3.7 | Entrada redundante nuevo | A | ninguno |
| 3.3.9 | Autenticación accesible (mejorada) nuevo | AAA | ninguno |
| 3.3.8 | Autenticación accesible nuevo | AA | ninguno |
Gestual
Estos criterios aseguran que la funcionalidad:
- no dependa de gestos, arrastre o movimiento
- funcione en pantallas pequeñas tanto en modo vertical como horizontal
- reduzca el riesgo de activar una acción no deseada
La línea es de color cian con un borde negro y una línea interna negra. Forma un bucle en el suroeste.
| Número | Criterio de éxito | Nivel | Intercambios |
|---|---|---|---|
| 1.4.13 | Contenido en hover o focus | AA | |
| 1.3.4 | Orientación | AA | ninguno |
| 1.4.10 | Reajuste de elementos | AA | |
| 2.5.1 | Gestos del puntero | A | ninguno |
| 2.5.2 | Cancelación del puntero | A | ninguno |
| 2.5.4 | Actuación por movimiento | A | ninguno |
| 2.5.7 | Movimientos de arrastre nuevo | AA | ninguno |
| 2.5.5 | Tamaño del objetivo (mejorado) | AAA | ninguno |
| 2.5.8 | Tamaño del objetivo nuevo | AA | ninguno |
| 2.5.6 | Mecanismos de entrada concurrentes | AAA |
Sitio web completo
Estos criterios deben probarse en todo el sitio para asegurar:
- los nombres, menús y mecanismos de ayuda aparezcan de manera consistente
- las páginas tengan títulos significativos
- haya más de una forma de acceder a cada página
La línea es rosa con dos líneas internas negras. Va de sur a sureste.
| Número | Criterio de éxito | Nivel | Intercambios |
|---|---|---|---|
| 2.4.2 | Página titulada | A | |
| 2.4.5 | Múltiples medios | AA | ninguno |
| 2.4.8 | Ubicación | AAA | ninguno |
| 3.2.3 | Navegación consistente | AA | ninguno |
| 3.2.4 | Identificación consistente | AA | ninguno |
| 3.2.6 | Ayuda consistente nuevo | A | ninguno |
Redacción
Los siguientes criterios aseguran que:
- la redacción y las explicaciones sean claras
- las etiquetas y los mensajes de error sean descriptivos
- las alternativas al contenido de audio o video sean claras
La línea son dos líneas naranjas gruesas sobre un fondo blanco. Se extiende hacia el noreste desde el suroeste, volviendo sobre sí misma a partir de Página Titulada, en adelante. Se superpone a grandes partes de las líneas de Código y Etiquetas, Formularios y Sensorial.
| Número | Criterio de éxito | Nivel | Intercambios |
|---|---|---|---|
| 3.1.6 | Pronunciación | AAA | ninguno |
| 3.1.5 | Nivel de lectura | AAA | ninguno |
| 3.1.4 | Abreviaturas | AAA | ninguno |
| 3.1.3 | Palabras inusuales | AAA | ninguno |
| 3.1.2 | Idioma de partes | AA | |
| 3.1.1 | Idioma de la página | A | |
| 2.4.2 | Página titulada | A | |
| 1.1.1 | Contenido no textual | A | |
| 1.3.1 | Información y relaciones | A | |
| 1.3.2 | Secuencia significativa | A | |
| 2.4.4 | Propósito de un enalce (en su contexto) | A | |
| 2.4.9 | Propósito de un enlace (solo enlace) | AAA | |
| 2.4.6 | Encabezados y etiquetas | AA | |
| 3.3.1 | Identificación de errores | A | |
| 3.3.3 | Sugerencia tras error | AA | |
| 3.3.4 | Prevención de errores (legales, financieros o de datos) | AA | |
| 3.3.6 | Prevención de errores (todos) | AAA | |
| 3.3.5 | Ayuda | AAA | |
| 1.3.3 | Características sensoriales | A | |
| 1.2.1 | Solo audio y solo vídeo | A | |
| 1.2.9 | Solo audio (directo) | AAA | |
| 1.2.2 | Subtítulos (pregrabados) | A | |
| 1.2.4 | Subtítulos (directo) | AA | |
| 1.2.5 | Audiodescripción | AA | |
| 1.2.3 | Audiodescripción o alternativa multimedia | A | |
| 1.2.7 | Extended audio description | AAA | |
| 1.2.8 | Media alternative | AAA | |
| 1.2.6 | Lengua de signos | AAA |
Alternativas y agradecimientos
¡Muchas gracias a Carmen Ruiz Seco por la traducción en español! También gracias a Jordi Turull, Johannes Lehner y Saúl González Fernández.
Otras versiones y mensajes de agradecimiento están en la página del mapa AA en Inglés.
Licencia
¡Gracias por visitarnos! Esta obra está bajo una licencia Creative Commons: CC BY-NC 4.0
Estoy encantado de que cualquiera pueda usar o adaptar este mapa, pero por favor:
- añade créditos, con un enlace a la descripción accesible completa en AndrewHick.com/aaa-es
- compártelo o rediseñalo de manera accesible (por ejemplo, añade texto alternativo a las imágenes)
- consúltame antes de usarlo comercialmente