UX et handicap, l’accessibilité est la clé
Sylvie Duchateau et Marie Guillaumet, Access42
UX Rennes, 10 novembre 2017
Transcription et support de cette conférence
Le pouvoir d’inclure ou d’exclure avec le design
UX + accessibilité = ♥︎
Au programme
- Quels utilisateurs ?
- Quels standards ?
- Quels outils ?
1. Quels utilisateurs ?
1.2. Panorama des handicaps concernés
23 millions de personnes concernées par le handicap en France
Un guide très utile : impacts utilisateurs des défauts d’accessibilité
Des situations de handicap multiples
1.2. Démonstration d’un lecteur d’écran
Comment fonctionne un lecteur d’écran ?
Place aux tests !
Test 1a : champs mal reliés à leur étiquette
Problème : un lecteur d’écran va restituer « Oui » et « Non », mais pas la question posée à l’utilisatrice, qui est aveugle. Ceci parce que la question n’est pas reliée techniquement aux champs.
Test 1b : formulaire à choix multiple accessible
Solution : réunir les champs visuellement et techniquement à l’aide des éléments fieldset et legend pour que la question soit bien restituée par les lecteurs d’écran.
Test 2a : champs aux étiquettes similaires
Problème : une utilisatrice aveugle n’a pas le contexte qui lui permet de savoir quel champ « Prénom » correspond à quel passager.
Test 2b : regrouper les champs aux étiquettes similaires
Solution : réunir les champs visuellement et techniquement à l’aide des éléments fieldset et legend pour que la question soit bien restituée par les lecteurs d’écran.
Test 3a : erreurs de saisies signalées uniquement par la couleur
Problème : l’erreur de saisie présente dans le champ « Email » n’est pas restituée par le lecteur d’écran. Découragement voire abandon de l’utilisatrice aveugle qui ne comprend pas où se situe l’erreur ni comment elle peut la corriger.
Test 3b : erreurs de saisies signalées
Solution : indiquer, si nécessaire, le format attendu directement dans l’étiquette du champ, et donner un exemple de saisie réelle pour aider l’utilisateur à comprendre son erreur.
Pour en savoir plus : guide sur les lecteurs d’écran
1.3. Responsabilité des designers
Design universel, vraiment ?
L’exemple des rampes escaliers.
« Nous devons davantage craindre les conséquences de notre travail qu’aimer l’intelligence de nos idées. »
2. Quels standards ?
2.1. Socle normatif :
WCAG et RGAA
Trois niveaux de priorité
- Niveau simple A
(A) - Niveau double A *
(AA) - Niveau triple A
(AAA)
* Le niveau AA est le niveau légal requis.
![Critère 11.4 [A] Dans chaque formulaire, chaque étiquette de champ et son champ associé sont-ils accolés ?](img_slide/critere-11.4.jpg)
À retenir
Pour concevoir des interfaces accessibles,
il est essentiel de respecter WCAG.
2.2. Obligation légale
- Obligation d’accessibilité pour les sites publics depuis 2005…
- …et bientôt étendue aux entreprises privées délégataires d’une mission de service public.
- Concerne aussi les applis mobiles et le mobilier urbain numérique.
- En attente d’un décret d’application et de la directive européenne (septembre 2018).
3. Quels outils ?
3.2. Auto-formation
Apprendre les fondamentaux : a42.fr/design-accessible
Perdu·e·s ?
Rassurez-vous, personne ne vous demande de tout rendre accessible d’un coup !
Navigation
Pour passer d’une page à une autre, vous disposez des boutons « Suivant » et « Précédent ».
Sur appareil mobile, vous avez la possibilité de changer de page en balayant l’écran :
- de la droite vers la gauche, pour passer à la page suivante ;
- de la gauche vers la droite, pour revenir à la page précédente.
Navigation avec lecteur d’écran sur appareils mobiles
Si vous utilisez un lecteur d’écran sur mobile, ces actions sont différentes selon votre logiciel :
- sur Android avec TalkBack : l’action se réalise avec deux doigts sur l’écran (les deux doigts doivent être suffisamment espacés l’un de l’autre) ;
- sur iPhone avec VoiceOver : effectuer un double tap prolongé et maintenir le doigt appuyé quelques secondes puis balayer l’écran vers la gauche ou la droite.
- Si ces actions ne sont pas effectives, vous devez retourner en haut de page pour atteindre les boutons « Suivant » et « Précédent ».
Navigation au clavier
| Touche | Action |
|---|---|
| CTRL + Espace | Page suivante avec la dernière version de NVDA ou JAWS 18 |
| Espace ou Flèche droite | Page suivante dans les autres cas |
| MAJ + CTRL + Espace | Page précédente avec la dernière version de NVDA ou JAWS 18 |
| MAJ + Espace ou Flèche gauche | Page précédente dans les autres cas |
| Début | Première page |
| Fin | Dernière page |
| ALT + 0 (zéro) | Sommaire |
Options d’accessibilité
AccessReader propose plusieurs options d’accessibilité à configurer dans le volet « Configuration ».
Dyslexie
Pour un meilleur confort de lecture, cochez les options « Police adaptée » et « Interlignage adapté ».
Contraste
AccessReader propose trois niveaux de contraste :
- par défaut ;
- inversé ;
- renforcé.
Vocalisation
Vous pouvez sélectionner, à la section « Accessibilité », différentes options sonores.
Vous pouvez choisir les actions qui déclencheront un signal sonore (chaque signal sonore est différent en fonction de l’action) :
- Page : émet un bip lorsque vous arrivez sur une nouvelle page
- Début : émet un bip lorsque vous atteignez la première page
- Fin : émet un bip lorsque vous atteignez la dernière page
Vous pouvez également choisir des éléments supplémentaires à vocaliser :
- Numéro : vocalise le numéro de la page à son affichage
- Titre : vocalise le titre de la page à son affichage
Conseils pour l’utilisation d’AccessReader avec un lecteur d’écran
Note : AccessReader a été utilisé avec les lecteurs d’écran suivants :
- Windows : NVDA 2017.3 avec Firefox 55 et Internet Explorer 11 ;
- Windows : JAWS version 18 avec Internet Explorer 11 ;
- Mac : Sierra avec VoiceOver et Safari.
- Linux : Ubuntu 14 avec Orca et Firefox 30.
Recommandations pour la configuration avec un lecteur d’écran
- Rechercher le bouton « Ouvrir la configuration » (il se trouve en bas de page).
- Choisir la police, l’interlignage et les contrastes les plus adaptés à sa vision.
- Dans la partie « Accessibilité », on peut choisir de cocher ou non des cases à cocher pour :
- vocaliser les numéros de page,
- entendre des bips quand on arrive à la première ou la dernière page,
- vocaliser le titre de la page en cours.
- Veiller à ce que la case « désactive l’action du clic pour afficher la page suivante » soit décochée, (NVDA et JAWS). Pour VoiceOver et Orca, cela ne semble pas avoir d’incidence.
- Dans la partie « lecteur », on peut choisir d’afficher ou non le sommaire et de consulter le document en mode page à page ou en mode plan. Dans le cas du mode plan, toutes les pages seront affichées en mode linéaire. Elles seront séparées par des titres de niveau 2. Dans le cas du mode page, il faudra appuyer sur suivant ou sur espace pour afficher la page suivante.
Note sur l’utilisation des commandes du lecteur avec un lecteur d’écran
L’appui sur la barre d’espace pour aller à la page suivante ne fonctionne pas avec NVDA et Firefox ≥55, ni avec JAWS et Internet Explorer ≥11. Dans ces deux cas, il faut utiliser le raccourci CTRL + Espace pour passer à la page suivante, et MAJ + CTRL + Espace pour passer à la page précédente.
L’appui sur les autres touches pour aller au début et à la fin du document ne fonctionnent pas non plus avec JAWS et NVDA. Pour pallier ce problème :
- dans NVDA, appuyer sur NVDA + F2 pour ignorer l’appui sur la touche suivante ;
- dans JAWS, appuyer sur JAWS + 3 du pavé alphanumérique pour ignorer l’appui sur la touche suivante.
VoiceOver et Orca gèrent très bien la navigation à la page suivante, avec espace, page précédente avec SHIFT + espace, début et fin de diaporama.
Par contre l’utilisation des flèches droite et gauche ne fonctionne avec aucun des lecteurs d’écran mentionnés ci-dessus.
Utilisation du dialogue de configuration avec un lecteur d’écran
Lorsqu’on ouvre la configuration, une « Fenêtre » apparaît. VoiceOver annonce « paramètres » avec 7 éléments. Chaque catégorie est annoncée comme « groupe » par VoiceOver : exemple dyslexie, contrastes, accessibilité, effets (groupe). VoiceOver annonce le nombre d’éléments dans chaque catégorie. Pour ouvrir une catégorie, appuyer sur VO + Majuscule + flèche bas.
Pour modifier les paramètres accessibilité, une fois que VoiceOver annonce accessibilité, interagir à l’aide de VO+majuscule+flèche bas et se déplacer parmi les boutons. VoiceOver n’annonce pas le titre associé à chaque bouton.
Avec les autres lecteurs d’écran, il suffit, une fois que la fenêtre a été ouverte, d’utiliser la tabulation et d’effectuer les choix souhaités en cochant les éléments à l’aide de la barre d’espace.
Veillez à ne pas dépasser le bouton « Enregistrer » car on risque de se retrouver dans la barre d’adresses du navigateur et il est difficile de revenir en arrière.
Autres petits dysfonctionnements des lecteurs d’écran
NVDA et Orca
Lorsqu’on passe à la page suivante ou précédente et que la vocalisation des numéros de pages est cochée, NVDA et Orca annoncent « null » puis le numéro de page. Pour les chiffres supérieurs à 10, ils continuent d’annoncer 1, 2, 3… Seules les dizaines, 10, 20, 30… sont annoncées correctement.
L’annonce des numéros de pages est correcte avec JAWS à partir de la version 15 et VoiceOver.
JAWS
Si vous utilisez JAWS, la version 14 du logiciel ne fonctionne pas bien avec Firefox. Préférer l’utilisation du lecteur avec Internet Explorer. JAWS 14 ne vocalise pas les numéros de page ni leur titre.
Pour toute question concernant l’utilisation d’Accessreader avec un lecteur d’écran, ne pas hésiter à nous contacter.
Structure des titres
Le premier titre de niveau 1 (h1) rencontré dans la page contient le titre du diaporama. Ce titre de niveau 1 reste le même tout au long du diaporama.
Ensuite, chaque grande section du diaporama est titrée par un titre de niveau 2 (h2).
À l’intérieur d’une grande section, les sous-sections peuvent être titrées par des titres de niveau 3 (h3) ou par un niveau de titre encore inférieur.
Cette structure de titres peut sembler incohérente lorsqu’elle est vocalisée : en effet, on passe parfois d’un h1 à un h3, voire à un titre de niveau inférieur. Elle n’en reste pas moins cohérente à l’échelle du document, et parfaitement valide au regard de la norme HTML 5.
Par ailleurs, lorsqu’on se trouve dans une sous-section, un fil d’ariane cliquable apparaît après l’en-tête du document, et permet de retourner au début de la grande section concernée si besoin.