Auditer et corriger une modale (RGAA, WCAG)

Modale - Élément déclencheur

Les éléments déclencheurs des modales, sont des points de contact importants sur un site. La facilité d'accès à ces éléments est primordiale pour garantir que tous les utilisateurs, qu'ils naviguent par souris, clavier, commande vocale ou autres technologies d'assistance, puissent les utiliser sans obstacle. Une mauvaise accessibilité ici peut non seulement fruster les utilisateurs mais aussi les empêcher d'accéder à des informations ou des services importants.

Problèmes

• RGAA 7.1 - Majeur : présence d’un rôle inapproprié sur l’élément déclencheur de la modale

  Exemples non conformes :

  <a href="#" onclick="openModal()">Ouvrir</a>
  <div onclick="openModal()">Ouvrir</div>

  Il est important pour un utilisateur de technologies d’assistance, par exemple une synthèse vocale, de connaître le rôle des éléments afin de pouvoir prévoir leur comportement. Dans le cas de l’élément déclencheur d’une modale, c’est un rôle de bouton qui est attendu. Un lien rechargera la page par exemple.

• RGAA 7.3 - Bloquant : l’élément déclencheur de la modale ne fonctionne pas au clavier

  Exemples non conformes :

  <span onclick="openModal()">Ouvrir</span>
  <a onclick="openModal()">Ouvrir</a>

  Un élément qui ne fonctionne pas au clavier est l’un des problèmes les plus critiques qu’on peut rencontrer sur un site. En effet, de nombreux utilisateurs sont dans l'impossibilité d’utiliser la fonctionnalité sans clavier.

• Concernant l’intitulé de l’élément déclencheur de la modale :

  Soit RGAA 7.1 - Bloquant : l’élément de fermeture de la modale n’a pas d’intitulé

  Exemples non conformes :

  <div onclick="openModal()"></div>
  <div onclick="openModal()"><img src=”img/picto.png” alt=””></div>

  Soit RGAA 7.1 - Majeur : l'élément déclencheur de la modale n’est pas explicite

  Exemples non conformes :

  <span onclick="openModal()">+</span>
  <span onclick="openModal()">Ouvrir</span>

  Une absence d’intitulé, ou même un intitulé peu explicite ou peu pertinent, gênent la compréhension de l’interface et de son fonctionnement. La navigation peut devenir difficile.

Solutions

• Pour régler le problème du rôle inapproprié sur l’élément déclencheur de la modale et permettre son utilisation au clavier :

  Soit remplacer le lien par un <button type=”button”>

  Soit attribuer au lien un role=”button” et le rendre activable avec les touches Entrée et Espace

  Soit ajouter sur l’élément non focusable un tabindex=”0”, lui attribuer un role=”button”, le rendre activable avec les touches Entrée et Espace et s’assurer de la bonne visibilité du focus clavier

• Ajouter dans le bouton déclencheur de la modale un intitulé pertinent

  Exemples conformes :

  <button type="button" onclick="openModal()">Paramètres</button>
  <a href="#" role="button" onclick="openModal()">Paramètres</a>
  <span role="button" tabindex="0" onclick="openModal()">Paramètres</span>

Modale - Élément de fermeture

L'élément de fermeture d'une modale, souvent un bouton marqué d'une icône "x" ou du texte "fermer", joue un rôle aussi important que l'élément déclencheur. Pour garantir une expérience utilisateur fluide et accessible, cet élément doit permettre de quitter la modale facilement et sans confusion. Une gestion inadéquate de cet élément peut effectivement gêner, voire piéger, les utilisateurs, surtout ceux qui dépendent exclusivement de l'interaction au clavier ou des technologies d'assistance, créant ainsi une expérience excluante. Il est requis que les éléments de fermeture soient non seulement clairement identifiables mais aussi pleinement fonctionnels à travers tous les modes d'interaction.

Problèmes

• RGAA 7.1 - Majeur : présence d’un rôle inapproprié sur l’élément de fermeture de la modale

  Exemples non conformes :

  <a href="#" onclick="closeModal()">X</a>
  <span onclick="closeModal()">X</span>

• RGAA 7.3 - Bloquant : l’élément de fermeture de la modale ne fonctionne pas au clavier

  Exemples non conformes :

  <a onclick="closeModal()">X</a>
  <div onclick="closeModal()">X</div>

• Concernant l’intitulé de l’élément de fermeture de la modale :

  Soit RGAA 7.1 - Bloquant : l’élément de fermeture de la modale n’a pas d’intitulé

  Exemples non conformes :

  <div onclick="closeModal()"></a>
  <div onclick="closeModal()"><img src="img/picto2.png" alt=""></a>

  Soit RGAA 7.1 - Majeur : l'élément de fermeture de la modale n’est pas explicite

  Exemples non conformes :

  <div onclick="openModal()">X</div>
  <span onclick="openModal()">Fermer</span>

Solutions

• Pour régler le problème du rôle inapproprié sur l’élément de fermeture de la modale et permettre son utilisation au clavier :

  Soit remplacer le lien par un <button type="button">

  Soit attribuer au lien un role="button" et le rendre activable avec les touches Entrée et Espace

  Soit ajouter sur l’élément non focusable un tabindex="0", lui attribuer un role="button", le rendre activable avec les touches Entrée et Espace et s’assurer de la bonne visibilité du focus clavier

• Ajouter dans le bouton déclencheur de la modale un intitulé pertinent

  Exemples conformes :

  <button type="button" title="Fermer paramètres" onclick="closeModal()">Fermer</button>
  <button type="button" aria-label="Fermer paramètres" onclick="closeModal()">Fermer</button>
  <h1 id="xxx">Paramètres</h1> <button type="button" aria-describedby="xxx" onclick="openModal()">Fermer</button>
  <a href="#" role="button" onclick="closeModal()">Fermer <span class="sr-only">Paramètres</span></a>
  <span role="button" tabindex="0" title="Fermer paramètres" onclick="closeModal()">Fermer</span>

Modale - Comportement

La gestion adéquate du focus à l'intérieur des modales garantit l'orientation de l'utilisateur et des interactions prévisibles et accessibles. Lorsqu'une modale s'ouvre, le focus doit immédiatement être transféré à l'intérieur de celle-ci, typiquement au premier élément interactif, pour éviter toute confusion et faciliter la navigation, en particulier pour les personnes utilisant des technologies d'assistance. Cet aspect du comportement des modales est essentiel pour prévenir la perte d'orientation et maintenir l'efficacité de l'interaction. Des erreurs courantes, telles que laisser le focus derrière la modale, sur l’arrière-plan, doivent être scrupuleusement évitées pour améliorer l'expérience utilisateur et assurer la conformité aux standards d'accessibilité.

Problèmes

• RGAA 12.8 - Majeur : après l’activation de l’élément déclencheur de la modale, le focus clavier n’est pas déplacé dans la modale

  Si le focus ne se déplace pas dans la modale après son ouverture, l’utilisateur de clavier, donc les utilisateurs de technologies d’assistance risque de ne pas la trouver, ou de devoir tabuler plusieurs fois sur son arrière plan pour espérer tomber dessus dans la suite du code. Déplacer le focus sur la modale dès son ouverture est donc requis.

• RGAA 12.8 - Majeur : le focus clavier n’est pas capturé dans la modale

  Quand le focus sort de la modale sans que celle-ci soit fermée, l’utilisateur du clavier se retrouve sur son arrière plan, sans visibilité du focus. Et si la touche Echap n’est pas prévue pour fermer la modale, il va être compliqué pour lui d’y retourner pour la fermer avec le bouton de fermeture. Il est donc indispensable de capturer le focus clavier dans la modale. On ne peut en sortir que par un bouton de fermeture, ou par exemple par un lien qui chargerait une nouvelle page. L’auditeur doit vérifier que le focus clavier est bien capturé dans la modale en tabulant dans les deux sens.

• RGAA 12.8 - Majeur : à la fermeture de la modale, le focus clavier n’est pas déplacé sur le bouton qui a permis son ouverture

  Si le focus clavier se retrouve par exemple sur la balise <body> après la fermeture de la modale, l’utilisateur devra tabuler jusqu’à retrouver la section du site dans laquelle il se trouvait avant l’ouverture de la modale. Pour garantir sa bonne orientation sur le site et une navigation non fastidieuse, il est donc requis, après la fermeture de a modale, de déplacer le focus sur le bouton déclencheur de la modale

Solutions

• Après l’ouverture de la modale, déplacer le focus dans la modale, par exemple sur le bouton de fermeture de la modale
• Capturer le focus clavier dans la modale
• À la fermeture de la modale, déplacer le focus sur le bouton qui a permis son ouverture

Modale - Structure

La structure adéquate d'une modale facilite la communication de son état et de son objectif aux utilisateurs à travers les technologies d'assistance. L'utilisation judicieuse des rôles et attributs ARIA, tels que role="dialog" ou aria-labelledby pour associer un titre clair à la modale, aide à organiser l'information de manière logique. Ces éléments améliorent la navigation et l'interaction en fournissant une information bien définie sur le composant. C’est essentiel pour que tous les utilisateurs, quel que soit leur moyen d'accès, puissent recevoir et comprendre les informations nécessaires pour interagir avec le contenu.

Problèmes

• RGAA 7.1 - Majeur : absence de rôle sur la modale
• RGAA 7.1 - Majeur : absence de nom sur la modale
• RGAA 7.1 - Majeur : absence d'information transmise aux technologies d'assistance concernant la désactivation fonctionnelle de l'arrière plan

  Exemples non conformes :

  <div>
    <button type="button" aria-label="Fermer paramètres">
      Fermer
    </button>
    <h1 id="modalTitle">Titre de la Modale</h1>
    
  </div>
  

Solutions

• Ajouter un attribut role=”dialog” sur le conteneur principal de la modale
• Pour nommer la modale :

  Soit ajouter sur le conteneur principal de la modale un attribut aria-labelledby=”xxx” où xxx est la valeur d’id unique sur la page du titre de niveau <h1> de la modale

  Soit ajouter sur le conteneur principal de la modale un attribut aria-label explicite afin de nommer la modale

• Ajouter un attribut aria-modal=”true” sur le conteneur principal de la modale

Note : optionnellement, ajouter un role=”document” sur le premier enfant de la modale afin de ne pas basculer en mode application

Exemples de code conforme attendu :

<div role="dialog" aria-modal="true" aria-labelledby="xxx">
  <div role="document">
    <button type="button" aria-describedby="xxx">
     <span class="sr-only">Fermer</span>
    </button>
    <h1 id="xxx">Titre de la modale</h1>

  </div>
</div>

Note pour l’auditeur : il est aussi possible de renvoyer vers le design pattern (motif de conception) ARIA du W3C. L’utilisation d’un design pattern ARIA n’est pas obligatoire.

Conclusion

Cet article, destiné principalement aux auditeurs en accessibilité, sert également de ressource pour les développeurs désireux de comprendre comment leurs modales sont évaluées du point de vue de l'accessibilité. En détaillant les erreurs courantes et les solutions recommandées, nous espérons non seulement faciliter le travail d'audit mais aussi encourager les bonnes pratiques de développement dès la conception.

Pour les auditeurs professionnels cherchant à approfondir leurs compétences ou à améliorer la qualité de leurs audits, nous proposons un service spécifique de relecture d'audits accessibilité. Ce service vise à renforcer la rigueur et la précision des évaluations accessibilité. Pour plus d'informations sur ce service, veuillez visiter notre page de relecture d'audits accessibilité.