Mapa WCAG 2.2 - por tema
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 y AA.
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 55 criterios de éxito como estaciones distribuidas a lo largo de 7 líneas.
Cada marcador de estación muestra si un criterio es de nivel A o AA. Los 4 principios de las WCAG se representan como zonas que se extienden desde el centro utilizando líneas grises finas:
- 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 |
|---|---|---|---|
| 1.4.13 | Contenido en hover o focus | AA | |
| 2.1.1 | Teclado | A | 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.11 | Foco no oscurecido nuevo | AA | ninguno |
| 3.2.1 | Con foco | A | ninguno |
| 3.2.2 | Con entrada de datos | A | |
| 4.1.2 | Nombre, rol, valor | A |
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
- 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.3 | Contraste | AA | |
| 1.4.5 | Imágenes de texto | AA | |
| 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 desde Características Sensoriales en adelante.
| Número | Criterio de éxito | Nivel | Intercambios |
|---|---|---|---|
| 2.4.7 | Foco visible | AA | |
| 1.4.11 | Contraste no textual | AA | ninguno |
| 1.4.3 | Contraste | AA | |
| 1.4.1 | Empleo del color | A | ninguno |
| 1.4.5 | Imágenes de texto | AA | |
| 1.1.1 | Contenido no textual | A | |
| 1.3.3 | Características sensoriales | A | |
| 1.2.1 | Solo audio y solo vídeo | A | ninguno |
| 1.2.2 | Subtítulos (pregrabados) | A | ninguno |
| 1.2.4 | Subtítulos (directo) | AA | ninguno |
| 1.2.5 | Audiodescripción | AA | ninguno |
| 1.2.3 | Audiodescripción o alternativa multimedia | A | ninguno |
| 1.4.2 | Control de audio | A | ninguno |
| 2.2.1 | Límite de tiempo ajustable | A | |
| 2.2.2 | Pausar, detener, ocultar | A | ninguno |
| 2.3.1 | Tres destellos o por debajo del umbral | A | ninguno |
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 | ninguno |
| 3.1.1 | Idioma de la página | A | ninguno |
| 2.4.2 | Página titulada | A | |
| 1.1.1 | Contenido no textual | A | |
| 1.3.1 | Información y relaciones | A | ninguno |
| 1.3.2 | Secuencia significativa | A | ninguno |
| 2.4.4 | Propósito de un enalce | A | ninguno |
| 2.4.6 | Encabezados y etiquetas | AA | 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 Identificación del propósito del campo.
| Número | Criterio de éxito | Nivel | Intercambios |
|---|---|---|---|
| 2.2.1 | Límite de tiempo ajustable | A | |
| 1.3.3 | Características sensoriales | A | |
| 1.3.5 | Identificación del propósito del campo | AA | 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.3.1 | Identificación de errores | A | ninguno |
| 3.3.3 | Sugerencia tras error | AA | ninguno |
| 3.3.4 | Prevención de errores | AA | ninguno |
| 3.3.7 | Entrada redundante nuevo | A | 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.8 | Tamaño del objetivo nuevo | AA | ninguno |
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 |
| 3.2.3 | Navegación consistente | AA | ninguno |
| 3.2.4 | Identificación consistente | AA | ninguno |
| 3.2.6 | Ayuda consistente nuevo | A | ninguno |
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/wcag-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