Accesibilidad web y usabilidad avanzada

En la era digital, la accesibilidad web no es solo una buena práctica, sino una obligación legal y ética. Este curso está diseñado para desarrolladores y diseñadores que desean profundizar en conceptos clave como ARIA, atributos HTML específicos, contrastes de color y pseudo‑clases CSS. Cada sección aborda una pregunta típica de un quiz, explicando el trasfondo técnico y ofreciendo ejemplos prácticos.

1. Ocultar imágenes de los lectores de pantalla sin afectar el flujo visual

Cuando una imagen es meramente decorativa, es importante que los lectores de pantalla la ignoren para evitar ruido innecesario. El atributo correcto es aria-hidden="true". A diferencia de alt="", que también indica que la imagen es decorativa, aria-hidden garantiza que todos los agentes de asistencia la omitan, incluso si el elemento tiene un role o title asociado.

• Uso correcto: <img src="decorative.png" aria-hidden="true" alt="">
• Ventaja: Mantiene la imagen en el flujo visual, preservando el diseño.
• Consideración: No usar aria-hidden en contenido informativo, pues impediría que usuarios con discapacidad visual accedan a la información.

2. Asociar una celda <td> a múltiples encabezados en tablas accesibles

Las tablas complejas requieren que cada celda de datos conozca sus encabezados. El atributo headers permite listar los id de los <th> que describen la celda. Esto es esencial para usuarios de lectores de pantalla que navegan por la tabla de forma lineal.

Ejemplo:

<table>
  <thead>
    <tr>
      <th id="h1" scope="col">Producto</th>
      <th id="h2" scope="col">Precio</th>
      <th id="h3" scope="col">Disponibilidad</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="h1 h2">Cámara</td>
      <td headers="h2">$199</td>
      <td headers="h3">En stock</td>
    </tr>
  </tbody>
</table>

En este caso, la primera celda está vinculada a los encabezados "Producto" y "Precio", lo que brinda contexto completo al usuario.

3. Diferencias entre las pseudo‑clases :focus y :hover

Ambas pseudo‑clases son fundamentales para la interacción, pero su comportamiento difiere:

• :focus se activa cuando un elemento recibe el foco de teclado (por ejemplo, al presionar Tab).
• :hover se dispara cuando el cursor del ratón se posiciona sobre el elemento.

Esto implica que :focus es crucial para la accesibilidad, ya que los usuarios que navegan con teclado o dispositivos de asistencia dependen de él para identificar el elemento activo.

Ejemplo CSS:

a:hover {
  color: #0066cc;
}

a:focus {
  outline: 3px solid #ff9900;
}

El estilo outline visible solo en :focus ayuda a los usuarios que no utilizan el ratón.

4. Ratios de contraste de luminancia según WCAG 2.2

WCAG 2.2 establece requisitos de contraste para garantizar la legibilidad del texto. Para texto normal (tamaño de fuente < 18 pt o < 14 pt en negrita), el ratio mínimo es 4.5:1. Para texto grande, el requisito baja a 3:1. Un contraste insuficiente dificulta la lectura a personas con visión reducida o daltonismo.

Herramientas recomendadas:

• WebAIM Contrast Checker
• MDN Contrast Guide

5. Consecuencias legales del incumplimiento del European Accessibility Act (EAA) en 2026

El European Accessibility Act obliga a los proveedores de bienes y servicios digitales a cumplir con requisitos de accesibilidad. En 2026, la consecuencia más directa de no cumplir es la imposición de multas económicas y, en casos graves, el cierre del sitio web. Estas sanciones varían según el país miembro, pero pueden alcanzar cifras significativas que impactan la reputación y la viabilidad financiera de la empresa.

Recomendaciones para evitar sanciones:

• Realizar auditorías de accesibilidad antes del lanzamiento.
• Implementar pruebas con usuarios reales con discapacidades.
• Documentar el proceso de cumplimiento para evidenciar buenas prácticas.

6. Uso adecuado del atributo aria-live para anuncios no intrusivos

El atributo aria-live controla cómo los lectores de pantalla anuncian cambios dinámicos en la página. El valor polite indica que el anuncio debe esperar a que el lector termine de leer el contenido actual, evitando interrupciones bruscas.

Ejemplo de implementación:

<div aria-live="polite">
  
</div>

Si se necesita una notificación urgente, se usaría assertive, pero para la mayoría de actualizaciones de UI (por ejemplo, resultados de búsqueda en tiempo real) polite es la opción más amigable.

7. Hacer un elemento enfocable mediante JavaScript sin incluirlo en la tabulación manual

El atributo tabindex="-1" permite que un elemento reciba foco mediante scripts (element.focus()) pero lo excluye del orden de tabulación natural. Esto es útil para modales, diálogos o componentes que deben recibir foco programáticamente después de una acción del usuario.

Ejemplo:

<button id="openModal">Abrir modal</button>

<div id="modal" role="dialog" aria-modal="true" tabindex="-1">
  Contenido del modal
</div>

<script>
  document.getElementById('openModal').addEventListener('click', function() {
    const modal = document.getElementById('modal');
    modal.style.display = 'block';
    modal.focus(); // foco programático, no está en el tab order
  });
</script>

Con tabindex="-1", el modal no interrumpe la navegación por teclado, pero sigue siendo accesible para usuarios que dependen del foco programático.

8. Agrupar controles de formulario con <fieldset> y <legend>

El elemento <fieldset> crea una caja visual que agrupa controles relacionados, mientras que <legend> provee una descripción legible por lectores de pantalla. Esta combinación mejora la comprensión y la navegación del formulario.

Ejemplo práctico:

<form>
  <fieldset>
    <legend>Información de contacto</legend>
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="phone">Teléfono:</label>
    <input type="tel" id="phone" name="phone">
  </fieldset>
</form>

Los lectores de pantalla anunciarán "Información de contacto" antes de cada control, proporcionando contexto claro.

Conclusión y mejores prácticas

Dominar los atributos y técnicas presentados en este curso es esencial para crear sitios web que sean accesibles, usables y legalmente conformes. A continuación, se resumen las mejores prácticas clave:

• Utilizar aria-hidden="true" para imágenes decorativas y alt="" como respaldo.
• Emplear headers en tablas complejas para describir relaciones entre celdas.
• Diseñar estilos diferenciados para :focus y :hover, garantizando una pista visual clara.
• Verificar siempre el contraste de color, apuntando a un ratio mínimo de 4.5:1 para texto normal.
• Mantenerse actualizado con la legislación europea, evitando multas mediante auditorías regulares.
• Seleccionar el valor adecuado de aria-live (polite para la mayoría de actualizaciones).
• Usar tabindex="-1" para foco programático sin alterar el orden de tabulación.
• Encapsular grupos de controles con <fieldset> y <legend> para mejorar la experiencia del usuario.

Al aplicar estos conceptos, no solo se mejora la usabilidad y la experiencia del usuario, sino que también se fortalece la responsabilidad social y el cumplimiento legal de cualquier proyecto web.