Conférence de Sergei Kriger
Voir les slides (anglais)
Voir la vidéo (anglais sous titré)
Introduction
Sergei Kriger est développeur front dans la société Munichoise Robotise qui fait des robots physique pour les hôtels.
Il est très intéressé par l’accessibilité et à aider plusieurs projets à atteindre au minimum le niveau AA du référentiel.
Live Regions
Il est possible de créer des composants asynchrone qui seront lu par un lecteur d’écran.
Dans son exemple, Sergei Kriger à créé un bouton « j’aime » et va nous montrer les techniques pour vocaliser les actions au clic sur ce bouton.
Il faut informer les utilisateurs en cas d’erreur, même pour les lecteurs d’écran. Pour cela il existe des « Lives Regions », il s’agit d’une série d’attributs html qui permet de contrôler, dans une certaine mesure, ce que le lecteur d’écran va vocaliser et à quel moment.
L’attribut le plus utile dans cet exemple est aria-live. Cet attribut à 3 valeurs possibles : polite, assertive et off.
La valeur off permet aux lecteurs d’écran ne feront rien de spécial. La valeur polite va indiquer au lecteur d’écran d’attendre la fin de la lecture en cours pour vocaliser l’événement. Enfin la valeur assertive va interrompre la lecture en cours pour vocaliser l’événement. Ce dernier choix est adaptés pour des notifications importantes.
Pour que le aria-live fonctionne il faut rajouter un rôle sur la balise, pour aria-live="polite" il s’agit de role="status" et pour aria-live="assertive" il s’agit de role="alert" .
User action
Dans cet exemple, Sergei Kriger créé un bouton qui lance l’action d’envoyer un mail à un utilisateur. Quand l’email à bien été envoyé, il y a une notification qui indique cela ainsi que 3 boutons permettant d’annuler, de voir le message ou de fermer la notification.
La notification est bien vocalisée mais les personnes utilisant des lecteurs d’écrans n’ont pas perçu que ces 3 boutons existaient du fait que les lecteurs d’écran ne les ont pas informés.
Les composants asynchrones ne fournissent pas simplement de l’information, mais aussi des possibilités d’action.
Il existe une technique de focus, el.focus() qui permet de déplacer le focus et ainsi permettre aux lecteurs d’écran de vocaliser le nouvel emplacement et aux utilisateurs de cliquer sur les boutons.
Le fait de déplacer le focus d’un élément à un autre ne fonctionne pas de la même manière d’un navigateur à un autre.
Conclusion
Si vous souhaitez en apprendre d’avantage sur l’accessibilité, il existe un site regroupant les pratiques pour la création des contenus : WAI-ARIA.
Pour les débutant, il existe un livre de Laura Kalbag intitulé « Accessibility for everyone ».
Pour ceux ayants de bonnes connaissances en accessibilité mais voulant aller plus loin, le site Inclusive Components est fait pour vous.