alertdialog

Cuándo utilizarlo

Solo para interrupciones: un error que impide al usuario continuar, una confirmación de tipo «¿Está seguro de que desea eliminar esto?», una advertencia de cambios sin guardar al navegar fuera de la página. Recurrir a alertdialog para modales rutinarios es excesivo — para esos casos se debe usar el simple role="dialog".

La diferencia con role="dialog" es que un alertdialog se anuncia como un role="alert" — de forma asertiva e inmediata — en el momento en que aparece. Esto es apropiado para interrupciones genuinas; el uso indebido provoca fatiga en los lectores de pantalla.

Tanto aria-labelledby (apuntando al título) como aria-describedby (apuntando al texto del cuerpo) son obligatorios. El alertdialog debe contener al menos un botón con foco para que el usuario pueda cerrarlo.

Contrato de teclado y foco

Según el patrón de alertdialog de APG:

• El foco se mueve al alertdialog al abrirse — normalmente al botón más seguro (Cancelar) para que una pulsación accidental de Enter no confirme una acción destructiva.
• Tab / Shift+Tab ciclan el foco dentro del diálogo.
• Escape cierra el alertdialog y devuelve el foco al elemento que lo desencadenó.
• El resto de la página permanece inerte mientras el alertdialog está abierto.

El foco inicial debe elegirse con cuidado: en los diálogos de confirmación de eliminación, se debe poner el foco en Cancelar por defecto — nunca en el botón destructivo.

Errores frecuentes

• Usar role="alertdialog" para todos los modales. Los lectores de pantalla impactan al usuario con el anuncio asertivo en cada apertura de modal.
• Foco inicial en el botón destructivo (Eliminar, Descartar) — una pulsación de Enter accidental destruye el trabajo del usuario.
• aria-describedby ausente en el texto del cuerpo. El usuario escucha el título y los botones, pero no la advertencia.
• Un alertdialog sin botones — no hay forma de cerrarlo, y el rol exige una respuesta accionable.
• Alertdialogs que se cierran automáticamente después de un tiempo de espera. Contradice la semántica de «requiere respuesta».

Ejemplo

<div
  role="alertdialog"
  aria-modal="true"
  aria-labelledby="confTitle"
  aria-describedby="confDesc"
>
  <h2 id="confTitle">¿Eliminar borrador?</h2>
  <p id="confDesc">«Borrador sin título (12 de marzo)» se eliminará de forma permanente. Esta acción no puede deshacerse.</p>
  <button type="button" autofocus>Cancelar</button>
  <button type="button">Eliminar borrador</button>
</div>