Précédemment, dans la première partie de notre série sur l'accessibilité, nous avons abordé l'importance de concevoir des produits en tenant compte de l'accessibilité dès le départ, nos principes directeurs en matière d'accessibilité, ainsi que nos efforts pour améliorer les systèmes de focus et de raccourcis dans Glean.
Dans ce blog, nous explorerons d'autres améliorations et fonctionnalités d'accessibilité – en particulier notre expérience de lecteur d'écran, notre approche des jeux de couleurs et le design responsive.
Améliorer l'expérience du lecteur d'écran
Les lecteurs d'écran peuvent aider les utilisateurs malvoyants à naviguer sur le web. Cela ressemble à une navigation par raccourcis, avec en plus une synthèse vocale indiquant aux utilisateurs avec quoi ils interagissent. Ce qui rend un lecteur d'écran particulièrement utile, c'est qu'il prend déjà en charge nativement de nombreux raccourcis clavier, à condition que le développeur utilise le bon sémantique/balisage pour son interface.
Prenons l'exemple de VoiceOver (le lecteur d'écran par défaut de macOS) et de ses raccourcis :
<ul type='disc'>
<li> Toutes les touches fléchées mentionnées ci-dessus devraient fonctionner immédiatement avec VoiceOver. <ul type='disc'>
<li> Par ex. en utilisant correctement un élément <span class="text-rich-text-code" style="font-family: monospace;">ul</span> (ou <span class="text-rich-text-code" style="font-family: monospace;">role="list"</span>) pour présenter une liste, un utilisateur de lecteur d'écran peut utiliser la touche [VO] + [Option] + [Gauche/Droite] pour naviguer entre les éléments de la liste </li>
<li> De même, ils peuvent utiliser la touche [VO] + [Gauche/Droite/Haut/Bas] pour naviguer dans un tableau, à l'image de notre implémentation </li>
</ul>
</li>
</ul>
Pour optimiser le fonctionnement du lecteur d'écran, nous avons trouvé utile de prendre en compte les facteurs suivants :
1) Choisir le bon élément pour la tâche
- Utilisez toujours l'élément sémantiquement approprié pour votre interface. Par exemple, utilisez un <span class="text-rich-text-code" style="font-family: monospace;"><button></span> HTML natif plutôt qu'un <span class="text-rich-text-code" style="font-family: monospace;"><div></span> personnalisé. Utilisez <span class="text-rich-text-code" style="font-family: monospace;">table</span> (avec <span class="text-rich-text-code" style="font-family: monospace;">tr</span>, <span class="text-rich-text-code" style="font-family: monospace;">th</span>, etc...) au lieu de <span class="text-rich-text-code" style="font-family: monospace;">div</span> imbriqués.
- Choisir le bon élément, comme démontré précédemment, profite grandement au lecteur d'écran en lui permettant de comprendre automatiquement la fonctionnalité de l'interface. Il peut alors fournir des descriptions vocales correctes et les raccourcis appropriés.
2) En cas de doute, fournissez une explication
<ul type='disc'>
<li> Plus le contenu est visuellement riche, plus il faut d'informations associées pour le rendre accessible aux utilisateurs malvoyants. Même pour les utilisateurs non malvoyants, nous ne pouvons pas supposer qu'ils déduiront exactement les mêmes informations que l'auteur. </li>
<li> Un exemple canonique est la célèbre illusion du canard vs lapin. Dans un exemple similaire mais plus pratique, différents utilisateurs pourraient interpréter différemment la fonction d'un bouton (par ex. une icône de point d'exclamation pourrait avoir n'importe quelle signification). Associer un texte à l'image/au visuel aidera à guider l'utilisateur vers son usage prévu. </li>
<li> Une autre option consiste à utiliser des info-bulles pour fournir des indices utiles. Cependant, rendre les info-bulles accessibles à un lecteur d'écran n'est généralement pas trivial. L'alternative consiste à utiliser : <ul type='disc'>
<li> l'attribut <span class="text-rich-text-code" style="font-family: monospace;">alt</span> pour <span class="text-rich-text-code" style="font-family: monospace;"><img></span>
</li>
<li> <span class="text-rich-text-code" style="font-family: monospace;">aria-label</span>, ou <span class="text-rich-text-code" style="font-family: monospace;">aria-describedby</span> / <span class="text-rich-text-code" style="font-family: monospace;">aria-description</span> pour d'autres éléments interactifs comme <span class="text-rich-text-code" style="font-family: monospace;"><button></span> ou <span class="text-rich-text-code" style="font-family: monospace;"><a></span>
</li>
</ul>
</li>
<li> Les attributs ci-dessus permettent aux lecteurs d'écran de traiter et de relayer les informations visuelles aux utilisateurs. </li>
<li> Une autre excellente option consiste à permettre aux utilisateurs d'ajouter un texte alternatif / des légendes supplémentaires aux images. </li>
</ul>
3) Autres astuces pour améliorer l'expérience du lecteur d'écran
<ul type='disc'>
<li> Côté développeur, il existe un plugin React <span class="text-rich-text-code" style="font-family: monospace;">eslint</span> populaire qui aide à détecter les problèmes sémantiques (tout en fournissant des solutions et des suggestions) </li>
<li> Un piège courant consiste à fournir trop d'informations au lecteur d'écran, le surchargeant ainsi par inadvertance et dégradant l'expérience utilisateur. Il est important de ne fournir que les attributs nécessaires – décrits de manière concise. <ul type='disc'>
<li> Par ex. : pour <span class="text-rich-text-code" style="font-family: monospace;"><img></span>, n'incluez pas « photos » ou « images » dans le texte alternatif, car c'est redondant (l'information est déjà déduite du nom de la balise) </li>
</ul>
</li>
<li> Plus votre interface est complexe, plus elle doit recourir à la sémantique et au balisage </li>
</ul>
Adopter un thème de couleurs standardisé
Parallèlement, nous avons également relevé quelques autres défis qui ont contribué à l'effort global d'accessibilité. L'un d'eux consistait à standardiser nos thèmes de couleurs sur l'ensemble du produit.
L'an dernier, nous avons introduit le mode sombre dans Glean (à la demande générale !). Un grand changement a été d'avoir désormais un « thème » (ou « palette de couleurs ») standardisé et partagé à travers tout le produit. Au lieu d'écrire des codes de couleur hexadécimaux, nous utilisons une couleur sémantique prédéfinie, comme <span class="text-rich-text-code" style="font-family: monospace;">primaryText</span>, <span class="text-rich-text-code" style="font-family: monospace;">primaryBackground</span>, <span class="text-rich-text-code" style="font-family: monospace;">secondaryText</span>, <span class="text-rich-text-code" style="font-family: monospace;">secondaryBackground</span>, etc. L'utilisation de cette couche sémantique permet aux développeurs de passer facilement du thème clair au thème sombre (et instantanément grâce aux variables CSS, comme présenté dans cet article de blog de Slack).
Du point de vue de l'accessibilité, nous nous efforçons de nous assurer que notre thème de couleurs est conforme au niveau AA (ce qui signifie un rapport de luminance minimal de 4,5 : 1 entre le premier plan et l'arrière-plan). Une idée potentielle à explorer davantage serait d'introduire un mode à fort contraste que les utilisateurs pourraient activer pour rendre la couleur de premier plan (comme la couleur du texte et des bordures) plus visible par rapport à leur arrière-plan.
Adopter largement le design responsive
Pour les clients souhaitant utiliser Glean sur leurs appareils mobiles, nous prenons également en charge l'application mobile Glean sur iOS et Android. Nous utilisons Capacitor pour afficher la vue web, qui reproduit le site à une fenêtre d'affichage petite et étroite (du moins pour la plupart des appareils). Nous veillons à concevoir un menu et une interface de navigation adaptés aux mobiles, pour une facilité d'utilisation et une réactivité optimales.
Sous un autre angle, utiliser un produit dans une fenêtre d'affichage plus petite revient à l'utiliser à un niveau de zoom plus élevé (c'est-à-dire en utilisant CMD + / - pour ajuster le niveau de zoom de votre navigateur). C'est important pour l'accessibilité, car de nombreux utilisateurs (sans une vue parfaite) peuvent avoir besoin de zoomer pour rendre le contenu, comme un petit texte, plus perceptible.
Par conséquent, nous adoptons le design responsive et nous nous efforçons de nous assurer que toute nouvelle fonctionnalité fonctionnerait bien dans de petites fenêtres et à des niveaux de zoom élevés. Cela offre une perte de fonctionnalité minimale quel que soit le zoom (la norme AA exige que les produits fonctionnent bien jusqu'à un niveau de zoom de 400 %).
Rendre la taille de police flexible
Comme mentionné ci-dessus, les clients sans une vue parfaite peuvent avoir besoin de zoomer ou d'utiliser un outil de grossissement pour consulter le web plus facilement, plus souvent sur les sites web comportant un petit texte. Pour respecter ce critère, une solution courante consiste à permettre à la police de votre site web de respecter la préférence du navigateur en utilisant rem.
Rem représente la taille de police (racine) de la page, qui utilisera la taille de police par défaut (à partir de la préférence du navigateur). De plus, elle peut être ajustée manuellement en spécifiant la valeur de la police sur l'élément racine (c'est-à-dire l'élément <span class="text-rich-text-code" style="font-family: monospace;"><html></span> ou en utilisant <span class="text-rich-text-code" style="font-family: monospace;">:root</span> en CSS). Une chose à garder à l'esprit lors de l'adoption de rem est de s'assurer que les conteneurs de texte n'ont pas une hauteur fixe en px, ou qu'ils devraient également utiliser rem. Cela permet au texte de ne pas déborder de sa région contenante lorsqu'il est agrandi.
Pour revenir à notre système de design « sémantique », nous pouvons définir de manière abstraite ces usages de police à un haut niveau et les partager entre les produits. Un exemple en LESS : au lieu d'utiliser <span class="text-rich-text-code" style="font-family: monospace;">font-size:16px</span>, nous utiliserions <span class="text-rich-text-code" style="font-family: monospace;">font-size:@mediumFont</span> et définirions <span class="text-rich-text-code" style="font-family: monospace;">@mediumFont:1rem</span>.
Rechercher des améliorations
En matière d'accessibilité, en particulier pour les entreprises à un stade précoce, voici ce que nous aimerions vous laisser :
- Des équipes plus réduites facilitent la communication. Alignez les personnes sur le même système de design le plus tôt possible pour garantir l'évolutivité
- Concevoir en pensant à l'accessibilité dès le départ est plus facile que de bricoler pour que cela fonctionne par la suite
- Un produit soigné et accessible n'est pas seulement esthétique : il se démarque véritablement lors des échanges avec des clients potentiels
Merci de nous avoir accompagnés ! Vous avez des questions ou des demandes en matière d'accessibilité ? Contactez-nous à a11y@glean.com – et consultez notre feuille de route publique sur l'accessibilité pour découvrir ce sur quoi nous travaillons activement afin d'offrir une meilleure recherche et découverte des connaissances à un plus grand nombre d'utilisateurs.
