Accesibilidad: los cuatro principios de las WCAG aplicados en la práctica

Qué es

Las Web Content Accessibility Guidelines (WCAG) 2.2 del W3C organizan sus criterios de conformidad en cuatro principios. La traducción al alemán de la versión 2.0 publicada por el W3C los denomina «wahrnehmbar, bedienbar, verständlich und robust», es decir, perceptible, operable, comprensible y robusto. Cada criterio tiene un nivel de conformidad A, AA o AAA; AA es el nivel que se suele fijar como objetivo. La versión 2.2 añade, entre otros, criterios sobre el tamaño mínimo de los elementos interactivos (2.5.8 «Target Size (Minimum)»: 24 por 24 píxeles CSS), sobre el foco no oculto (2.4.11), sobre la reutilización de datos ya introducidos (3.3.7 «Redundant Entry») y sobre la autenticación sin tareas de memoria ni acertijos (3.3.8 «Accessible Authentication (Minimum)»). El criterio 4.1.1 «Parsing» se ha eliminado en la 2.2 por obsoleto. Siempre es normativo el texto original en inglés; las traducciones no lo son.

Por qué importa

Las barreras excluyen a las personas que usan lector de pantalla, teclado, ampliación o control por voz. Los mismos defectos perjudican a los motores de búsqueda y a los lectores automatizados: una imagen sin alternativa textual, un botón sin nombre accesible o un campo sin etiqueta resultan invisibles para cualquier acceso no visual. Los cuatro principios son una estructura de revisión que se puede repasar mentalmente, incluso sin herramientas.

Cómo aplicarlo

• Perceptible: toda imagen informativa lleva un atributo alt; las meramente decorativas, uno vacío (alt=""). El texto normal necesita una relación de contraste de al menos 4,5:1; el texto grande, 3:1. No transmitir nunca información solo mediante el color; subrayar los enlaces dentro de párrafos de texto.
• Operable: todas las funciones son accesibles con el teclado, el foco es visible y no queda atrapado en ningún punto (2.1.2 «No Keyboard Trap»). Los objetivos de clic y de toque miden al menos 24 por 24 píxeles CSS o tienen suficiente separación. Un enlace de salto lleva al contenido principal.
• Comprensible: declarar el idioma de la página con lang y, por separado, los fragmentos en otros idiomas. La navegación es la misma en todas las páginas. Los mensajes de error indican el campo y cómo corregirlo; no se piden de nuevo los datos ya introducidos.
• Robusto: HTML semántico (encabezados, listas, landmarks, button en lugar de un div en el que se hace clic); ARIA solo donde HTML no ofrece equivalente.
• Comprobar: primero de forma automatizada (detecta los fallos formales); después, una ronda solo con teclado y otra con lector de pantalla por los flujos más importantes.

Trampas

Un atributo title no es un nombre accesible. Quitar el borde del foco por razones de diseño incumple 2.4.7. Las herramientas automáticas de revisión, por lo general, no evalúan el contenido de las alternativas textuales: alt="Bild" pasa la comprobación y no ayuda a nadie. Los «overlays de accesibilidad» incorporados a posteriori no sustituyen una estructura que falta en el código fuente. Quien lea solo la traducción alemana de la versión 2.0 no conocerá los criterios añadidos en la 2.1 y la 2.2.