Por qué importa la accesibilidad

Marco legal: El Real Decreto 1112/2018 obliga a los sitios web del sector público español a cumplir con el nivel AA de las WCAG 2.1. La Directiva Europea de Accesibilidad (2019/882) extiende obligaciones similares al sector privado en productos y servicios digitales a partir de 2025.

Impacto real: En España, más de 4 millones de personas tienen alguna discapacidad que afecta al uso de dispositivos digitales. Una web inaccesible excluye a ese segmento de usuarios y, en contextos B2B, puede ser motivo de exclusión en licitaciones públicas.

SEO: Muchas buenas prácticas de accesibilidad (estructura semántica, textos alternativos, jerarquía de encabezados) coinciden con las buenas prácticas SEO.

Cómo usar este checklist

Las WCAG 2.1 tienen tres niveles: A, AA y AAA. Este checklist cubre los puntos A y AA más relevantes para aplicaciones web empresariales. El nivel AA es el estándar exigido por la normativa española.

Para cada punto, indica: ✅ Cumple / ❌ No cumple / ⚠️ Parcial / N/A No aplica.

1. Percepción: la información debe ser presentable de múltiples formas

Alternativas textuales

[ ] Todas las imágenes informativas tienen atributo alt descriptivo.
[ ] Las imágenes decorativas tienen alt="" o role="presentation".
[ ] Los iconos sin texto tienen etiqueta accesible (aria-label o title).
[ ] Los gráficos y diagramas complejos tienen descripción textual equivalente.

Contraste de color

[ ] El texto normal tiene ratio de contraste mínimo de 4.5:1 respecto al fondo.
[ ] El texto grande (>18pt o >14pt bold) tiene ratio mínimo de 3:1.
[ ] Los elementos de interfaz (botones, inputs, checkboxes) tienen ratio mínimo de 3:1 respecto al entorno.
[ ] La información no se transmite solo mediante color (ej. errores de formulario indicados solo en rojo).

Herramienta gratuita para verificar contraste: WebAIM Contrast Checker

Adaptabilidad

[ ] El contenido se puede presentar sin perder información al aumentar el texto al 200%.
[ ] La web es usable en modo apaisado y vertical (responsive).
[ ] No hay contenido que requiera scroll horizontal en viewport de 320px de ancho.

Contenido multimedia

[ ] Los videos tienen subtítulos sincronizados (CC).
[ ] Los audios tienen transcripción textual.
[ ] No hay contenido que parpadee más de 3 veces por segundo (puede provocar crisis epilépticas).

2. Operabilidad: la interfaz debe ser navegable

Navegación por teclado

[ ] Todos los elementos interactivos (links, botones, inputs, selects) son accesibles con Tab.
[ ] El orden de foco por teclado es lógico y sigue el orden visual de la página.
[ ] Hay un indicador visual claro del elemento que tiene el foco (no se ha eliminado el outline con CSS sin reemplazarlo).
[ ] No hay "trampas de foco": el usuario puede entrar y salir de cualquier componente con el teclado.
[ ] Los modales y dropdowns se pueden cerrar con la tecla Escape.

Tiempo suficiente

[ ] Si hay contenido con tiempo límite (sesión, formulario), el usuario puede extender el tiempo o está advertido con suficiente antelación.
[ ] Los elementos en movimiento (carruseles, animaciones) se pueden pausar.

Navegación y orientación

[ ] Hay un enlace "Saltar al contenido principal" visible o accesible por teclado al principio de cada página (evita navegar por el menú en cada página con lector de pantalla).
[ ] El título de cada página (<title>) describe su contenido de forma única.
[ ] Hay más de una forma de encontrar una página: menú de navegación, buscador, mapa del sitio.
[ ] Las páginas tienen una jerarquía correcta de encabezados: un solo <h1> por página, seguido de <h2>, <h3>, etc. en orden lógico.

3. Comprensibilidad: la información debe ser comprensible

Legibilidad

[ ] El idioma de la página está declarado en el atributo lang del <html>. Ej: <html lang="es">.
[ ] Si hay fragmentos en otro idioma, están marcados con lang en el elemento correspondiente.

Comportamiento predecible

[ ] Los formularios no se envían automáticamente al cambiar un campo (sin acción explícita del usuario).
[ ] La navegación es consistente en todas las páginas (el menú está siempre en el mismo sitio y en el mismo orden).
[ ] Los componentes con el mismo nombre hacen siempre lo mismo.

Ayuda en formularios

[ ] Todos los campos de formulario tienen una etiqueta visible (<label>) asociada.
[ ] Los errores de validación identifican el campo concreto con el error y describen el problema.
[ ] Los errores de validación no desaparecen automáticamente antes de que el usuario pueda leerlos.
[ ] Los campos con formato específico (fecha, teléfono, NIF) tienen un ejemplo o descripción del formato esperado.

4. Robustez: el contenido debe ser interpretable por tecnología asistiva

[ ] El HTML es válido (sin errores estructurales graves). Verificar con validator.w3.org.
[ ] Los elementos interactivos usan las etiquetas HTML correctas (<button> para botones, <a> para enlaces, no <div> con onclick).
[ ] Se usa ARIA solo cuando no hay alternativa HTML nativa y de forma correcta (no se usa ARIA para parchar HTML malo).
[ ] Los componentes complejos (modales, tabs, acordeones, tooltips) implementan los patrones ARIA correctos. Referencia: ARIA Authoring Practices Guide.

Herramientas de verificación gratuitas

| Herramienta | Tipo | Qué detecta | |-------------|------|-------------| | WAVE | Extensión browser | Errores estructurales, contraste, ARIA | | axe DevTools | Extensión browser | WCAG A y AA automatizable | | Lighthouse | Chrome DevTools | Accesibilidad + rendimiento + SEO | | NVDA | Lector de pantalla (Windows) | Pruebas con usuario real de lector | | VoiceOver | Lector de pantalla (Mac/iOS) | Pruebas con usuario real de lector |

Ninguna herramienta automática detecta todos los problemas de accesibilidad. El 30-40% de los problemas solo se detectan con pruebas manuales o con usuarios reales. Las herramientas son un punto de partida, no una validación completa.

Cómo priorizar las correcciones

Si tu proyecto tiene muchos incumplimientos, prioriza en este orden:

Navegación por teclado rota — Bloquea completamente a usuarios de teclado y lectores de pantalla.
Contraste insuficiente — Afecta a millones de usuarios con baja visión.
Etiquetas de formulario incorrectas — Impide el uso de formularios con tecnología asistiva.
Imágenes sin alt — Información perdida para usuarios ciegos.
Jerarquía de encabezados incorrecta — Dificulta la navegación con lector de pantalla.

Checklist de accesibilidad web (WCAG 2.1) para proyectos empresariales