Problemas Comunes de Accesibilidad con Modales (y Cómo Solucionarlos)

Los cuadros de diálogo modales están presentes en todas partes en las aplicaciones web modernas, pero también son una de las fuentes más comunes de fallas de accesibilidad. Un modal es un cuadro de diálogo que aparece sobre el contenido principal y requiere interacción del usuario antes de continuar. Cuando se implementan de manera deficiente, los modales pueden atrapar a los usuarios de teclado, confundir a los lectores de pantalla y crear experiencias frustrantes para cualquier persona que dependa de tecnologías de asistencia. Examinemos los problemas de accesibilidad más frecuentes con los modales y sus soluciones prácticas.

El Papel Crítico de la Gestión del Foco

El problema de accesibilidad más severo con los modales es la gestión del foco defectuosa. Cuando un modal se abre, el foco debe moverse inmediatamente al modal mismo—típicamente al primer elemento interactivo o al contenedor del modal. Cuando se cierra, el foco debe regresar al elemento que lo activó.

Error común: El foco permanece en el contenido de fondo, permitiendo a los usuarios navegar con Tab a través de elementos detrás del modal.

Solución: Implementa una gestión adecuada del foco:

// Al abrir el modal
const triggerElement = document.activeElement;
modal.showModal(); // o modal.focus() para implementaciones personalizadas

// Al cerrar el modal
modal.close();
triggerElement.focus();

Para aplicaciones React usando focus-trap-react:

import FocusTrap from 'focus-trap-react';

function Modal({ isOpen, onClose, children }) {
  return (
    <FocusTrap active={isOpen}>
      <div role="dialog" aria-modal="true">
        {children}
      </div>
    </FocusTrap>
  );
}

Atributos ARIA Faltantes o Incorrectos

Los lectores de pantalla necesitan información explícita sobre los cuadros de diálogo modales para anunciarlos correctamente. Los atributos ARIA faltantes o mal utilizados dejan a los usuarios adivinando sobre el propósito y estado del modal.

Errores comunes:

• Sin role="dialog" o role="alertdialog"
• Falta aria-modal="true"
• Sin nombre accesible vía aria-label o aria-labelledby

Solución: Usa atributos ARIA apropiados:

<!-- Usando el elemento dialog nativo (recomendado) -->
<dialog aria-labelledby="modal-title" aria-describedby="modal-desc">
  <h2 id="modal-title">Confirmación de Eliminación</h2>
  <p id="modal-desc">Esta acción no se puede deshacer.</p>
</dialog>

<!-- Usando div con ARIA -->
<div role="dialog" 
     aria-modal="true" 
     aria-labelledby="modal-title"
     aria-describedby="modal-desc">
  <!-- Contenido del modal -->
</div>

Usa role="alertdialog" para alertas críticas que requieren respuesta inmediata del usuario, ya que activa anuncios más asertivos del lector de pantalla.

Navegación por Teclado Defectuosa

Todo modal debe ser completamente accesible por teclado. Los usuarios deben navegar a través de elementos interactivos con Tab/Shift+Tab y cerrar el modal con Escape.

Errores comunes:

• Sin soporte para la tecla Escape
• El foco puede escapar del modal (sin trampa de foco)
• El orden de Tab no coincide con el diseño visual

Solución: Implementa una trampa de foco completa:

function trapFocus(modalElement) {
  const focusableElements = modalElement.querySelectorAll(
    'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])'
  );
  
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];
  
  modalElement.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeModal();
      return;
    }
    
    if (e.key === 'Tab') {
      if (e.shiftKey && document.activeElement === firstElement) {
        e.preventDefault();
        lastElement.focus();
      } else if (!e.shiftKey && document.activeElement === lastElement) {
        e.preventDefault();
        firstElement.focus();
      }
    }
  });
  
  firstElement.focus();
}

El Contenido de Fondo Permanece Interactivo

Cuando un modal está abierto, el contenido de fondo debe ser completamente inerte. Los usuarios no deberían poder interactuar con nada detrás del modal.

Error común: El fondo permanece desplazable o interactivo a través de la navegación por teclado.

Solución: Haz que el contenido de fondo sea inerte:

// Al abrir el modal
document.body.style.overflow = 'hidden';
document.querySelector('main').setAttribute('aria-hidden', 'true');
document.querySelector('main').setAttribute('inert', ''); // Enfoque moderno

// Al cerrar el modal
document.body.style.overflow = '';
document.querySelector('main').removeAttribute('aria-hidden');
document.querySelector('main').removeAttribute('inert');

Probando la Accesibilidad de tu Modal

Las herramientas automatizadas detectan algunos problemas, pero las pruebas manuales siguen siendo esenciales:

1. Pruebas de Teclado:

   • Abre el modal y verifica que el foco se mueva hacia él
   • Navega con Tab a través de todos los elementos interactivos
   • Asegúrate de que Tab cicle dentro del modal
   • Presiona Escape para cerrar
   • Verifica que el foco regrese al elemento desencadenante

2. Pruebas de Lector de Pantalla:

   • Prueba con NVDA (Windows) o VoiceOver (macOS)
   • Verifica que el rol del modal sea anunciado
   • Comprueba que el título y descripción sean leídos
   • Asegúrate de que el contenido de fondo no sea alcanzable

3. Pruebas Visuales:

   • Verifica que los indicadores de foco sean visibles
   • Comprueba el contraste de color (WCAG AA requiere 4.5:1 para texto normal, 3:1 para texto grande y componentes de UI)
   • Asegúrate de que los botones de cerrar estén claramente etiquetados

Mejores Prácticas para la Implementación

Usa el elemento nativo <dialog> cuando sea posible. Proporciona gestión de foco incorporada y semántica ARIA:

const dialog = document.querySelector('dialog');
dialog.showModal(); // Abre con trampa de foco apropiada
dialog.close();     // Cierra y devuelve el foco

Para implementaciones personalizadas, sigue esta lista de verificación:

• Establece role="dialog" y aria-modal="true"
• Proporciona un nombre accesible vía aria-labelledby o aria-label
• Implementa soporte completo de teclado (Tab, Shift+Tab, Escape)
• Crea una trampa de foco robusta
• Deshabilita el desplazamiento e interacción de fondo
• Devuelve el foco al elemento desencadenante al cerrar
• Incluye indicadores de foco visibles
• Prueba con tecnologías de asistencia reales

Conclusión

Los modales accesibles no se tratan solo de cumplimiento—crean mejores experiencias para todos los usuarios. Al abordar estos problemas comunes, aseguras que tus modales funcionen sin problemas para usuarios de teclado, usuarios de lectores de pantalla y todos los demás. Comienza con HTML semántico, agrega atributos ARIA apropiados, implementa gestión completa del foco y siempre prueba con tecnologías de asistencia reales.

Recuerda: si tu modal no funciona sin un ratón, no funciona. Soluciona estos problemas, y tus modales serán verdaderamente accesibles para todos.

Preguntas Frecuentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..