B3-T10: Accesibilidad Web y Diseño Universal
La accesibilidad web es un tema transversal que aparece siempre en el examen TAI. Las preguntas se centran en los 4 principios POUR, los 3 niveles de conformidad WCAG, la legislación española (RD 1112/2018) y WAI-ARIA. Es un tema de alta rentabilidad: pocas páginas, muchos puntos.
MARCO NORMATIVO INTERNACIONAL
Fuente: W3C WAI (w3.org/WAI) — Web Accessibility Initiative. Todos los estándares son públicos.
| Estándar | Organismo | Ámbito | Descripción |
|---|---|---|---|
| WCAG 2.2 | W3C | Contenido web | Pautas de Accesibilidad para el Contenido Web. 4 principios, 13 pautas, 87 criterios de éxito |
| ATAG 2.0 | W3C | Herramientas de autoría | Pautas para las Herramientas que crean contenido web (CMS, editores, IDE) |
| UAAG 2.0 | W3C | Agentes de usuario | Pautas para Navegadores y reproductores multimedia |
| WAI-ARIA 1.2 | W3C | Aplicaciones web ricas | Roles, estados y propiedades para hacer accesibles las aplicaciones dinámicas (SPA) |
| UNE-EN 301 549 | ETSI / CEN / CENELEC | TIC en general | Norma armonizada europea. Incluye WCAG 2.1 nivel AA como requisito para contenido web |
Tip examen: WCAG = contenido, ATAG = herramientas de autoría, UAAG = agentes de usuario (navegadores). Los tres forman el marco WAI del W3C.
WCAG 2.2 — PRINCIPIOS POUR
Fuente: W3C WCAG 2.2 (w3.org/TR/WCAG22) — Recomendación W3C, junio 2023.
| Principio | Sigla | Significado | Pregunta clave |
|---|---|---|---|
| 1. Perceptible | P | La información debe poder ser percibida por los sentidos | ¿Puede el usuario ver/oír/sentir el contenido? |
| 2. Operable | O | La interfaz debe poder operarse con distintos dispositivos | ¿Puede navegar solo con teclado? |
| 3. Comprensible | U | La información y la interfaz deben ser comprensibles | ¿Entiende el usuario qué hacer? |
| 4. Robusto | R | El contenido debe ser interpretable por diversas tecnologías de asistencia | ¿Funciona con lectores de pantalla? |
PAUTAS POR PRINCIPIO
| Principio | Pautas | Criterios clave (examen) |
|---|---|---|
| Perceptible | 1.1 Alternativas textuales | alt en imágenes, aria-label en controles |
| 1.2 Medios tempodependientes | Subtítulos, audiodescripción, transcripciones | |
| 1.3 Adaptable | Contenido presentable de diferentes formas sin perder información | |
| 1.4 Distinguible | Contraste mínimo 4.5:1 (AA texto normal), 3:1 (AA texto grande) | |
| Operable | 2.1 Accesible por teclado | Todo funcionalidad accesible solo con teclado. Sin trampas de foco |
| 2.2 Tiempo suficiente | El usuario puede pausar, detener o ajustar límites de tiempo | |
| 2.3 Convulsiones | Nada parpadea más de 3 veces por segundo | |
| 2.4 Navegable | Skip links, títulos de página, orden de foco lógico, propósito de enlaces | |
| 2.5 Modalidades de entrada | Gestos alternativos, cancelación de clic, tamaño mínimo de target (24×24 CSS px en WCAG 2.2) | |
| Comprensible | 3.1 Legible | Idioma de la página (lang), idioma de partes |
| 3.2 Predecible | Navegación consistente, sin cambios inesperados de contexto | |
| 3.3 Ayuda en la entrada | Identificación de errores, etiquetas, sugerencias, prevención de errores | |
| Robusto | 4.1 Compatible | HTML válido, name/role/value para componentes, mensajes de estado |
NIVELES DE CONFORMIDAD WCAG
| Nivel | Criterios | Obligatoriedad | Descripción |
|---|---|---|---|
| A | Básicos (mínimos) | Mínimo aceptable | Sin esto, el contenido es inaccesible para grupos amplios |
| AA | A + intermedios | Exigido por RD 1112/2018 | Nivel exigido por la legislación española y la UNE-EN 301 549 |
| AAA | A + AA + avanzados | Recomendado (no exigible globalmente) | Máximo nivel. No siempre alcanzable para todo el contenido |
Pregunta clave: Los niveles son acumulativos: AA incluye todos los criterios de A. El nivel AA es el obligatorio para el sector público en España (RD 1112/2018).
LEGISLACIÓN ESPAÑOLA
Fuente: BOE — RD 1112/2018 (BOE núm. 227, 19/09/2018). Transpone la Directiva (UE) 2016/2102.
| Norma | Ámbito | Requisito |
|---|---|---|
| RD 1112/2018 | Sector público español (webs y apps móviles) | Cumplir UNE-EN 301 549 (que incluye WCAG 2.1 nivel AA) |
| Directiva (UE) 2016/2102 | Sector público de toda la UE | Accesibilidad de sitios web y apps de organismos públicos |
| Ley 34/2002 (LSSI) | Sociedad de la información | Obliga a la AAPP a hacer accesibles sus webs |
| Aspecto RD 1112/2018 | Detalle |
|---|---|
| Declaración de accesibilidad | Obligatoria en todas las webs del sector público. Modelo en el PAe |
| Mecanismo de comunicación | El ciudadano puede comunicar incidencias de accesibilidad |
| Procedimiento de reclamación | Plazo de respuesta: 20 días hábiles |
| Revisiones periódicas | Monitorización por el Ministerio (cada 3 años completa, anual simplificada) |
| Norma técnica de referencia | UNE-EN 301 549 (armonizada con la Directiva UE) |
| Contenido exento | Contenido de terceros no financiado, mapas online (salvo datos de navegación), contenido de intranets/extranets publicado antes del 23/09/2019 |
Dato clave examen: El plazo de respuesta a reclamaciones de accesibilidad es de 20 días hábiles.
UNE-EN 301 549
| Aspecto | Descripción |
|---|---|
| Qué es | Norma europea armonizada de requisitos de accesibilidad para productos y servicios TIC |
| Organismo | ETSI, CEN y CENELEC. Transpuesta como UNE en España |
| Capítulo 9 (Web) | Incorpora por referencia WCAG 2.1 nivel AA |
| Capítulo 11 (Software) | Requisitos accesibilidad para aplicaciones nativas |
| Capítulo 12 (Documentación) | La documentación y soporte deben ser accesibles |
| Relación con WCAG | No sustituye WCAG; lo incorpora y añade requisitos para software, hardware, telecomunicaciones |
WAI-ARIA
Fuente: W3C WAI-ARIA 1.2 (w3.org/TR/wai-aria-1.2). Accessible Rich Internet Applications.
| Categoría | Atributos | Función |
|---|---|---|
| Roles | role="button", role="navigation", role="alert", role="dialog", role="tablist" | Qué ES el elemento (su función semántica) |
| Propiedades | aria-label, aria-labelledby, aria-describedby, aria-required | Características del elemento (etiquetas, descripciones) |
| Estados | aria-expanded, aria-checked, aria-hidden, aria-disabled, aria-selected | Estado actual del elemento (cambia dinámicamente) |
| Atributo ARIA | Uso |
|---|---|
aria-live="polite" | Anuncia cambios cuando el lector de pantalla está inactivo (notificaciones no urgentes) |
aria-live="assertive" | Interrumpe al lector para anunciar cambios (alertas urgentes) |
aria-hidden="true" | Oculta el elemento del árbol de accesibilidad (decorativo o redundante) |
aria-label="texto" | Etiqueta invisible para tecnologías de asistencia (ej: botón con solo icono) |
aria-labelledby="id" | Etiqueta referenciando otro elemento visible por su id |
Regla fundamental ARIA: "No ARIA is better than bad ARIA". Usar primero HTML semántico nativo (button, nav, main). Solo usar ARIA cuando no exista elemento nativo equivalente.
LANDMARKS (PUNTOS DE REFERENCIA)
| Landmark ARIA | Elemento HTML5 equivalente | Función |
|---|---|---|
role="banner" | <header> | Cabecera principal |
role="navigation" | <nav> | Navegación |
role="main" | <main> | Contenido principal |
role="complementary" | <aside> | Contenido complementario |
role="contentinfo" | <footer> | Información de pie de página |
role="search" | <search> (HTML 5.2+) | Área de búsqueda |
role="form" | <form> (con nombre accesible) | Formulario |
DISEÑO UNIVERSAL — 7 PRINCIPIOS
Fuente: Center for Universal Design, North Carolina State University (1997). Ronald Mace et al. Principios de dominio público.
| # | Principio | Descripción | Ejemplo web |
|---|---|---|---|
| 1 | Uso equitativo | Útil para personas con diversas capacidades | Mismo contenido para todos (no versión "accesible" separada) |
| 2 | Flexibilidad de uso | Se adapta a diferentes preferencias y habilidades | Navegación por teclado, ratón, voz o touch |
| 3 | Uso simple e intuitivo | Fácil de entender independientemente de la experiencia | Formularios con etiquetas claras, mensajes de error descriptivos |
| 4 | Información perceptible | Información disponible por múltiples canales sensoriales | Texto alternativo en imágenes, subtítulos en vídeos |
| 5 | Tolerancia al error | Minimiza riesgos y consecuencias de acciones accidentales | Confirmación antes de borrar, posibilidad de deshacer |
| 6 | Bajo esfuerzo físico | Puede usarse eficientemente con mínimo esfuerzo | Targets de clic suficientemente grandes, formularios simplificados |
| 7 | Tamaño y espacio adecuados | Espacio para aproximarse, alcanzar y usar | Diseño responsive, zoom hasta 200% sin pérdida |
HERRAMIENTAS DE EVALUACIÓN
| Herramienta | Tipo | Uso |
|---|---|---|
| WAVE | Extensión navegador | Evaluación visual de errores de accesibilidad |
| axe-core | Librería (Deque) | Motor de evaluación automática. Integrable en testing |
| Lighthouse | Chrome DevTools | Auditoría de accesibilidad, rendimiento, SEO |
| NVDA / JAWS / VoiceOver | Lector de pantalla | Testing manual con tecnología de asistencia real |
| TAW | Herramienta online | Evaluación automatizada según WCAG (española) |
| Pa11y | CLI / CI | Evaluación automatizada en pipeline de desarrollo |
WCAG-EM (Metodología de Evaluación)
| Paso | Actividad |
|---|---|
| 1. Definir alcance | Determinar qué páginas/funcionalidades se evalúan y nivel objetivo (AA) |
| 2. Explorar el sitio | Identificar páginas representativas, tecnologías usadas, funcionalidades |
| 3. Seleccionar muestra | Páginas aleatoria + funcionalidades clave (buscador, formularios, login) |
| 4. Auditar | Evaluar cada criterio WCAG en cada página de la muestra (automático + manual) |
| 5. Informar | Informe con hallazgos, nivel de conformidad alcanzado, recomendaciones |
FUENTES PÚBLICAS
Este resumen ha sido elaborado íntegramente a partir de fuentes de dominio público. No se ha utilizado material con copyright de terceros ni material de preparadores.
| Fuente | Tipo | Referencia |
|---|---|---|
| W3C WCAG 2.2 | Estándar | w3.org/TR/WCAG22 |
| W3C WAI-ARIA 1.2 | Estándar | w3.org/TR/wai-aria-1.2 |
| RD 1112/2018 | Legislación | BOE núm. 227, 19/09/2018 |
| Directiva (UE) 2016/2102 | Legislación UE | DOUE L 327, 02/12/2016 |
| UNE-EN 301 549 | Norma armonizada | ETSI / CEN / CENELEC |
| Center for Universal Design (1997) | Académico | NC State University (dominio público) |