Composants ARIA

Note : Dans cette page, vous trouverez des notices d’utilisation de composants riches basés sur WAI-ARIA. Recopiez les notices qui vous sont nécessaires dans la page Aide de votre site, à la section concernée.

Pour entendre les informations telles qu'elles sont restituées dans cette page d'aide, il est nécessaire de s'assurer du paramétrage suivant pour les différents lecteurs d'écran :

Avec NVDA, lorsqu'on arrive sur un composant, entrer en mode application avec NVDA + Espace.
Avec Jaws, s'assurer que le mode formulaire est activé en appuyant sur Entrée.
VoiceOver utilise ses propres modes de déplacement avec les combinaisons de touches VO+flèches de direction. Afin d'utiliser les raccourcis décrits dans cette page, s'assurer que le mode de navigation rapide est désactivé (se reporter à la documentation de VoiceOver pour plus de détails).

Si NVDA ou Jaws ne sont pas en mode application ou formulaire, certaines informations décrites ci-dessous pourraient ne pas être vocalisées correctement.

La documentation ci-dessous repose sur des tests effectués sur les configurations suivantes :

NVDA 2016.2.1 / Firefox 48
Jaws 16 / Internet Explorer 11
Safari / VoiceOver sur OSX El Capitan

Système d’onglets

Un système d’onglets est une liste de panneaux activables via des liens (onglets) qui vont afficher des contenus. Un seul panneau peut être visible à la fois : quand un onglet est activé, les autres ne sont pas visibles.

Une fois que le contenu est rendu visible, la touche TAB vous permet d'atteindre le contenu du panneau sélectionné.

Lorsque vous arrivez sur un système d’onglets, vous êtes placés sur le titre du premier onglet (par défaut, c'est le premier onglet du système qui est apparent) ;
Si vous utilisez un lecteur d’écran :
- NVDA annonce onglet, [nom], onglet sélectionné 1 sur X », où « X » est le nombre total d’onglets ;
- Jaws annonce « onglet [nom] sélectionné » ;
- VoiceOver annonce « Panneau 1, sélectionné 1 sur X », où « X » est le nombre total d’onglets.
Les flèches DROITE et GAUCHE vous permettent de naviguer d’un titre d’onglet à l’autre, activant leurs contenus associés ;
La touche TAB vous permet d'atteindre le panneau affiché ou l'un de ses composants ;
À ce moment, vous pouvez parcourir le contenu de l’onglet actif, la touche TAB vous permet d’atteindre les éléments interactifs du contenu ;
Pour parcourir la liste des titres d’onglets à nouveau, tabuler en arrière jusqu’à ce que le focus se place sur le titre de l’onglet actif.
Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
- DÉBUT vous permet d'accéder au premier panneau ;
- FIN vous permet d'accéder au dernier panneau ;
- ALT + PAGE SUIVANTE, à partir d'un panneau, vous permet d'accéder au panneau suivant ;
- ALT + PAGE PRÉCÉDENTE, à partir d'un panneau, vous permet d'accéder au panneau précédent.

Potentiomètre

Un potentiomètre est un curseur que vous pouvez faire varier entre un point minimal et un point maximal, afin de déterminer une valeur.

Si vous utilisez un lecteur d’écran, lorsque vous atteignez le potentiomètre :
- NVDA annonce « [Nom], potentiomètre, [valeur] » ;
- Jaws annonce « [Nom], potentiomètre horizontal, [valeur]. La version 16 n'annonce plus la valeur lorsqu'on la modifie. Ce problème est réparé dans la version 17 de ce lecteur d'écran. » ;
- VoiceOver annonce « [Valeur], [nom], curseur ». Interagir avec ce composant en appuyant sur les touches VO+majuscule+flèche bas. Pour utiliser les flèches de contrôle du curseur, ne pas oublier de désactiver la navigation rapide.
Les flèches HAUT et DROIT vous permettent d’augmenter la valeur du potentiomètre ;
Les flèches BAS et GAUCHE vous permettent de diminuer la valeur du potentiomètre.
Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
- DÉBUT met la valeur à son minimum ;
- FIN met la valeur à son maximum ;
- ALT + PAGE SUIVANTE, augmente rapidement la valeur ;
- ALT + PAGE PRÉCÉDENTE, diminue rapidement la valeur.

Fenêtre modale

Une fenêtre modale est un élément de la page qui vient se placer en surimpression du reste de la page, à la manière d’un message d’alerte. Ce n'est pas une nouvelle fenêtre ni un nouvel onglet. Une fenêtre modale est contenue dans la page en cours de consultation.

Si vous utilisez un lecteur d’écran, lorsqu’une fenêtre modale s'ouvre :
- NVDA annonce « [Nom] dialogue » ;
- Jaws annonce « [nom] Boîte de dialogue » ;
- VoiceOver annonce « [Nom] avec X éléments, dialogue ».
Une fois qu’une fenêtre modale est ouverte, la touche TAB vous permet d’atteindre tous les éléments de la fenêtre modale. La navigation est restreinte à cette fenêtre tant qu’elle est ouverte ;
Pour fermer la fenêtre, vous pouvez soit atteindre le bouton « Fermer », soit utiliser la touche ESC.

Accordéon

Un accordéon est un couple titre/contenu qui reprend le modèle de consultation d'un système d'onglets. Le titre vous permet de rendre visible et accessible le contenu relié, et inversement. Plusieurs accordéons peuvent être présents, et ils peuvent être ouverts simultanément.

Un seul panneau peut être visible à la fois : quand un onglet est activé, les autres ne sont pas visibles.

Une fois que le contenu est rendu visible, la touche TAB vous permet d'atteindre le contenu du panneau sélectionné.

Lorsque vous atteignez un accordéon ou un système d’accordéons, vous êtes placés sur le titre du premier accordéon.
Si vous utilisez un lecteur d’écran, lorsque vous atteignez un accordéon :
- NVDA annonce « Panneau 1, onglet 1 sur x » ;
- Jaws annonce « Panneau des onglets, onglet [nom], 1 sur x » ;
- VoiceOver annonce « [Nom] avec X éléments, tableau d'onglet ».
Quand vous êtes sur un titre d’accordéon, les touches ENTRÉE et ESC vous permettent de déployer (ou replier) son contenu.
Une fois que le contenu est rendu visible, la touche TAB vous permet d’atteindre les éléments interactifs du contenu.
Depuis un titre d’accordéon :
- les touches BAS et DROITE vous permettent d’atteindre les titres suivants du système d’accordéons ;
- les touches HAUT et GAUCHE vous permettent d’atteindre les titres précédents du système d’accordéons.
Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
- CONTROL + HAUT permet d'atteindre le titre de l'accordéon sélectionné ;
- CONTROL + PAGE PRÉCÉDENTE, depuis le contenu d'un panneau, permet d'atteindre le titre de l'accordéon précédent ;
- CONTROL + PAGE SUIVANTE, depuis le premier d'un panneau, permet d'atteindre le titre de l'accordéon ;
- DÉBUT permet d'atteindre le premier accordéon ;
- FIN permet d'atteindre le dernier accordéon ;

Si vous utilisez un lecteur d’écran, lorsque vous atteignez un menu :
- NVDA annonce « [Nom] sous-menu 1 sur X », où X est le nombre d'entrées du menu ;
- Jaws annonce « Barre de menu [nom] » ;
- VoiceOver annonce « Menu [nom] commande de menu ».
La touche DROITE vous permet d’atteindre les entrées suivantes de premier niveau du menu ;
La touche GAUCHE vous permet d’atteindre les entrées précédentes de premier niveau du menu ;
Les touches HAUT et BAS vous permettent de déployer le sous-menu (s'il existe) et d’atteindre les entrées de ce sous-menu ;
La touche ENTRÉE vous permet d’atteindre directement la première entrée d’un sous-menu (s'il existe) ;
La touche ENTRÉE vous permet d’activer les liens.
Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
- ESC ferme le sous-menu affiché ;
- LETTRE, active l'entrée de sous-menu qui commence par la lettre tapée ;

Arborescence

Une arborescence fonctionne à la manière d’un système de dossier sur un ordinateur. Il s'agit d’une liste imbriquée d’éléments que l’on peut déployer ou replier.

Si vous utilisez un lecteur d’écran, lorsque vous atteignez une arborescence :
- NVDA annonce « Arborescence, [nom] réduit niveau 1 » ;
- Jaws annonce « Arborescence [nom] fermé sélectionné, 1 sur X », où X est le nombre d'entrées de l'arborescence ;
- VoiceOver annonce « Tableau ».
Les touches de direction vous permettent de naviguer entre les entrées actives (déployées) ;
La touche DROIT vous permet de déployer les sous-sections (si elles existent) d’une entrée ;
La touche GAUCHE vous permet de replier les sous-sections d’une entrée.

Calendrier

Un calendrier est un système qui vous permet de sélectionner une date dans un ensemble de grilles organisées comme un calendrier.

Si vous utilisez un lecteur d’écran, lorsque vous atteignez un calendrier :
- NVDA annonce « Date tableau éditable cadre de texte » ;
- Jaws annonce « [Nom] date picker région » ;
- VoiceOver annonce application x éléments.
La touche HAUT vous permet d’atteindre le même jour dans la semaine précédente ;
La touche BAS vous permet d’atteindre le même jour dans la semaine suivante ;
La touche DROIT vous permet d’atteindre le jour suivant ;
La touche GAUCHE vous permet d’atteindre le jour précédent ;
La touche ESC vous permet de fermer le calendrier s'il est ouvert dans une autre fenêtre ;
La touche ENTRÉE vous permet de valider la sélection en cours.
Autres interactions au clavier (à ne documenter que si elles sont implémentées) :
- DÉBUT sélectionne la première date du mois affiché ;
- FIN, sélectionne la dernière date du mois affiché ;
- PAGE SUIVANTE, passe au mois suivant ;
- PAGE PRECEDENTE, passe au mois précédent ;

Autocomplétion

L’autocomplétion est disponible sur certains champs de texte de saisie. Le composant d’autocomplétion vous fournit des suggestions de saisie basées ou non sur les caractères que vous saisissez.

Si vous utilisez un lecteur d’écran, lorsque vous atteignez un champ d’édition :
- NVDA annonce « éditable avec auto-complétion » ;
- Jaws annonce « [Nom] édition tapez le texte. » ;
- VoiceOver n'implémente pas ce composant de façon satisfaisante. Il n'indique pas qu'une liste de proposition apparaît et qu'il faut en sélectionner une dans la liste.
Les touches HAUT et BAS vous permettent de déplier la liste de choix et de naviguer dans les suggestions. À noter qu’à chaque fois que vous atteignez la fin de la liste des suggestions, vous retournez sur le champ de saisie.
La touche ENTRÉE vous permet de valider la suggestion sur laquelle vous êtes placés.

Composants WAI-ARIA