Bien que Glean n'ait qu'environ cinq ans, notre équipe déploie des efforts considérables pour bien faire les choses dès le départ. Cela a permis à Glean d'acquérir une maturité que l'on ne retrouve pas souvent dans les produits plus récents.
L'une de ces dimensions, c'est l'accessibilité. Conformément à notre mission qui consiste à démocratiser la découverte des connaissances, nous avons accompli de grandes avancées tout au long de notre parcours pour rendre Glean plus convivial et utilisable par tous. Dans cet article, nous allons vous expliquer comment nous avons conçu Glean pour qu'il soit plus accessible, ainsi que quelques enseignements tirés d'un point de vue à la fois technique et pratique.
Principes directeurs
L'accessibilité est un incontournable pour que chaque produit atteigne son public le plus large. Nous recevons souvent des retours de clients qui souhaitent utiliser Glean sans effort, sans souris, ou qui veulent mieux comprendre Glean lorsqu'ils utilisent un lecteur d'écran. La conformité en matière d'accessibilité est aussi un enjeu commercial : c'est une exigence légale courante pour les clients d'entreprise, et parfois un obstacle de dernière minute à la conclusion de contrats.
En tenant compte de tout cela, nous nous sommes engagés à développer en gardant l'accessibilité à l'esprit et avons défini quelques principes directeurs pour nous guider :
- Prendre en compte l'accessibilité dès le début du processus — le plus tôt sera le mieux
- Intégrer un système de conception commun à tout le produit pour faire évoluer l'accessibilité de manière efficace
- Obtenir rapidement l'adhésion des parties prenantes, telles que les équipes produit et la direction, afin de s'aligner sur un engagement à long terme et l'allocation des ressources
Une fois ces principes définis, nous avons entrepris de développer nos premières améliorations clés pour l'expérience du clavier et des raccourcis dans Glean.
Mettre en place des indicateurs de focus pour une utilisation au clavier uniquement
Tout le monde ne peut pas utiliser une souris — et naviguer dans un produit à l'aide du clavier ressemble beaucoup à la façon dont un utilisateur de lecteur d'écran accède au produit. Il est donc bénéfique de faire en sorte que votre produit fonctionne bien avec un clavier.
L'une des fonctionnalités les plus importantes consiste à permettre aux utilisateurs de rester concentrés. Lors de la navigation sur le site via le clavier, il devrait toujours y avoir un indicateur de focus indiquant aux utilisateurs où se situe leur interaction.
Il existe quelques méthodes courantes pour mettre en place un tel indicateur de focus (également appelé « anneau de focus ») :
<ul type='disc'>
<li> Utiliser des bibliothèques populaires telles que Discord ou React-Aria FocusRing, toutes deux compatibles avec React </li>
<li> Ou bien, le mettre en place vous-même. Heureusement, le standard web a rapidement rattrapé son retard ces dernières années, facilitant la tâche :
<ul type='disc'>
<li> Auparavant, les développeurs s'appuyaient sur la propriété CSS <span class="text-rich-text-code" style="font-family: monospace;">:focus</span> </li>
<li> Il existe désormais une propriété <span class="text-rich-text-code" style="font-family: monospace;">:focus-visible</span> largement prise en charge pour détecter quand un élément interactif reçoit le focus et que l'agent utilisateur/le navigateur autorise l'affichage de l'indicateur de focus <ul type='disc'>
<li> Pour la plupart des navigateurs, cela équivaut à l'élément interactif recevant le focus via le clavier </li>
<li> Vous pouvez également utiliser un polyfill pour reproduire ce comportement, pour plus de flexibilité </li>
</ul>
</li>
<li> Pour styliser l'indicateur lui-même, vous pouvez utiliser des propriétés CSS courantes telles que <span class="text-rich-text-code" style="font-family: monospace;">outline</span> (comportement par défaut), <span class="text-rich-text-code" style="font-family: monospace;">border</span> ou <span class="text-rich-text-code" style="font-family: monospace;">box-shadow</span> <ul type='disc'>
<li> Vous pouvez aussi utiliser des pseudo-sélecteurs comme <span class="text-rich-text-code" style="font-family: monospace;">::before</span> et <span class="text-rich-text-code" style="font-family: monospace;">::after</span> pour éviter tout conflit de mise en page potentiel (c'est-à-dire avec <span class="text-rich-text-code" style="font-family: monospace;">padding</span> ou <span class="text-rich-text-code" style="font-family: monospace;">margin</span>), qui pourrait survenir avec les propriétés mentionnées ci-dessus </li>
</ul>
</li>
</ul>
</li>
</ul>
Outre le fait d'avoir un indicateur de focus qui fonctionne avec les raccourcis clavier (plus de détails dans la section suivante), il existe d'autres bonnes pratiques courantes en matière de focus que nous avons mises en place :
<ul type='disc'>
<li> Disposer d'un lien d'évitement pour amener immédiatement le focus sur le contenu principal est très utile, surtout si votre site possède un en-tête et un système de navigation très chargés </li>
<li> Maintenir un ordre de focus intuitif, c'est-à-dire :
<ul type='disc'>
<li> Garder une utilisation simple de votre <span class="text-rich-text-code" style="font-family: monospace;">tabIndex</span>. Il devrait être soit <span class="text-rich-text-code" style="font-family: monospace;">-1</span>, soit <span class="text-rich-text-code" style="font-family: monospace;">0</span>. Une valeur positive signifie que l'ordre de focus de l'élément pourrait ne pas correspondre à son ordre visuel (c'est-à-dire qu'un bouton pourrait recevoir le focus avant son élément frère précédent) </li>
</ul>
</li>
<li> Veiller à ce que le focus soit suivi de manière intuitive lors du passage entre différentes couches de l'interface :
<ul type='disc'>
<li> Par exemple, lorsqu'on sélectionne un bouton qui ouvre une boîte de dialogue, le focus doit être placé sur le premier élément interactif de la boîte de dialogue. La fermeture ultérieure de la boîte de dialogue restaure le focus sur son déclencheur, c'est-à-dire le bouton précédent </li>
</ul>
</li>
<li> Limitez <span class="text-rich-text-code" style="font-family: monospace;">autofocus</span> au strict minimum :
<ul type='disc'>
<li> <span class="text-rich-text-code" style="font-family: monospace;">autofocus</span> est un outil utile pour placer l'utilisateur là où il doit être </li>
<li> Cependant, cela amène aussi l'utilisateur à passer outre de nombreuses informations potentiellement importantes situées en amont </li>
<li> Des conflits potentiels avec d'autres éléments autofocus peuvent survenir </li>
<li> Plutôt que de laisser un élément primitif/simple (comme un <span class="text-rich-text-code" style="font-family: monospace;">input</span>) gérer l'autofocus, placez cette logique au niveau le plus élevé possible, c'est-à-dire la page où le <span class="text-rich-text-code" style="font-family: monospace;">input</span> est affiché </li>
</ul>
</li>
</ul>
La vie est plus simple avec les raccourcis
Comme mentionné précédemment, les raccourcis clavier simulent la façon dont un utilisateur de lecteur d'écran navigue sur le site. Les utilisateurs avancés s'appuient également sur les raccourcis pour gagner en productivité. C'est un excellent moyen d'aider toutes sortes d'utilisateurs à accéder au produit comme ils le souhaitent.
- Sur tous les sites web, vous pouvez utiliser la touche [Tab] pour déplacer le focus (ce qui doit fonctionner de pair avec l'indicateur de focus). L'ordre du focus doit correspondre à l'ordre des éléments interactifs au sein de l'arborescence DOM (et dépend de <span class="text-rich-text-code" style="font-family: monospace;">tabIndex</span>)
- Comme l'utilisation de [Tab] est la méthode exhaustive mais fastidieuse pour naviguer sur le site, il existe quelques modèles courants pour rendre la navigation plus rapide et plus intuitive. L'un d'eux passe par les touches fléchées. Cette méthode est la plus répandue pour naviguer sur tout site web, par exemple pour la navigation dans un menu ou entre des éléments adjacents d'une liste
- Les touches fléchées peuvent aussi servir à parcourir les résultats de recherche ou les tableaux
Voici quelques autres recommandations de raccourcis à prendre en compte :
- Si votre site web comporte plusieurs sections importantes (comme une barre latérale, un en-tête, le contenu principal, un pied de page, etc.), il est utile d'ajouter un raccourci global pour parcourir ces zones et permettre d'accéder au contenu pertinent beaucoup plus rapidement. Nous avons choisi F6 (et Maj + F6 pour l'autre direction) à cet effet
- Les utilisateurs doivent pouvoir utiliser n'importe quelle touche fléchée pour une navigation en deux dimensions dans des structures complexes, comme les tableaux.
- Enfin, et ce n'est pas le moins important, documenter ces raccourcis clavier sur le site le rend bien plus accueillant pour les nouveaux utilisateurs désireux d'apprendre. Dans Glean, les utilisateurs peuvent utiliser Commande + « / » n'importe où pour afficher la liste des raccourcis que nous prenons en charge
L'accessibilité est un parcours
Construire un produit de zéro comporte toujours ses défis, mais il est incroyablement gratifiant d'essayer de bien faire dès le départ. Optimiser l'expérience clavier et intégrer des raccourcis ne constitue qu'une partie de notre dispositif et de notre démarche en matière d'accessibilité : à mesure que nous continuons à développer Glean, nous nous engageons à respecter les normes WCAG 2.1 AA. Si vous souhaitez en savoir plus, restez à l'écoute pour la deuxième partie de notre série d'articles sur l'accessibilité !
Vous avez des questions ou des demandes concernant l'accessibilité ? N'hésitez pas à contacter a11y@glean.com et consultez notre feuille de route publique sur l'accessibilité pour découvrir ce sur quoi nous travaillons activement afin de mettre une meilleure recherche et découverte des connaissances entre les mains d'un plus grand nombre d'utilisateurs.
