2. CAS D'USAGE

Table des matières

2.1 Personnalisation des balises d'actions

Définition

Les balises d’actions sont des éléments de formulaires qui permettent à l’utilisateur de sélectionner une ou plusieurs options parmi un groupe d’options proposées.

Toujours utiliser la balise native pour s’assurer que le comportement attendu, qu’importe le navigateur, soit respecté.
S’il y a des demande de personnalisation, celle-ci doivent-être faites au niveau des styles (CSS).

Comportements attendus

Case à cocher

Chaque conteneur de case à cocher peut recevoir le focus clavier.
Lorsque le focus du clavier est positionné sur le conteneur d’une case à cocher, il est possible de cocher et de décocher cette case, en boucle, en appuyant sur la touche Espace.
Plusieurs cases à cocher d’un même groupe peuvent être cochées simultanément.

Bouton radio

Si aucun bouton radio n’est sélectionné au moment où le focus clavier arrive dans le module, le focus est positionné au niveau du premier conteneur de bouton radio. Si la navigation se fait dans l’ordre de lecture de la page, ou au niveau du dernier si la navigation se fait dans l’ordre inverse.
Lorsque le focus clavier est positionné sur un bouton radio, il est possible de sélectionner le bouton radio avec la touche Espace.
Par défaut, les flèches de navigation sont utilisées pour naviguer dans la liste des boutons radio et pour sélectionner le bouton radio courant. Lorsque la touche Ctrl est pressée en parallèle, seul le focus clavier est déplacé, le bouton radio courant n’est pas sélectionné.
Parmi tous les boutons radio d’un même groupe, seul l’un d’entre eux peut être sélectionné à un instant donné. Lorsqu’un bouton radio est sélectionné, l’éventuel bouton radio précédemment sélectionné est alors désélectionné.

Input range

Le focus clavier est positionné sur le curseur lors de l’utilisation du slider et y reste jusqu’à l’utilisation de la touche Tab.
Lorsque le focus clavier est positionné sur le curseur, il est possible de modifier la valeur du slider en utilisant les touches
La valeur de l’attribut value doit être modifié dynamiquement à chaque mise à jour du slider et doit être identique à la valeur du dis slider.
La valeur du slider ne peut être supérieure à la valeur renseignée dans l’attribut max.
La valeur du slider ne peut être inférieure à la valeur renseignée dans l’attribut min.

RESSOURCES

WAI-ARIA - Authoring practices
Personnalisation en CSS de la balise input[range] : How to Style Input Type Range in Chrome, Firefox, and IE | Brenna O'Brien (en anglais)

2.2 Menus déroulants

Définition

Les menus déroulants sont des menus dynamiques dans lesquels seuls les éléments de premier niveau sont affichés par défaut, mais où des panneaux déroulants associés aux éléments de premier niveau peuvent être affichés en cliquant sur ceux du premier niveau.

Comment ça marche?

Pour des fins de compréhension, voici comment le composant est bâti. Le code HTML de base pour un menu déroulant peut, par exemple, être le suivant. Ce code est à adapter au contexte, notamment pour ce qui concerne le contenu des panneaux déroulants.

<h2>Titre du menu</h2>
<ul id="menu" role="menubar">
   <li role="menuitem">
      <button aria-haspopup="true" aria-expanded="true">Fermer le menu de premier niveau 1</button>
      <ul role="menu" class="is-expanded">
         <li role="menuitem"><a href="#">Lien de second niveau 1.1</a></li>
         <li role="menuitem"><a href="#">Lien de second niveau 1.2</a></li>
         <li role="menuitem"><a href="#">Lien de second niveau 1.3</a></li>
      </ul>
   </li>
   <li role="menuitem">
      <button aria-haspopup="true" aria-expanded="false">Ouvrir le menu de premier niveau 2</button>
      <ul role="menu">
         <li role="menuitem"><a href="#">Lien de second niveau 2.1</a></li>
         <li role="menuitem"><a href="#">Lien de second niveau 2.2</a></li>
         <li role="menuitem"><a href="#">Lien de second niveau 2.3</a></li>
      </ul>
   </li>
   <li role="menuitem"><a href="#">Lien</a></li>
</ul>

Sans CSS ni JavaScript, la totalité des éléments du menu (éléments de premier niveau et second niveau) sont affichés.

Les attributs ARIA utilisés ici sur le bouton permettant d’ouvrir le menu afin que celui-ci soit correctement vocalisé au lecteur d’écran sont :

L’attribut aria-haspopup="true" permet de faire vocaliser par le lecteur d’écran qu’il s’agit d’un menu.
L’attribut aria-expanded avec comme valeur true/false, permet de faire vocaliser l’état du menu (ouvert ou fermé).

Le script JavaScript doit gérer les points suivants :

La gestion de la classe is-expanded sur les éléments de deuxième niveau pour permettre au CSS d’afficher le block.
La gestion du aria-expanded sur les éléments de premier niveau :
- Lorsqu’un élément de premier niveau est cliqué ou activé par Enter, le panneau associé à l’élément concerné est affiché à l’écran, l’attribut aria-expanded est alors à true. Le focus doit se mettre sur le premier élément du panneau associé.
- Lorsqu’un élément de premier niveau est cliqué à nouveau ou réactivé par Enter , le panneau associé à l’élément concerné est à nouveau masqué, l’attribut aria-expanded est à false, et la classe is-expanded n’est plsu présente. Le focus revient sur l’élément de premier niveau.
La gestion du clavier :
- Le comportement des flèches haut et bas pour naviguer dans un sous-menu.
- Le comportement des flèches droite et gauche pour naviguer de sous-menu en sous-menu.
- Le comportement de la touche Enter et Escape pour ouvrir ou fermer des éléments de sous-menus.
- Le comportement de la touche Tab.

ATTENTION

Veuillez utiliser ce composant-ci : Menu - Exemples pratiques - Boîte à outils de l'expérience Web Si beaucoup d’éléments interactifs sont présents dans les panneaux déroulants (liens, éléments de formulaire, etc.), une bonne pratique d’accessibilité consiste à privilégier l’accordéon.

RESSOURCES

Voir aussi :

2.3 Accordéons (plier/déplier)

Définition

Les accordéons sont des composants dynamiques qui permettent d’optimiser l’affichage d’un contenu dans un espace réduit grâce à un système de « plier/déplier » appliqué sur un groupe de panneaux.

Ils sont contrôlables par l’utilisateur, le plus souvent à partir d’une action sur un bouton qui se trouve au dessus du contenu de chaque panneau.

<div role="tablist" aria-multiselectable="true">
  <h2 role="tab" id="entete-1" aria-selected="false" aria-expanded="false" tabindex="-1">Entete 1 (non selectionnee)</h2>
  <div role="tabpanel" aria-labelledby="entete-1" aria-hidden="true">
    [Contenu du panneau 1 (masque)]
  </div>
  <h2 role="tab" id="entete-2" aria-selected="false" aria-expanded="true" tabindex="-1">Entete 2 (non selectionnee)</h2>
  <div role="tabpanel" aria-labelledby="entete-2" aria-hidden="false">
    [Contenu du panneau 2 (affiche)]
  </div>
  <h2 role="tab" id="entete-3" aria-selected="true" aria-expanded="false" tabindex="0">Entete 3 (selectionnee)</h2>
  <div role="tabpanel" aria-labelledby="entete-3" aria-hidden="true">
    [Contenu du panneau 3 (masque)]
  </div>
</div>

Comportements attendus

Dans cet exemple, les panneaux sont masqués par défaut à l’aide de display: none; à l’aide de JavaScript et non en CSS.
Sélectionner à la souris ou au clavier une en-tête affiche et masque alternativement le panneau associé (display: none; pour le masquage et display: block; pour l’afficher) . Lorsque l’attribut aria-multiselectable est mis à false, les autres panneaux doivent être cachés ( à l’aide de display: none;) quand une en-tête est sélectionné.

Sémantique requise

Le tableau suivant liste les rôles WAI-ARIA requis pour les différents éléments qui composent l’accordéon, ainsi que les attributes WAI-ARIA requis pour chacun d’eux en fonction de leur état ou des options du comportement désiré pour le contrôle.

WAI-ARIA	Rôle	Attribut
		Nom de l’attribut	État/option de l’élément	Valeur de l’attribut
Élément parent	tablist	aria-multiselectable	Multiple panneaux dépliables	true
			Un seul panneau dépliable	false
En-tête	tab	aria-selected	Sélectionné	true
			Déselectionné	false
		aria-expanded	Panneau associé déplié	true
			Panneau associé replié	false
anneau	tabpanel	aria-hidden	Déplié	false
			Replié	true
		aria-labelledby	L’id de l’en-tête du panneau associé

Focus sur les éléments

Fonctionnement

Il est nécessaire de changer dynamiquement la valeur des tabindex afin d’obtenir le comportement décrit dans les paragraphes suivants

Lorsqu’aucun en-tête n’a été sélectionné, tabindex="-1" doit être présent sur toutes les en-têtes, excepté pour le premier qui aura tabindex="0"
Lorsqu’un en-tête a été sélectionné, son tabindex="0" tandis que celui de tous les autres entêtes devra être tabindex="-1"

Comportement

Lorsque le focus clavier est positionné sur un entête de panneau :

Si des éléments interactifs (boutons, liens, etc.) sont présents dans l’entête de ce panneau, déplace successivement le focus clavier vers chacun de ces éléments, avant de sortir de l’entête du panneau, dans l’ordre logique de lecture.
Puis, si le panneau correspondant à l’entête est déplié, déplace le focus vers le premier élément interactif disponible dans le panneau.
Enfin, si le panneau correspondant à l’entête est replié, ou bien lorsque que le dernier élément interactif disponible dans le panneau a été atteint :
- Si un panneau déplié contenant un élément interactif est disponible à la suite de cet élément, déplace le focus vers le premier élément interactif disponible dans ce panneau.
- Sinon, déplace le focus vers le premier élément interactif disponible en dehors du système d’accordéon.

Dans le cas où aucun entête de panneau n’est sélectionné au moment où l’utilisateur accède au système d’accordéon au clavier, le focus clavier est positionné au niveau du premier entête de panneau du système d’accordéon.

Navigation à l’aide du clavier

Maj + Tab

Même comportement qu’avec la touche Tab, mais cette fois dans l’ordre inverse de lecture.

↑ et →

Lorsque le focus est positionné sur un entête de panneau, déplace le focus clavier vers le précédent entête de panneau du système d’accordéon, et sélectionne cet entête de panneau. Si le focus clavier est positionné au niveau du premier entête de panneau du système d’accordéon au moment où la touche est pressée, le focus clavier est déplacé au niveau du dernier entête de panneau du système d’accordéon, et cet entête de panneau est sélectionné.

↓ et →

Lorsque le focus est positionné sur un entête de panneau, déplace le focus clavier vers l’entête de panneau suivant dans le système d’accordéon, et sélectionne cet entête de panneau. Si le focus clavier est positionné au niveau du dernier entête de panneau du système d’accordéon au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier entête de panneau du système d’accordéon, et cet entête de panneau est sélectionné.

Ctrl + ↑

Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers l’entête associé à ce panneau.

Ctrl + ⇞

Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers le précédent entête de panneau du système d’accordéon, et sélectionne cet entête de panneau. Si le focus clavier est positionné au niveau du premier entête de panneau du système d’accordéon au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du dernier entête de panneau du système d’accordéon, et cet entête de panneau est sélectionné.

Ctrl + ⇟

Lorsque le focus est positionné dans un panneau, déplace le focus clavier vers l’entête de panneau suivant dans le système d’accordéon, et sélectionne cet entête de panneau. Si le focus clavier est positionné au niveau du dernier entête de panneau du système d’accordéon au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du premier entête de panneau du système d’accordéon, et cet entête de panneau est sélectionné.

↖

Lorsque le focus clavier est positionné sur un entête de panneau, déplace le focus clavier vers le premier entête de panneau du système d’accordéon.

Fin

Lorsque le focus clavier est positionné sur un entête de panneau, déplace le focus clavier vers le dernier entête de panneau du système d’accordéon.

Entree et Espace

Lorsque le focus clavier est positionné sur un entête de panneau, déplie/replie alternativement le panneau dépliant associé.

Alt + Suppr

Quand l’utilisateur a la possibilité de supprimer un panneau, et lorsque le focus est positionné dans ce panneau ou sur l’entête de ce panneau, supprime à la fois le panneau et l’entête associé à ce panneau. Si au moins un autre panneau reste présent dans le système d’accordéon suite à la suppression, déplace le focus clavier vers le prochain entête de panneau.

Avant toute suppression, une alerte demandant la confirmation de l’action doit être renvoyée à l’utilisateur.

REMARQUES

Dans l'exemple HTML proposé ici, des titres de niveau N (exemple: h2) sont utilisés pour baliser les entêtes des différents panneaux. Le niveau de ces titres est éventuellement à adapter en fonction du contexte d’intégration de ce type de composant : il est important de veiller à maintenir une hiérarchie des titres logique dans la page. Ainsi, si un h2 ce trouve au dessus des accordéon, chaque entête de panneau devient donc un enfant de ce titre de niveau 2 et devra donc être balisé avec h3.

ATTENTION

Veuillez utiliser l'un des composants suivants :

jQuery Accessible Accordion system, using ARIA (en anglais)
Accessible jQuery-ui Components Demo : Accordion (en anglais)

RESSOURCES

Voir aussi :

Example 35 - Tab Panel: Accordian1 (en anglais)
Accessible jQuery-ui Components Demo : Accordion (en anglais)
WAI-ARIA 1.1 Authoring Practices : Accordion (en anglais)
jQuery Accessible Accordion system, using ARIA (en anglais)
Ne pas utiliser les propriétés CSS display ou visibility pour masquer un contenu qui ne peut pas être affiché par l’utilisateur (Html et CSS)
Utilisation des Wai-aria pour intégrer un accordéon

2.4 Onglets

Définition

Les onglets sont des modules dynamiques qui permettent d’optimiser l’affichage du contenu d’une page dans un espace réduit. Ils se présentent généralement sous la forme d’une liste de liens accolés, qui permettent d’afficher en cliquant du contenu relatif à l’onglet sélectionné. Un seul onglet peut être activé à la fois.

<ul role="tablist">
  <li role="tab" tabindex="-1" aria-selected="false" aria-controls="panneau-1">Onglet 1</li>
  <li role="tab" tabindex="0" aria-selected="true" aria-controls="panneau-2">Onglet 2</li>
  <li role="tab" tabindex="-1" aria-selected="false" aria-controls="panneau-3">Onglet 3</li>
  <li role="tab" tabindex="-1" aria-disabled="true" aria-selected="false" aria-controls="panneau-4">Onglet 4</li>
</ul>
 
<div role="tabpanel" id="panneau-1" aria-hidden="true" aria-labelledby="link-panneau-01">
  [Contenu du 1er panneau (masque)]
</div>
<div role="tabpanel" id="panneau-2" aria-hidden="false" aria-labelledby="link-panneau-02">
  [Contenu du 2eme panneau (affiche, car onglet associe selectionne)]
</div>
<div role="tabpanel" id="panneau-3" aria-hidden="true" aria-labelledby="link-panneau-03">
  [Contenu du 3eme panneau (masque)]
</div>
<div role="tabpanel" id="panneau-4" aria-hidden="true" aria-labelledby="link-panneau-04">
  [Contenu du 4eme panneau (masque et jamais affiche, car onglet desactive)]
</div>

Sémantique requise

Le tableau suivant liste les rôles WAI-ARIA requis pour les différents éléments qui composent le socle de l’accordéon, ainsi que les attributes WAI-ARIA requis pour chacun d’eux en fonction de leur état ou des options du comportement désiré pour le contrôle.

WAI-ARIA	role	Attribut
		Nom de l’attribut	État/option de l’élément	Valeur de l’attribut
Élément englobant les onglets	tablist	N/A	N/A	N/A
Onglet	tab	aria-selected	Sélectionné	true
			Déselectionné	false
			Déasactivé	false
		aria-disabled	Activé	false (optionnel)
			Désactivé	true
		aria-controls	N/A	Chaque onglet doit posséder un attribut aria-controls renseigné avec la valeur de l’attribut id du panneau associé.
Panneau	tabpanel	aria-hidden	Affiché	false
			Masqué	true
		aria-labelledby(optionnel)	L’id de l’en-tête de panneau associé
		id	N/A	Chaque panneau doit posséder un attribut idrenseigné avec une valeur unique.

Focus sur les éléments

Il est nécessaire de changer dynamiquement la valeur des tabindex afin d’obtenir le comportement décrit dans les paragraphes suivants

Lorsque aucune en-tête n’est sélectionnée, tous les en-têtes doivent avoir tabindex="-1", excepté pour le premier qui aura tabindex="0"
Lorsqu’une en-tête est sélectionné, son tabindex="0" tandis que celui de tous les autres devra être tabindex="-1"

Comportements attendus

Sans JavaScript, la totalité des panneaux est affiché. Les onglets servent donc de liens d’accès direct au contenu du panneau associé.

Sur cette base, les scripts doivent ensuite gérer les points suivants :

Parmi tous les onglets, un seul onglet peut être sélectionné à la fois et seul l’onglet actif peut recevoir le focus du clavier.
À l’exception du panneau actif, tous les panneaux sont masqués par défaut à l’aide de display: none; à l’aide du JavaScript et non par CSS.
Lorsqu’un onglet inactif est sélectionné, l’onglet précédemment sélectionné devient inactif et le focus du clavier est positionné au niveau de l’onglet nouvellement sélectionné.
Les onglets désactivés ne peuvent ni être activés, ni recevoir le focus du clavier. Les panneaux associés ne peuvent donc pas être affichés.
L’attribut title est appliqué sur l’ancre de l’onglet actif en rajoutant entre parenthèses la mention (onglet courant). Une fois désactivé, l’attribut title est supprimé.
Les flèches de navigation sont utilisées pour naviguer dans la liste des onglets activables et pour sélectionner l’onglet courant.

Navigation à l’aide du clavier

Tab et Maj + Tab

Lorsque l’utilisateur accède en tabulant sur le groupe d’onglets, le focus est positionné au niveau de l’onglet sélectionné dans le groupe d’onglets. Lorsque le focus est positionné sur un onglet, la tabulation suivante permet à l’utilisateur de quitter le groupe d’onglets.

↑ et ←

Lorsque le focus est positionné sur un onglet, les flèches du clavier déplace le focus vers le précédent onglet activable du groupe tout en sélectionnant cet onglet. Si le focus du clavier est positionné au niveau du premier onglet activable du groupe au moment où la touche est pressée. Alors, le focus clavier est déplacé au niveau du dernier onglet activable du groupe et cet onglet est sélectionné.

↓ et →

Lorsque le focus est positionné sur un onglet, les flèches du clavier déplacent le focus vers l’onglet activable suivant dans le groupe et sélectionne cet onglet. Si le focus est positionné au niveau du dernier onglet activable du groupe au moment où la touche est pressée, le focus du clavier est déplacé au niveau du premier onglet activable du groupe et cet onglet est sélectionné.

Ctrl + ↑

Lorsque le focus est positionné dans un panneau, cette combinaison de touches déplace le focus vers l’onglet associé à ce panneau.

Ctrl + ⇞

Lorsque le focus est positionné dans un panneau, cette combinaison de touches déplace le focus vers le précédent onglet activable du groupe et sélectionne cet onglet. Si le focus est positionné au niveau du premier panneau du groupe au moment où la combinaison de touches est pressée, le focus est alors déplacé au niveau du dernier onglet activable du groupe et cet onglet est sélectionné.

Ctrl + ⇟

Lorsque le focus est positionné dans un panneau, cette combinaison de touches déplace le focus vers l’onglet activable suivant dans le groupe et sélectionne cet onglet. Si le focus est positionné au niveau du dernier panneau du groupe au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du premier onglet activable du groupe et cet onglet est sélectionné.

Alt + Suppr

Quand l’utilisateur a la possibilité de supprimer un onglet et lorsque le focus est positionné dans un panneau, cette combinaison de touche supprime à la fois le panneau et l’onglet associé à ce panneau. Si au moins un autre onglet activable reste présent dans le module suite à la suppression, le focus ira vers le prochain onglet du groupe.

Avant toute suppression, une alerte demandant la confirmation de l’action doit être renvoyée à l’utilisateur.

ATTENTION

Veuillez utiliser l'un des composants suivant :

RESSOURCES

Voir aussi :

2.5 Carrousels (slideshows)

DÉFINITION

Les carrousels (ou slideshows) sont des modules qui permettent l’affichage de panneaux de contenus défilants dans une zone réduite.

Dans le cadre d’une mise en accessibilité, trois types de carrousels sont principalement à distinguer :

Les carrousels à défilement manuel.
Les carrousels avec ouverture de tiroir.
Les carrousels à défilement automatique.

Ils doivent être agrémentés d’un système de pagination, de flèches de navigation, et/ou encore d’un système de mise en pause et de relance du mouvement dans le cas d’un carrousel à défilement automatique.

COMPORTEMENT SOUHAITÉ:

Pour tous les types de carrousel :

Informer l’utilisateur au lecteur d’écran et à la navigation clavier du nombre d’item dans le carrousel et ajouter un lien d’évitement pour qu’il puisse le passer.
Lorsque le lien d’évitement est activé, mettre le focus sur le premier élément focusable après le carrousel.
Faire défiler le carrousel sur un nombre d’item prédéfini lors de l’activation à la souris des flèches précédent et suivant
Lorsque nous sommes au bout de ce nombre d’item : la flèche précédente est désactivé lorsqu’au début et la flèche suivante est désactivé si à la fin de la liste.
Les flèches du carrousel sont masquées pour les lecteurs d’écran et non atteignable par la tabulation.
Au lecteur d’écran, l’utilisateur passe d’item en item.
À la navigation par clavier, l’utilisateur passe d’item en item.
Lorsque l’utilisateur est focusé sur la composante de carrousel, il peut utiliser les flèches gauche et droite du clavier pour naviguer de page en page. Le focus n’est pas modifié. Si l’utilisateur est à la première page, la flèche gauche du clavier ne fait aucune action, s’il est à la dernière page, la flèche droite ne fait aucune action.
Possibilité de naviguer dans le carrousel avec des points de progression. Si le point représente la page en cours, elle doit être désactivée ou la balise d’action doit être supprimée du HTML pour être remplacée par le numéro de la page seulement.
La navigation par point de progression est masquée au lecteur d’écran et non atteignable par la tabulation.

Carrousel avec tiroir :

Lorsque l’item est activée, l’action déclenche l’ouverture du tiroir et ajoute une mention d’état actif. Le focus est déplacé sur le bouton “Fermer” du tiroir.
Un seul tiroir peut être affiché à la fois. Les autres tiroirs visuellement masqués ne peuvent pas être atteignables avec le lecteur ou avec la navigation clavier.
Le bouton “Fermer” est le premier élément du tiroir.
Prévoir un bouton “Fermer” à la toute fin du tiroir visible seulement pour les lecteurs d’écran.
Lorsque l’utilisateur navigue à l’intérieur du tiroir, il ne peut pas en sortir à moins de l’avoir fermé.
Lorsque le bouton “Fermer” est activé, la carte courante est réactivée, le focus retourne sur celle-ci et le tiroir se ferme.
Si l’utilisateur clique sur les flèches précédente et suivante ou sur les flèches gauche et droite du clavier, le carrousel change de page, le tiroir ne change pas d’état et le focus n’est pas déplacé.

Carrousel automatique :

Le carrousel défile automatiquement de page en page après au moins 5 secondes.
Prévoir un système de mise en pause et de relance du défilement (bouton Lancer/Pauser)
Dès que l’utilisateur utilise la navigation par point de progression, les flèches précédente et suivante ou lesflèches du clavier gauche et droite, le défilement automatique doit s’arrêter.

ATTENTION

Pour les carrousels automatique, le système de mise en pause (ici, le bouton « Lecture/Pause ») doit toujours être placé avant les éléments sur lesquels il agit, dans le DOM, quelle que soit sa position à l’écran.

RESSOURCES

Voir aussi :

2.6 Fenêtres modales (popins)

Définition

Les fenêtres modales (popins) sont des fenêtres qui apparaissent directement à l’intérieur de la fenêtre courante du navigateur, au-dessus de la page web qui les appelle.

Il s’agit de fenêtres modales, c’est-à-dire de fenêtres qui prennent le contrôle de la page courante tant qu’elles sont affichées à l’écran.

Elles sont à opposer aux pop-up et pop-under, qui déclenchent respectivement l’ouverture de nouvelles fenêtres externes, par-dessus et en dessous de la fenêtre courante.

Cette norme classifie les fenêtres modales en deux types

Dialogue:

Elles interrompent la navigation de l’utilisateur et apparaissent dans le but de lui demander de renseigner une information ou de soumettre une réponse.

Alerte:

Elles renvoient une alerte concise ou demandent une confirmation rapide à l’utilisateur et sont adaptées lorsque :

Le message ne dépasse pas une phrase.
La ponctuation n’est pas essentielle à la compréhension du message. Les boîtes d’alerte modales sont donc par exemple inadaptées pour annoncer qu’une syntaxe précise du type « JJ/MM/AAAA » est attendue pour un champ de date.
Le message ne contient pas d’informations que l’utilisateur pourrait avoir besoin de réutiliser, comme un numéro de téléphone.
Le message ne contient pas d’éléments interactifs, comme un lien vers une ressource.

Exemple HTML d’un dialogue

<div id="popin-01" role="dialog" tabindex="-1" aria-hidden="true" aria-labelledby="modal-title">
  <div class="modal-dialog" role="document">
   <header>
      <h2 id="modal-title">Ma fenetre</h2>
    </header>
    <section>
      <!-- Contenu de la fenetre modale -->
    </section>
  </div>
</div>

Exemple HTML d’une alerte

<div role="alertdialog" aria-labelledby="modal-title" aria-describedby="modal-message">
  <button type="button" aria-label="Fermer l'alerte">
    <span aria-hidden="true">x</span>
  </button>
  <h2 id="modal-title">Titre de la boite modale</h2>
  <p id="modal-message">Message de la boite modale.</p>
  <button>Annuler</button>
  <button>[Action par defaut]</button>
</div>

Sémantique requise

Le tableau suivant liste les rôles WAI-ARIA requis pour les différents éléments qui composent le socle de l’accordéon, ainsi que les attributes WAI-ARIA requis pour chacun d’eux en fonction de leur état ou des options du comportement désiré pour le contrôle.

WAI-ARIA	Rôle	Attribut
		Attribut
		Nom de l’attribut	État/option de l’élément	Valeur de l’attribut
Élément englobant le contenu de la fenêtre modale	dialog	aria-hidden	Ouvert	false
			Fermé	true
		aria-labelledby(optionnel)	Id de l’élément qui fait office d’entête dans la fenêtre modale. Optionnel car ne fenêtre modale pourrait ne pas avoir de titre.
		aria-describedby Id de l’élément qui fait office de description de la fenêtre modale

Comportement attendu

Le contenu des fenêtres modales peut être intégré dans la page, indifféremment et de deux façons :

Soit le contenu est présent par défaut dans le DOM, mais masqué, avant d’être affiché dans la fenêtre modale sur action de l’utilisateur. Il faut alors veiller à ce que l’ordre de lecture reste cohérent, lorsque les CSS sont désactivées (reportez-vous à « Écrire le code HTML en suivant la logique de l’ordre de lecture (HTML et CSS)»).
Soit le contenu est absent par défaut du DOM, avant d’être chargé dynamiquement dans la fenêtre modale sur action de l’utilisateur. Il faut alors veiller à ce que le contenu soit supprimé à nouveau du DOM lorsque la fenêtre modale se referme.

Lorsqu’une fenêtre modale est affichée à l’écran :

Le focus doit être placé au niveau du conteneur de la fenêtre modale. Rajouter pour cela un tabindex=”0″sur le conteneur de la fenêtre modale, et y placer dynamiquement le focus en JavaScript.
L’attribut aria-hidden du conteneur de la fenêtre modale doit être égal à false.
L’utilisateur ne doit pas pouvoir tabuler sur le reste de la page, à l’arrière de la fenêtre modale. Rajouter pour cela un tabindex="-1" sur tous les éléments tabulables du reste de la page. Il est également possible de créer une loop de focus en JavaScript qui garde le focus dans un élément sélectionné.

Lorsqu’une fenêtre modale est fermée :

Tous les tabindex="-1" rajoutés dynamiquement à l’ouverture doivent être supprimés du code source pour permettre à nouveau la navigation au clavier dans la page.
Le focus doit être replacé au niveau de l’élément qui a déclenché l’ouverture de la fenêtre modale.
L’attribut aria-hidden du conteneur de la fenêtre modale doit être égal à true.
Remettre tabindex="-1" sur le conteneur de la fenêtre modale.
Si la popin reste présente dans le code source, aria-hidden="true" et display: none; ou visibility: hidden; doivent être appliqués sur son conteneur.

Navigation avec le clavier

Tab

Lorsque la popin est affichée, déplace successivement le focus clavier vers chacun des éléments interactifs contenus dans la popin. Si le focus clavier est positionné au niveau du dernier élément interactif contenu dans la popin au moment où la touche est pressée, le focus clavier est déplacé au niveau du premier élément interactif contenu dans la popin.

Maj + Tab

Même comportement qu’avec la touche , mais cette fois dans l’ordre inverse de lecture. Si le focus clavier est positionné au niveau du premier élément interactif contenu dans la popin au moment où la combinaison de touches est pressée, le focus clavier est déplacé au niveau du dernier élément interactif contenu dans la popin.

Esc

Lorsque la popin est affichée, ferme la popin et déplace le focus clavier sur l’élément interactif qui a déclenché l’ouverture de la popin.

REMARQUES

Dans la situation où les conteneurs HTML de la boîte de dialogue modale et celui du reste de la page sont frères dans le code source, c’est-à-dire au même niveau hiérarchique dans l’arbre DOM, appliquer un attribut aria-hidden="true" sur le conteneur du reste de la page, lorsque la boîte de dialogue modale est affichée :

<body>
  <div aria-hidden="true">
    [Contenu du reste de la page]
  </div>
  <div role="dialog" aria-labelledby="modal-title">
    <h2 id="modal-title">[Titre de la boite de dialogue modale]</h2>
    [Contenu de la boite de dialogue modale]
    <button>Annuler</button>
    <button>[Action par defaut]</button>
  </div>
</body>

Supprimer ensuite l’attribut aria-hidden="true" appliqué sur le conteneur du reste de la page, lorsque la boîte de dialogue modale est fermée :

<body>
  <div>
    [Contenu du reste de la page]
  </div>
</body>

ASTUCES

Ajouter le tabindex="-1" à la balise qui contient tout le contenu visible de la page au moment d’ouvrir la fenêtre modale. Puis le remettre à l’état initial au moment de fermer la fenêtre modale.
Lorsque la fenêtre est ouverte, placer un écouteur sur le dernier élément interactif contenu dans la popin et déplacer le focus clavier au niveau du premier élément interactif contenu dans la popin lorsque la touche Tab est pressée. Faire de même pour, respectivement, le premier élément interactif de la popin et la combinaison de touches Maj + Tab.

ATTENTION

Veuillez vous baser sur les composants suivants :

Lightbox - Exemples pratiques - Boîte à outils de l'expérience Web (en anglais)
Alert Dialog (en anglais)
Modal dialog (en anglais)
jQuery simple and accessible modal window, using ARIA. (en anglais)

RESSOURCES

Pour plus de resource, veuillez consulter les références suivantes:

2.7 Boutons "Afficher plus"

Les boutons « Afficher plus » sont des composants dynamiques qui se présentent sous la forme de bouton permettant l’affichage d’un contenu complémentaire juste avant ce dernier, à chaque fois que le bouton est activé, et tant que du contenu complémentaire reste disponible.

Les boutons« Afficher plus » disparaissent ou se désactivent lorsque la totalité du contenu complémentaire a été affiché dans la page.

COMPORTEMENTS ATTENDUS

Lorsque le focus clavier est positionné au niveau du bouton, il est possible d’afficher du contenu complémentaire avec les touches Espace et Entrée.
Lorsque le bouton est activé, le focus clavier est positionné dynamiquement au niveau du premier élément interactif nouvellement apparu.
Dans le cas où le contenu complémentaire affiché n’est pas interactif, positionner dynamiquement le focus sur le conteneur de celui-ci (en ajoutant l’attribut tabindex=”0″. Après que l’utilisateur se soit déplacé du conteneur, celui-ci doit redevenir non tabulable (enlever l’attribut tabindex).
Lorsqu’il ne reste plus de contenu complémentaire à afficher, le bouton « Afficher plus » se désactive ou est supprimé du HTML.

2.8 Infobulles (tooltips)

Les infobulles sont des messages qui permettent à l’utilisateur d’obtenir une information complémentaire sur un élément. Elles se présentent sous la forme d’un message qui apparaît au survol et à la prise de focus clavier d’un élément.

Les infobulles sont dites « simulées en ARIA » lorsqu’elles ne sont pas construites sur la base du code HTML standard prévu pour ces éléments par la spécification : l’attribut title.

SOCLE HTML

<a
   href="[url du lien]"
   aria-describedby="[id de l'élément tooltip]"
>
   [Intitulé du lien]
</a> 
 
<div 
   role="tooltip" 
   id="[id de l'élément tooltip]" 
   aria-hidden="false" 
> 
   [Contenu de l'infobulle] 
</div>

RÔLES, ÉTATS ET PROPRIÉTÉS ARIA

role="tooltip" doit être appliqué sur le conteneur de l’infobulle.
L’élément qui permet l’affichage de l’infobulle doit être rattaché à l’infobulle via l’attribut aria-describedby :
- Le conteneur de l’infobulle doit posséder un attribut id renseigné avec une valeur unique.
- L’élément qui permet l’affichage de l’infobulle doit posséder un attribut aria-describedby renseigné avec la valeur de l’attribut id du conteneur de l’infobulle.
L’attribut aria-hidden doit être appliqué sur le conteneur de l’infobulle. Sa valeur doit être renseignée dynamiquement en fonction de l’état de l’infobulle :
- aria-hidden="false" lorsque l’infobulle est affichée.
- aria-hidden="true" lorsque l’infobulle est masquée.

COMPORTEMENTS ATTENDUS

L’infobulle doit s’afficher lorsque l’élément qui en permet l’affichage :
- Est survolé par la souris.
- Prend le focus clavier.
L’infobulle doit être masquée lorsque l’élément qui en permet l’affichage :
- N’est plus survolé par la souris.
- Perd le focus clavier.
Il est également possible de masquer l’infobulle avec la touche Échap.
Lorsque l’infobulle est masquée, elle doit l’être à l’aide de aria-hidden="true"et display: none; ou visibility: hidden;. Ou encore supprimée du code source.
L’état de l’infobulle (aria-hidden, display, etc.) doit être modifiée dynamiquement à chaque mise à jour de son statut.

REMARQUES

L’avantage majeur d’une infobulle simulée en ARIA par rapport à son homologue HTML standard (attribut title) réside dans le fait que la première est également accessible aux utilisateurs qui naviguent au clavier.

ATTENTION

Dans le cas où le l'infobulle est utilisé avec une abréviation, il faut aussi :

Prévoir que l'infobulle soit caché pour les lecteurs d'écran (aria-hidden="false") en tout temps. Seul l'abréviation sera lu.
Ajouter l'attribut tabindex="0" pour permettre le focus sur l'élément <abbr />

<abbr
   tabindex="0"
>
   [abreviation]
   <div
      role="tooltop"
      aria-hidden="true"
   >
      [Nom complet de l'abreviation]
   </div>
</abbr>

RESSOURCES

Consultez les resources suivantes pour plus d'information:

WAI-ARIA 1.0 Authoring Practices - Tooltip widget (en anglais)

2.9 Champ à saisie semi-automatique (autocomplete)

Définition

Les champs à saisie semi-automatique permettent de sélectionner une valeur précise selon le début d’une valeur saisie dans ce champ. Cela permet à l’utilisateur de l’aider à préciser la valeur de ce qu’il veut saisir.

Pour cela, vous devez utiliser la balise HTML5 <datalist> qui est liée au champ de saisie qui aura l’attributlist. (Voir exemple ci-dessous).

HTML5

<input type="text" id="city" name="city" list="suggestions" />
<datalist id="suggestions">
    <!--[if lte IE 9]><select><![endif]-->
    <option label="Barrie" value="Barrie"></option>
    <option label="Calgary" value="Calgary"></option>
    <option label="Charlottetown" value="Charlottetown"></option>
    <option label="Chibougamau" value="Chibougamau"></option>
    <option label="Chilliwack" value="Chilliwack"></option>
    <option label="Cold Lake" value="Cold Lake"></option>
    <option label="Dorval" value="Dorval"></option>
    <option label="Edmonton" value="Edmonton"></option>
    <option label="Flin Flon" value="Flin Flon"></option>
    <option label="Hamilton" value="Hamilton"></option>
    <option label="Iqualuit" value="Iqualuit"></option>
    <option label="Ottawa" value="Ottawa"></option>
    <option label="Miramichi" value="Miramichi"></option>
    <option label="Montréal" value="Montréal"></option>
    <option label="Red Deer" value="Red Deer"></option>
    <option label="St. John" value="St. John"></option>
    <option label="St. John's" value="St. John's"></option>
    <option label="Toronto" value="Toronto"></option>
    <option label="Vancouver" value="Vancouver"></option>
    <option label="Whitehorse" value="Whitehorse"></option>
    <option label="Winnipeg" value="Winnipeg"></option>
    <option label="Yellowknife" value="Yellowknife"></option>
    <!--[if lte IE 9]></select><![endif]-->
</datalist>

ASTUCES

On peut utiliser un script JavaScript pour préremplir la liste au chargement du formulaire si jamais les valeurs de la liste de suggestions proviennent d’une base de données ou d’une autre source.

RESSOURCES

Correctif « datalist » (saisie automatique) - Exemples pratiques - Boîte à outils de l'expérience Web