Accesibilidad web y de aplicaciones (A11Y)

1Definición y dimensiones de la accesibilidad

La accesibilidad garantiza que las personas, independientemente de sus capacidades físicas, sensoriales o cognitivas, puedan percibir, comprender, navegar e interactuar con los productos digitales.

También se benefician usuarios con discapacidades temporales (un brazo escayolado) o situacionales (uso bajo luz solar directa).

2Diseño universal

3Marco normativo y estándares

Pautas WCAG 2.2 — principios POUR

1. Perceptible: información visible para los sentidos (texto alternativo en imágenes, subtítulos).
2. Operable: navegación accesible, funcionalidad completa por teclado, sin contenido con parpadeos.
3. Comprensible: textos legibles, funcionamiento predecible, corrección de errores.
4. Robusto: compatible con tecnologías de asistencia.

Niveles de conformidad: A (mínimo obligatorio), AA (estándar legal recomendado), AAA (máxima especialización).

WAI-ARIA especifica atributos HTML (role, aria-*) para dar semántica de accesibilidad:

<button role="button" aria-expanded="false" aria-label="Cerrar menú principal">
  <svg aria-hidden="true"><!-- Icono de X --></svg>
</button>

4Pautas prácticas para desarrolladores

Texto alternativo en imágenes

<!-- Correcto: Informativa -->
<img src="grafico_ventas.png"
     alt="Gráfico de barras que muestra incremento del 15% en ventas 2025">

<!-- Correcto: Decorativa -->
<img src="linea_separadora.png" alt="" aria-hidden="true">

Navegación por teclado

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

Etiquetado de formularios

<label for="username">Nombre de Usuario:</label>
<input type="text" id="username" name="username">

Tecnologías de asistencia (para probar)

✓Para saber si lo has entendido

• Sé definir accesibilidad web y qué colectivos se benefician.
• Conozco el principio de Diseño Universal/Inclusivo.
• Recuerdo los cuatro principios POUR de WCAG.
• Sé distinguir los niveles de conformidad A, AA y AAA.
• Conozco qué exige la norma EN 301 549 / RD 1112/2018 en España.
• Sé para qué sirve WAI-ARIA y puedo interpretar atributos role/aria-*.
• Sé escribir un alt correcto para una imagen informativa y para una decorativa.
• Conozco la regla :focus-visible para no eliminar el contorno de foco sin sustituto.
• Puedo nombrar herramientas de tecnología de asistencia (NVDA/JAWS, VoiceOver, TalkBack).