Accesibilidad web: qué es, normativa y cómo la apliqué en mi proyecto
WCAG, normativa europea y medidas técnicas aplicadas en una web real.
La accesibilidad web no es solo una buena práctica: es un requisito legal y una responsabilidad ética. Permite que todas las personas puedan navegar e interactuar sin barreras.
En este artículo explico qué es, qué normativa existe y qué medidas he aplicado en mi proyecto.
¿Qué es la accesibilidad web?
Diseñar webs que puedan usar personas con discapacidad visual, auditiva, motora, cognitiva, limitaciones temporales o tecnologías asistivas como lectores de pantalla o teclado.
La accesibilidad se define fundamentalmente como la facilidad de acceso a un sitio web, refiriéndose tanto a la forma de llegar a él como a la sencillez en su manejo. Es un concepto que debe estar presente durante todo el proceso de diseño e implementación de una interfaz web para permitir que cualquier usuario pueda utilizar el sitio con facilidad.
Principios fundamentales (WCAG 2.0):
- Perceptible: La información y los componentes de la interfaz deben ser mostrados de forma que cualquier usuario pueda comprenderlos (ej. usar textos alternativos para imágenes).
- Operable: Los elementos deben ser fácilmente accesibles y manejables, por ejemplo, permitiendo la navegación completa solo con el teclado.
- Comprensible: El contenido y el funcionamiento del sitio deben ser fáciles de entender y previsibles para el usuario.
- Robusto: El diseño debe ser compatible con el mayor número posible de aplicaciones y navegadores, tanto actuales como futuros.
Estándares y niveles:
La accesibilidad está regulada por organismos como el W3C (World Wide Web Consortium) y sus pautas WCAG. Para certificar que un sitio es accesible, este debe cumplir con ciertos niveles de conformidad: Nivel A (mínimo), Nivel AA y Nivel AAA (máximo).
Normativa legal
- Directiva (UE) 2016/2102 – Web Accessibility Directive
- European Accessibility Act (EAA) – Directiva 2019/882
- Real Decreto 1112/2018
- Ley 11/2023 de accesibilidad digital
- UNE-EN 301 549 (España) / EN 301 549 (Europa)
- WCAG (Web Content Accessibility Guidelines)
¿A quién afecta esta normativa?
- Sector público - Desde 2018
- Ecommerce - Desde 2025
- Webs corporativas con servicios - Desde 2025
- Microempresas sin servicios esenciales - Exenciones parciales
Accesibilidad vs Usabilidad
Una web puede ser usable pero no accesible. Una web accesible suele ser también más usable.
Aunque la accesibilidad y la usabilidad están estrechamente relacionadas y deben considerarse conjuntamente durante el diseño de interfaces, se establecen distinciones claras entre ambos conceptos basadas en su objetivo y el público al que se dirigen.
Mientras la ACCESIBILIDAD se refiere a la facilidad de acceso a un sitio web, es decir, permite que cualquier persona pueda llegar al sitio y manejarlo; la USABILIDAD se refiere a la facilidad de uso de la interfaz, ya que su foco está en el proceso de interacción entre el usuario y la interfaz para asegurar que sea sencilla de manejar.
En resumen, un ejemplo claro de accesibilidad sería implementar un sistema que permita a un usuario con discapacidad motora manipular la interfaz mediante dispositivos especiales como un trackball. Por el contrario, un ejemplo de usabilidad sería la disposición lógica de los elementos y menús para que cualquier usuario encuentre lo que busca rápidamente y sin confusión
Medidas aplicadas en mi proyecto
Estructura semántica HTML
Uso correcto de header, nav, main, section, footer y jerarquía de encabezados (h1–h6) para mejorar navegación y lectores de pantalla.
Navegación completa por teclado
Todo el sitio es operable sin ratón, con foco visible y control del foco en menús y modales.
Formularios accesibles
Inputs con label asociado, placeholders no informativos, y botones con texto claro y descriptivo.
Menú móvil accesible
Uso de atributos ARIA (aria-expanded, aria-controls) y gestión del foco al abrir/cerrar el menú.
Control de animaciones
Respeto a prefers-reduced-motion para reducir animaciones a usuarios sensibles al movimiento.
Contraste de color
Colores con contraste suficiente (WCAG AA) y sin depender solo del color para transmitir información.
Imágenes accesibles
Uso de alt descriptivo en imágenes informativas y alt="" en imágenes decorativas.
Componentes interactivos accesibles
Acordeones y elementos dinámicos con roles ARIA y estados visibles (expandido/colapsado).
Ejemplo visual de accesibilidad implementada
Checklist WCAG 2.1 Nivel AA
| Criterio | Principio | Descripción | Implementación | Validación |
|---|---|---|---|---|
| 1.1.1 | Perceptible | Alt text | Alt descriptivo | Lighthouse |
| 1.3.1 | Perceptible | Semántica | HTML5 landmarks | W3C |
| 1.4.3 | Perceptible | Contraste | AA palette | Contrast Checker |
| 2.1.1 | Operable | Teclado | Tab navigation | Manual |
| 2.4.7 | Operable | Focus visible | :focus-visible | Manual |
| 3.3.2 | Comprensible | Labels | label for | Inspector |
| 4.1.2 | Robusto | ARIA | aria-expanded | axe |
Conclusión
La importancia de la accesibilidad y la usabilidad en el desarrollo de un sitio web radica en que ambos son ejes fundamentales que garantizan el éxito y la calidad profesional de la interfaz. Mientras que la accesibilidad se asegura de que cualquier usuario pueda acceder a la información, independientemente de sus capacidades físicas o técnicas, la usabilidad se centra en que, una vez dentro, el sitio sea fácil de manejar y satisfactorio, por tanto ambos conceptos son esenciales para crear experiencias digitales inclusivas y efectivas.