role="dialog"

¿Qué es role="dialog"?

role="dialog" es un rol ARIA que identifica un diálogo o ventana modal que requiere interacción del usuario. Los diálogos deben gestionar el foco, tener un nombre accesible y permitir cerrarse.

Relación con WCAG 2.1

El Criterio 2.1.2 (Sin Trampa de Teclado) requiere que el foco pueda salir del diálogo. El Criterio 4.1.2 (Nombre, Rol, Valor) requiere que el diálogo tenga un nombre accesible.

Ejemplos prácticos

✅ Correcto: Modal accesible

<div 
  role="dialog" 
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-description">
  <h2 id="modal-title">Confirmar acción</h2>
  <p id="modal-description">¿Estás seguro de que quieres continuar?</p>
  <button onclick="confirmar()">Confirmar</button>
  <button onclick="cerrar()">Cancelar</button>
</div>

<script>
  function abrirModal() {
    const modal = document.querySelector('[role="dialog"]');
    modal.style.display = 'block';
    // Mover foco al primer elemento interactivo
    modal.querySelector('button').focus();
    // Atrapar foco dentro del modal
    // ... (ver gestión de foco)
  }
  
  function cerrar() {
    const modal = document.querySelector('[role="dialog"]');
    modal.style.display = 'none';
    // Restaurar foco al elemento que abrió el modal
  }
  
  // Cerrar con Escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      cerrar();
    }
  });
</script>

❌ Incorrecto: Sin nombre accesible

<!-- Falta aria-labelledby o aria-label -->
<div role="dialog" aria-modal="true">
  <p>Contenido del modal</p>
</div>

❌ Incorrecto: Sin gestión de foco

<!-- El foco puede salir del modal -->
<div role="dialog">
  <button>Acción</button>
</div>

Requisitos de accesibilidad

1. Nombre accesible: aria-labelledby o aria-label
2. Gestión de foco: Atrapar foco dentro, restaurar al cerrar
3. Cerrar con Escape: Permitir cerrar con tecla Escape
4. aria-modal: Indicar que bloquea interacción con contenido de fondo
5. Indicador visual: Claramente distinguible como modal

Errores comunes

1. Sin nombre accesible: No proporcionar aria-labelledby o aria-label
2. Trampa de foco: No permitir salir del modal
3. No restaurar foco: No devolver foco al elemento que abrió el modal
4. Sin Escape: No permitir cerrar con tecla Escape
5. No usar aria-modal: No indicar que bloquea interacción

Buenas prácticas

• Nombre descriptivo: Usar aria-labelledby con el título
• Gestión completa de foco: Atrapar dentro, restaurar al cerrar
• Cerrar con Escape: Siempre permitir cerrar
• Probar con teclado: Navegar completamente con teclado
• Probar con lectores de pantalla: Verificar anuncios correctos

Términos relacionados

• [[Modal]]
• [[Gestión de foco]]
• [[Trampa de foco]]
• [[aria-modal]]
• [[WCAG 2.1]]
• [[Criterio 2.1.2]]