Accessibilité – 5 : les composants complexes
Tribune Glob'codeurCinquième article de la série sur le thème de l'accessibilité.
Sommaire
Retrouvez l'ensemble de notre contenu sur l'accessibilité dans un livret PDF dédié. Il est à la destination de tous les professionnels du Web afin de rendre le web plus inclusif.
Les composants d'interface
Les composants complexes (autrement dit composants d’interface) sont des éléments avec lesquels l’utilisateur peut interagir (bouton, lien, une zone de saisie…). Certains composants peuvent être plus complexes (menu, carrousel…etc).
Ces composants peuvent être basés sur des éléments natifs de HTML ou développés de toutes pièces en JavaScript et des attributs WAI-ARIA.
Onglets
Les onglets sont un ensemble de sections de contenu en couches, appelées panneaux d'onglet, qui affichent un panneau de contenu à la fois. Chaque panneau à onglets est associé à un onglet qui, lorsqu'il est activé, affiche le panneau. La liste des éléments d'onglet est disposée le long d'un bord du panneau actuellement affiché, le plus souvent le bord supérieur.
Interaction clavier
- Tab :
- Lorsque le focus se déplace dans la liste d'onglets, il place le focus sur l'élément d'onglet actif.
- Lorsque la liste d'onglets contient le focus, il déplace le focus vers le tabpanel.
- Lorsque le focus est sur un onglet dans une liste d'onglets horizontale :
- Flèche gauche : déplace le focus sur l'onglet précédent. Si le focus est sur le premier onglet, déplace le focus sur le dernier onglet.
- Flèche droite : Déplace le focus vers l'onglet suivant. Si le focus est sur le dernier élément de l'onglet, déplace le focus vers le premier onglet.
- Lorsque le focus est sur un onglet dans une liste d'onglets verticale :
- Flèche vers le haut : déplace le focus sur l'onglet précédent. Si le focus est sur le premier onglet, déplace le focus sur le dernier onglet.
- Flèche vers le bas : déplace le focus vers l'onglet suivant. Si le focus est sur le dernier élément de l'onglet, déplace le focus vers le premier onglet.
- Lorsque le focus est sur un onglet dans une liste d'onglets avec une orientation horizontale ou verticale :
- Espace ou Entrée : Active l'onglet s'il n'a pas été activé automatiquement lorsqu'il reçoit le focus.
- Home (en option) : déplace le focus sur le premier onglet.
- End (en option) : déplace le focus sur le dernier onglet.
Pour la liste des onglets :
WAI-ARIA rôles, états et Propriétés
- Le conteneur des onglets à la propriété role="tablist".
- Chaque onglet à la propriété role="tab"
- Chaque élément qui contient le contenu d'un onglet a le role="tabpanel".
- Si la liste d'onglets a un nom accessible, le conteneur avec le role="tablist" à la propriété aria-labelledby qui fait référence au nom accessible. Sinon, le conteneur tablist a un nom accessible fourni par la propriété aria-label.
- Chaque élément ayant le role="tab" possède la propriété aria-controls faisant référence à l'élément tabpanel qui lui est associé.
- L'onglet actif à la propriété aria-selected="true" et celui de tous les autres onglets à false.
- Chaque élément ayant le role="tabpanel" possède la propriété aria-labelledby faisant référence à l'onglet tab associé.
- Si la tablist est orienté verticalement, la propriété aria-orientation="vertical". par défaut la propriété aria-orientation="horizontale".
See the Pen A11y - Liens d'évitement by Globalis MS (@globalis-ms) on CodePen.
Menus
Un menu est un widget qui offre une liste de choix à l'utilisateur, comme un ensemble d'actions ou de fonctions.
Un menu qui est visuellement persistant est une menubar. Une menubar est généralement horizontale et est souvent utilisée pour créer une barre de menu similaire à celles que l'on trouve en haut de la fenêtre dans de nombreuses applications de bureau, sites web ou applications web, offrant à l'utilisateur un accès rapide à un ensemble cohérent de commandes.
Interaction clavier
- Tab et Shift + Tab :
- Déplacer le focus dans une menubar:
- Si le focus est déplacé dans la barre de menu pour la première fois, il est placé sur le premier menuitem.
- Si la menubar contenait déjà le focus, le focus est éventuellement placé sur le dernier élément de menu qui a eu le focus. Sinon, il est placé sur le premier élément de menu qui n'est pas désactivé.
- Lorsque le focus est sur un élément d'un menu ou d'une barre de menu, le focus est déplacé hors du menu ou de la barre de menu, et les menus et sous-menus sont fermés.
- Déplacer le focus dans une menubar:
- Entrer:
- Lorsque le focus se trouve sur un menuitem qui possède un sous-menu, ouvre le sous-menu et place le curseur sur son premier élément.
- Sinon, active l'élément et ferme le menu.
- Flèche vers le bas :
- Lorsque le focus se trouve sur un menuitem qui possède un sous-menu, il ouvre le sous-menu et place le curseur sur le premier élément du sous-menu.
- Lorsque le focus se trouve dans un menu, il passe à l'élément suivant, en passant éventuellement du dernier au premier.
- Flèche vers le haut :
- Lorsque le focus est dans un menu, déplace le focus vers l'élément précédent, en allant éventuellement du premier au dernier.
- Flèche droite :
- Lorsque le focus est dans un menu et sur un élément de menu qui a un sous-menu, ouvre le sous-menu et place le focus sur son premier élément.
- Lorsque le curseur se trouve dans un menu et sur un élément qui n'a pas de sous-menu, les trois actions suivantes sont effectuées :
- Ferme le sous-menu et tous les menus parents.
- Si le focus est maintenant sur un élément de menu avec un sous-menu, soit : (recommandé) ouvre le sous-menu de cet élément de menu sans déplacer le focus dans le sous-menu, soit ouvre le sous-menu de cet élément de menu et place le focus sur le premier élément du sous-menu.
- Flèche gauche :
- Lorsque le focus se trouve dans un sous-menu d'un élément d'un menu, ferme le sous-menu et renvoie le focus sur l'élément de menu parent.
- Lorsque le curseur se trouve dans le sous-menu d'un élément d'une barre de menu, les trois actions suivantes sont effectuées :
- Ferme le sous-menu.
- Déplace le focus sur l'élément précédent dans la barre de menus.
- Si le focus est maintenant sur un élément de menu avec un sous-menu, soit : (recommandé) ouvre le sous-menu de cet élément de menu sans déplacer le focus dans le sous-menu, soit ouvre le sous-menu de cet élément de menu et place le focus sur le premier élément du sous-menu.
- Home : Déplace le focus sur le premier élément du menu en cours.
- End : Déplace le focus sur le dernier élément du menu en cours.
- Échap : Ferme le menu qui contient le focus et retourne le focus à l'élément ou au contexte, par exemple, le bouton de menu ou le menu parent, à partir duquel le menu a été ouvert.
WAI-ARIA rôles, états et Propriétés
- Le conteneur du menu à la propriété role="menu" ou role="menubar".
- Les éléments enfants du menu ont l'un des rôles suivants :
- menuitem
- menuitemcheckbox
- menuitemradio
- Un menuitem parent à la propriété aria-haspopup="menu" ou "true"
- Un menuitem parent à la propriété aria-expanded="false" lorsque son menu enfant n'est pas visible et "true" lorsque le menu enfant est visible.
- L'une des approches suivantes est utilisée pour permettre aux scripts de déplacer le focus entre les éléments d'un menu:
- Le conteneur de menu à la propriété tabindex=-1 ou 0 et un aria-activedescendant=l'ID de l'élément ciblé.
- Chaque menuitem a un tabindex=-1, sauf dans une barre de menu, où le premier élément a un tabindex=0.
- Lorsqu'un menuitem est désactivé, la prorpiété aria-disabled prend la valeur true.
- Un élément avec la propriété role="menu" a soit :
- aria-labelledby défini à une valeur qui fait référence au menu ou au bouton qui contrôle son affichage.
- Un label fourni par la propriété aria-label.
- Si un menu est orienté horizontalement, la propriété aria-orientation="horizontal". Par défaut, aria-orientation=verticale.
See the Pen A11y - Liens d'évitement by Globalis MS (@globalis-ms) on CodePen.
Modales
La modale est une fenêtre superposée soit à la fenêtre principale, soit à une autre modale.
Les fenêtres sous une fenêtre de dialogue modale sont inertes. En d'autres termes, les utilisateurs ne peuvent pas interagir avec le contenu situé en dehors d'une fenêtre de dialogue active.
Interactions clavier
Dans ce qui suit, le terme "élément tabulable" désigne tout élément dont la valeur de tabindex est égale ou supérieure à zéro. Sachant que les valeurs supérieures à 0 sont déconseillées.
- Lorsqu'une modale s'ouvre, le focus se déplace vers le premier élément tabulable à l'intérieur de la modale.
- Tab:
- Déplace le focus sur l'élément tabulable suivant dans la modale.
- Si le focus est sur le dernier élément tabulable de la modale, le focus se déplace vers le premier élément tabulable de la modale.
- Shift + Tab:
- Déplace le focus sur l'élément tabulable précédent dans la modale.
- Si le focus est sur le premier élément tabulable de la boîte de dialogue, le focus se déplace vers le dernier élément tabulable de la boîte de dialogue.
- Échap : Ferme la modale.
WAI-ARIA rôles, états et Propriétés
- Le conteneur de la modale à une propriété role="dialog" et aria-modal="true"
- La modale a soit :
- Une valeur définie pour la propriété aria-labelledby qui fait référence à un titre de la modale visible.
- Un label spécifiée par aria-label.
See the Pen A11y - Liens d'évitement by Globalis MS (@globalis-ms) on CodePen.
Carrousels
Un carrousel est un ensemble d'éléments, appelés diapositives, en affichant séquentiellement un sous-ensemble d'une ou plusieurs diapositives. En général, une diapositive est affichée à la fois, et les utilisateurs peuvent activer une commande de diapositive "suivante" ou "précédente" qui masque la diapositive actuelle et fait tourner la diapositive "suivante" ou "précédente" à l'écran.
Afin de rendre les carrousels accessibles, il est important de s'assurer que tous les utilisateurs peuvent facilement contrôler la rotation des diapositives et qu'ils ne sont pas affectés par celle-ci.
Les fonctionnalités nécessaires pour assurer un contrôle suffisant de la rotation comprennent :
- Des boutons pour afficher les diapositives précédentes et suivantes.
- Un contrôle, ou un groupe de contrôles, pour choisir une diapositive spécifique à afficher. Cela est généralement en option
Dans tous les cas, il est déconseillé de mettre les médias en autoplay, ou lecture automatique mais si le carrousel peut effectuer une rotation automatique, il doit également :
- Disposer d'un bouton pour arrêter et relancer la rotation. Ceci est particulièrement important pour la prise en charge des technologies d'assistance fonctionnant dans un mode qui ne déplace ni le focus du clavier ni la souris.
- Arrêter la rotation lorsque le focus du clavier entre dans le carrousel.
- Arrêter la rotation lorsque la souris survole le carrousel.
Interactions clavier
- Si le carrousel possède une fonction de rotation automatique, cette fonction s'arrête lorsqu'un élément du carrousel reçoit le focus du clavier et elle ne reprend que si l'utilisateur active la commande de rotation.
- Tab et Shift + Tab : Déplacent le focus sur les éléments interactifs du carrousel.
- Si elle est présente, la commande de rotation est le premier élément de la séquence de tabulation à l'intérieur du carrousel. Il est essentiel qu'il précède le contenu en rotation afin qu'il puisse être facilement localisé.
- Les buttons "Suivant", "Précedent" et "Start/Stop rotation" ne déplacent pas le focus afin de être utilisé de manière répétitive autant de fois qu'ils le souhaitent.
WAI-ARIA rôles, états et Propriétés
- Le conteneur du carrousel à un role="region" ou role="group". Le role le plus approprié dépend de l'architecture de la page. (voir landmark regions guidance pour déterminer le role approprié)
- Le conteneur du carrousel à un aria-roledescription="carousel".
- Si le carrousel possède un titre, son titre accessible est fournie par la propriété aria-labelledby du conteneur du carrousel, définie sur l'ID du titre. Sinon, une étiquette accessible est fournie par la propriété aria-label définie sur le conteneur du carrousel. Si la propriété aria-roledescription est définie sur "carrousel", l'étiquette ne contient pas le mot "carrousel".
- La commandes rotation, suivant et la commande précédent sont des boutons natifs (recommandé) ou mettent en œuvre le pattern bouton.
- Chaque diapositive à un role="group" avec une propriété aria-roledescription="slide"
- chaque diapositive a un nom accessible :
- Fourni par aria-labelledby sur l'ID de l'élément contenant le nom accessible.
- Un label accessible fourni par la propriété aria-label définie sur le conteneur de la diapositive.
- Exceptionnellement, dans l'absence de noms accessibles unique pour chaque diapositive, un nombre et une taille d'ensemble peuvent servir d'alternative significative, par exemple, "3 sur 10".
- Si aria-roledescription="slide", le nom accessible ne doit pas contenir le mot "slide".
See the Pen A11y - Liens d'évitement by Globalis MS (@globalis-ms) on CodePen.
Conclusion
Voilà pour un inventaire complet des composant d'interface. Ils sont définis dans la famille 7 du RGAA, celle des scripts. A noter que chaque script possède ses propres critères non répertoriés dans le RGAA mais qui le sont dans les WCAG.
Retrouvez notre série sur l'accessibilité :