Curso HTML 11.1 Principios básicos de accesibilidad

Principios básicos de accesibilidad en HTML

La accesibilidad web busca que todas las personas, incluidas aquellas con diversidad funcional, puedan percibir, operar, entender y robustecer el contenido digital. Los cuatro principios fundamentales (WCAG 2.1) son:

• Perceptible: la información debe ser presentada de formas que los usuarios puedan percibir.
• Operable: la interfaz de usuario y la navegación deben poder ser operadas por todos.
• Comprensible: la información e interfaz deben ser entendibles.
• Robusto: el contenido debe ser interpretado por diferentes agentes de usuario, incluidos los lectores de pantalla.

1. Perceptible

1.1 Texto alternativo para imágenes

Toda imagen debe aportar un texto alternativo (alt). Si la imagen es decorativa, el alt queda en blanco (alt=''). Si transmite información, describirla brevemente.

1.2 Contraste de color

El contraste mínimo recomendado es 4.5:1 para texto normal y 3:1 para textos grandes. Se evalúa la relación de luminosidad entre el color de primer plano y el de fondo.

2. Operable

2.1 Navegación por teclado

Debe ser posible moverse por la página usando solo el teclado. Un ejemplo común es el enlace de ‘saltar al contenido’.

  Saltar al contenido





  

2.2 Control de tiempo y animaciones

Si hay animaciones o contenido con tiempo limitado, proporcionar controles para pausar o detener.

3. Comprensible

3.1 Etiquetas y descripciones en formularios

Cada control de formulario debe estar asociado a su etiqueta mediante label for o envolviéndolo.

  

    Nombre completo:
    
  
  

    
      
      Acepto los términos y condiciones
    
  
  Enviar

3.2 Mensajes de error claros

Los errores deben describirse claramente y ponerse en relación con el campo correspondiente.

  Correo electrónico:
  
  
    Por favor ingresa un correo válido.
  

4. Robusto

4.1 Uso de roles y propiedades ARIA

Cuando los elementos semánticos nativos no son suficientes, podemos usar ARIA para mejorar la comunicación con tecnologías de asistencia.

  
Bienvenido a nuestro sitio
  
Contenido principal aquí.

4.2 Orden de foco lógico

El flujo de tabulación debe seguir un orden visual y lógico. Evitar usar tabindex mayor a 0, y preferir el orden del DOM.

Verificación y herramientas

• Validadores HTML (W3C Validator).
• Análisis de contraste (WebAIM Contrast Checker).
• Lectores de pantalla (NVDA, VoiceOver).
• Extensiones de navegador (axe, Accessibility Insights).

Implementando estos principios y revisando continuamente tu página con herramientas y usuarios reales, asegurarás una experiencia accesible y de calidad para todos.