Comment implémenter une modale accessible ?

Ce que j’ai fait :

• lire le motif de conception Dialog (Modal)(lien externe) des WAI-ARIA Authoring Practices 1.1
• étudier le code des exemples de modales proposés sur Modal Dialog Example(lien externe) des WAI-ARIA Authoring Practices 1.1

Ce que j’ai appris

Définition

Une modale est une fenêtre de dialogue superposée à la fenêtre principale.

Les utilisateurs et utilisatrices ne peuvent interagir avec du contenu en dehors de la fenêtre de dialogue active. Le contenu en dehors de la modale est généralement obscurci visuellement, il est donc difficile de le discerner et, dans certaines implémentations, les tentatives d’interaction avec le contenu inerte provoquent la fermeture de la modale.

Comportement attendu et interactions clavier

• la modale doit s’ouvrir et se fermer

• à l’ouverture de la modale, le focus doit être placé sur le premier élément interactif capable de le recevoir dans la modale. Si le premier élément focusable se trouve hors de vue et que sa mise au point provoque le défilement du contenu, il est conseillé d’ajouter tabindex = “- 1” à un élément statique en haut de la modale (par exemple sur le titre ou le premier paragraphe). La mise au point du focus sur le premier élément interactif n’est pas systématique, dans certains situations il est plus logique de le mettre sur d’autres éléments (voir l’exemple 3 de Modal Dialog Example(lien externe))

• le focus ne doit pas se déplacer en dehors de la modale tant qu’elle est ouverte

• pour fermer la modale, il faut prévoir un élément avec un role="button" (par exemple un icône de fermeture de fenêtre) et la possibilité d’utiliser la touche “escape”

• à la fermeture de la modale, il faut redonner le focus à l’élément qui a permis d’ouvrir la fenêtre.

Structure (rôles, propriétés, états)

• l’élément qui sert de conteneur à la modale doit avoir un role="dialog"

• l’élément qui sert de conteneur à la modale doit avoir un attribut aria-modal="true"

• la modale doit être dotée d’un nom, soit via aria-label, soit via aria-labelledby (en fonction de si un titre est présent ou non dans la modale)

Note : il existe aussi un role="alertdialog" qui est un rôle de dialogue conçu spécifiquement pour les dialogues qui détournent l’attention des utilisateurs vers un message bref et important.