Usando el rol alertdialog

Descripción

Esta técnica demuestra como usar el rol alertdialog.

El rol alertdialog es utilizado para notificar al usuario informaci√≥n urgenete que demanden la atenci√≥n inmediata del usuario. Como el nombre implica, alertdialog es un tipo de d√≠alogo. Esto significa que la mayor√≠a de las instrucciones proveidas en la t√©cnica de ''usando el rol dialog' son aplicables al rol alertdialog tambi√©n: 

  • El d√≠alogo de alerta debe siempre recibir un nombre accesible (a trav√©s de aria-labelledby o aria-label), y en la mayor√≠a de los casos el texto de alerta debe ser marcado como la descripci√≥n accesible del d√≠alogo de alerta (utilizando aria-describedby).
  • A diferencia de alertas regulares, un d√≠alogo de alerta debe tener al menos un control enfocable y el foco debe moverse a ese control cuando el d√≠alogo de alerta aparece. Generalmente los d√≠alogos de alerta tienen al menos un bot√≥n de Confirmaci√≥n, Cerrar o Cancelar que pueder ser usado para moverl el foco. Adicionalmente, d√≠alogos de alerta pueder tener otros controles interactivos tales como campos de texto, pesta√Īas o checkboxes. El enfoque de control al que se debe desplazar depende del prop√≥sito del di√°logo.
  • El orden de la pesta√Īa dentro del d√≠alogo de alerta debe ajustarse.

La diferencia con d√≠alogos normales es que el rol de alertdialog debe ser utilizado √ļnicamente cuando una alerta, error, o advertencia ocurre. En otras palabras, cuando la informaci√≥n o controles de un d√≠alogo requieren la inmediata atenci√≥n del usuario debe usarse alertdialog en lugar de dialog. Sin embargo, depende del desarrollador hacer esta distinci√≥n.

Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.

Nota: Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, alertdialog es probablemente el rol incorrecto para ser utilizado.. El rol alert debe ser usado en su lugar en éste caso (como se describe en la técnica de Utilizando el rol alert).

Posibles efectos de agentes de usuario y tecnología de asistencia

Cuando un rol alertdialog es utilizado, el agente de usuario debería hacer lo siguiente:

  • Exponer el elemento como un d√≠alogo a la API de accesibilidad del sistema operativo.
  • Disparar un evento de alerta accesible usando la API de accesibilidad del sistema operativo si lo soporta.

Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar la alerta.

Cuando el d√≠alogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del d√≠alogo, los lectores de pantalla deber√≠an anunciar el rol accesible del d√≠alogo as√≠ como su nombre y su descriipci√≥n antes de anunciar el elemento enfocado. 

Nota: Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.

Ejemplos

Ejemplos 1: Un díalogo de alerta básico

El fragmento de código siguiente muestra como marcar un díalogo de alerta que solo provee un mensaje y un botón de OK.

<div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1">
  <div role="document" tabindex="0">
    <h2 id="tituloDialogo1">Tu sesión esta apunto de expirar</h2>
    <p id="descrDialogo1">Para extender tu sesión de clic en el botón OK</p>
    <button>OK</button>
  </div>
</div>

Ejemplos en funcionamiento:

Pendiente

Notas 

Atributos ARIA utilizados

Técnicas ARIA relacionadas

Compatibilidad

Pendiente: Add support information for common UA and AT product combinations

Recursos adicionales