Curso HTML 11. Accesibilidad web (a11y) aplicada al HTML

Introducción a la Accesibilidad Web (a11y)

La accesibilidad web se centra en garantizar que todas las personas, incluidas aquellas con discapacidades visuales, auditivas, cognitivas o motrices, puedan percibir, entender, navegar e interactuar con los sitios web. A continuación exploraremos en profundidad cómo aplicar directrices de accesibilidad al HTML puro, aprovechando etiquetas semánticas y atributos ARIA.

Principios Fundamentales de WCAG

• Perceptible: La información y los componentes de la interfaz deben presentarse de manera que los usuarios puedan percibirlos con al menos uno de sus sentidos.
• Operable: Los componentes de la interfaz y la navegación deben ser operables mediante teclado o tecnología asistida.
• Comprensible: La información y el funcionamiento de la interfaz de usuario deben ser claros y fáciles de entender.
• Robusto: El contenido debe ser lo suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de agentes de usuario, incluidas tecnologías de asistencia.

1. Uso de Etiquetas Semánticas

La semántica en HTML ayuda a los lectores de pantalla y otros dispositivos a comprender la estructura de la página.

Ejemplo de estructura con landmarks

  
Mi Sitio Accesible





  

    
Bienvenida
    
Contenido principal de la página...
  
  

2. Imágenes y Texto Alternativo

Toda imagen debe tener un atributo alt descriptivo, excepto aquellas estrictamente decorativas (alt='').

3. Formularios Accesibles

Los formularios deben estar correctamente etiquetados y proporcionar mensajes de error claros.

Etiquetas y asociaciones

  

    Nombre completo:
    
  

  

    Correo electrónico:
    
  

  

    
Género
     Masculino
     Femenino
  

  

    Comentarios:
    
    Máximo 500 caracteres.
  

  Enviar

4. Roles y Atributos ARIA

ARIA (Accessible Rich Internet Applications) extiende la semántica HTML para mejorar la accesibilidad de componentes interactivos.

• role=’alert’ para mensajes de error o notificaciones urgentes.
• aria-live para área que se actualiza dinámicamente.
• aria-hidden=’true’ para ocultar elementos de tecnologías de asistencia.
• aria-expanded en menús desplegables y acordeones.

Ejemplo de acordeón accesible

  
    Sección 1
  
  

  
    Sección 2
  
  

5. Navegación por Teclado

Garantizar que todos los elementos interactivos sean accesibles mediante teclado:

• Enlaces y botones utilizables con la tecla Tab y Enter/Space.
• Gestión de enfoque visible (:focus en CSS, no cubierto aquí).
• Uso de tabindex solo cuando sea necesario, sin romper el flujo natural.

Enlace de salto directo al contenido

Saltar al contenido principal




  

6. Contenido Multimedia Accesible

• Vídeos con subtítulos sincronizados ().
• Transcripciones de audio para usuarios con problemas auditivos.
• Descripción de audio ().

7. Herramientas de Validación y Buenas Prácticas

• Validar con W3C Validator para errores HTML.
• Usar linters de accesibilidad (axe, Lighthouse, WAVE).
• Realizar pruebas con lectores de pantalla (NVDA, VoiceOver).
• Seguir las pautas WCAG 2.1.

Con estas prácticas y ejemplos detallados tendrás una base sólida para construir interfaces HTML accesibles, mejorando la experiencia de todos los usuarios.