ARIA : rôle dialog

Description

Un dialog est une fenêtre descendante de la fenêtre principale d'une application web. Pour les pages HTML, la fenêtre principale de l'application est l'ensemble du document web, c'est-à-dire l'élément body.

Baliser un élément de dialogue avec le rôle dialog aide la technologie d'assistance à identifier le contenu du dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, ajouter role="dialog" seul n'est pas suffisant pour rendre un dialogue accessible. De plus, les éléments suivants doivent être pris en compte :

• Le dialogue doit être correctement étiqueté
• La gestion de la sélection du clavier doit être effectuée correctement

Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.

Étiquetage

Bien qu'il ne soit pas nécessaire que le dialogue lui-même puisse recevoir la sélection, il doit tout de même être étiqueté. L'étiquette donnée au dialogue fournira des informations contextuelles pour les contrôles interactifs à l'intérieur du dialogue. En d'autres termes, l'étiquette du dialogue agit comme une étiquette de regroupement pour les contrôles à l'intérieur (similaire à la façon dont un élément <legend> fournit une étiquette de regroupement pour les contrôles à l'intérieur d'un élément <fieldset>).

Si un dialogue a déjà une barre de titre visible, le texte à l'intérieur de cette barre peut être utilisé pour étiqueter le dialogue lui-même. La meilleure façon d'y parvenir est d'utiliser l'attribut aria-labelledby sur l'élément role="dialog". De plus, si le dialogue contient un texte descriptif supplémentaire en plus du titre du dialogue, ce texte peut être associé au dialogue à l'aide de l'attribut aria-describedby. Cette approche est illustrée dans l'extrait de code ci-dessous :

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">
    Vos informations personnelles ont été mises à jour avec succès
  </h2>
  <p id="dialog1Desc">
    Vous pouvez modifier vos informations à tout moment dans la section de votre
    compte utilisateur·ice.
  </p>
  <button>Fermer</button>
</div>

Fonctionnalités JavaScript requises

Gestion de la sélection

Un dialogue a des exigences particulières concernant la gestion de la sélection du clavier :

• Les dialogues doivent toujours avoir au moins un contrôle focalisable. Pour de nombreux dialogues, il y aura un bouton comme « Fermer », « OK » ou « Annuler ». En plus du contrôle nécessaire, les dialogues peuvent contenir un nombre quelconque d'éléments focalisables, même des formulaires entiers ou d'autres widgets conteneurs comme des onglets.
• Lorsque le dialogue apparaît à l'écran, la sélection au clavier (dont le contrôle dépend de l'objectif du dialogue) doit être déplacé vers le contrôle focalisable par défaut à l'intérieur du dialogue. Pour les dialogues qui ne fournissent qu'un message de base, cela pourrait être un bouton « OK ». Pour les dialogues contenant un formulaire, cela pourrait être le premier champ du formulaire.
• Après la fermeture du dialogue, la sélection clavier doit être déplacée vers l'endroit où il se trouvait avant d'entrer dans le dialogue. Sinon, la sélection peut être perdue au début de la page.
• Pour la plupart des dialogues, le comportement attendu est que l'ordre de tabulation du dialogue s'enroule, ce qui signifie que lorsque l'utilisateur·ice passe d'un élément focalisable à l'autre dans le dialogue, le premier élément focalisable sera mis au point après que le dernier ait été atteint. En d'autres termes, l'ordre de tabulation doit être contenu dans le dialogue et par celui-ci.
• Si le dialogue peut être déplacé ou redimensionné, assurez-vous que ces actions doivent être réalisables par les utilisateur·ice·s de clavier ainsi que par les utilisateur·ice·s de souris. De même, si un dialogue fournit des fonctionnalités spéciales comme des barres d'outils ou des menus contextuels, ceux-ci doivent être accessibles et utilisables par les utilisateur·ice·s de clavier.
• Les dialogues peuvent être modaux ou non modaux. Lorsqu'un dialogue modal apparaît à l'écran, il n'est pas possible d'interagir avec le contenu de la page en dehors du dialogue. En d'autres termes, l'interface utilisateur principale de l'application ou le contenu de la page est considéré comme temporairement désactivé tant que le dialogue modal est affiché. Pour les dialogues non modaux, il est toujours possible d'interagir avec le contenu en dehors du dialogue pendant que celui-ci est affiché. Notez que pour les dialogues non modaux, il devra y avoir un raccourci clavier global qui permet de déplacer la sélection entre les dialogues ouverts et la page principale.

Propriétés, états et rôles ARIA associés

aria-labelledby

Utilisez cet attribut pour étiqueter le dialogue. Souvent, la valeur de l'attribut aria-labelledby sera l'identifiant de l'élément utilisé pour titrer le dialogue.

aria-describedby

Utilisez cet attribut pour décrire le contenu du dialogue.

Possible effets sur les agents utilisateurs et la technologie d'assistance

Lorsque le rôle dialog est utilisé, l'agent utilisateur doit faire ce qui suit :

• Exposer l'élément en tant que dialogue dans l'API d'accessibilité du système d'exploitation.

Lorsque le dialogue est correctement étiqueté et que la sélection est déplacée vers un élément (souvent un élément interactif, tel qu'un bouton) à l'intérieur du dialogue, les lecteurs d'écran doivent annoncer le rôle accessible du dialogue, son nom et éventuellement sa description, tout en annonçant l'élément focalisé.

Exemples

Un dialogue contenant un formulaire

<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Formulaire d'inscription</h2>
  <p id="dialog1Desc">
    Nous ne partagerons pas ces informations avec des tiers.
  </p>
  <form>
    <p>
      <label for="firstName">Prénom</label>
      <input id="firstName" type="text" />
    </p>
    <p>
      <label for="lastName">Nom</label>
      <input id="lastName" type="text" />
    </p>
    <p>
      <label for="interests">Centres d'intérêt</label>
      <textarea id="interests"></textarea>
    </p>
    <p>
      <input type="checkbox" id="autoLogin" name="autoLogin" />
      <label for="autoLogin">Connexion automatique&nbsp;?</label>
    </p>
    <p>
      <input type="submit" value="Enregistrer les informations" />
    </p>
  </form>
</div>

Exemples fonctionnels

• jQuery-UI Dialog ^(angl.)

Notes

Spécifications

Voir aussi

• ARIA : rôle alertdialog
• L'élément HTML <dialog>