Même si Glean n’a qu’environ cinq ans, notre équipe fait de grands efforts pour bien faire les choses dès le départ. Cela a permis à Glean d’acquérir des couches de maturité que l’on ne voit pas souvent dans des produits plus récents. ;
L’une de ces couches, c’est l’accessibilité. Fidèles à notre mission de démocratiser la découverte des connaissances, nous avons réalisé de grands progrès tout au long de notre parcours pour rendre Glean plus accueillant et plus facile à utiliser pour tout le monde. Dans cet article, nous expliquerons comment nous avons construit Glean pour le rendre plus accessible, ainsi que quelques enseignements, à la fois techniques et pratiques. ;
Principes directeurs
L’accessibilité est indispensable 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 mieux comprendre Glean en utilisant un lecteur d’écran. La conformité en matière d’accessibilité est aussi un enjeu business : c’est une exigence légale fréquente pour les clients enterprise, et parfois un obstacle de dernière minute pour conclure des contrats.
En tenant compte de tout cela, nous nous sommes engagés à développer en gardant l’accessibilité à l’esprit, et nous avons défini quelques principes directeurs pour nous mettre sur la bonne voie :
- Prendre en compte l’accessibilité dès le début du processus — plus c’est tôt, mieux c’est
- Intégrer un design system commun à l’ensemble du produit pour faire évoluer l’accessibilité efficacement
- Obtenir l’adhésion tôt des parties prenantes, comme les équipes produit et la direction, afin de s’aligner sur l’engagement à long terme et l’allocation des ressources
Une fois ces principes définis, nous sommes passés au développement de nos premières améliorations clés pour l’expérience clavier et raccourcis de 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 au clavier ressemble de près à la manière 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 au clavier.
L’une des fonctionnalités les plus importantes consiste à permettre aux utilisateurs de conserver le focus. Lorsqu’on navigue sur le site au clavier, il doit toujours y avoir un indicateur de focus qui indique aux utilisateurs où se situe leur interaction. ;
Il existe quelques façons courantes d’implémenter ce type d’indicateur de focus (aussi appelé « focus ring ») :
< ;ul type='disc'> ;
; ;< ;li> ; Utiliser des bibliothèques populaires comme FocusRing de Discord ou React-Aria, toutes deux compatibles avec React < ; ;/li> ;
; ;< ;li> ; Ou l’implémenter vous-même. Heureusement, les standards du web ont beaucoup progressé ces dernières années, ce qui rend la chose plus simple :
; ; ;< ;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é largement prise en charge, < ;span class="text-rich-text-code" style="font-family : monospace ;"> ; ;:focus-visible< ; ;/span> ; ;, qui permet de 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 au fait que l’élément interactif reçoive le focus via le clavier < ; ;/li> ;
; ; ; ; ; ;< ;li> ; Sinon, vous pouvez utiliser un polyfill pour reproduire ce comportement, avec davantage de flexibilité < ; ;/li> ;
; ; ; ; ;< ; ;/ul> ;
; ; ; ;< ; ;/li> ;
; ; ; ;< ;li> ; Pour styliser l’indicateur lui-même, vous pouvez utiliser des propriétés CSS courantes comme < ;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 potentiel de mise en page (p. ex. 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> ; ;), ce qui peut arriver avec les propriétés mentionnées ci-dessus < ; ;/li> ;
; ; ; ; ;< ; ;/ul> ;
; ; ; ;< ; ;/li> ;
; ; ;< ; ;/ul> ;
; ;< ; ;/li> ;
< ; ;/ul> ;
En plus 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 liées au focus que nous avons mises en place :
< ;ul type='disc'> ;
; ;< ;li> ; Disposer d’un lien de saut pour amener immédiatement le focus au contenu principal est très utile, surtout si votre site a un en-tête et un système de navigation très verbeux & ; complexes < ; ;/li> ;
; ;< ;li> ; Conserver un ordre de focus intuitif, c’est-à-dire :
; ; ;< ;ul type='disc'> ;
; ; ; ;< ;li> ; Garder l’usage de < ;span class="text-rich-text-code" style="font-family : monospace ;"> ;tabIndex< ; ;/span> ; simple. Il doit ê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 peut ne pas correspondre à son ordre visuel (p. ex. un bouton peut recevoir le focus avant son frère précédent) < ; ;/li> ;
; ; ;< ; ;/ul> ;
; ;< ; ;/li> ;
; ;< ;li> ; S’assurer que le focus est suivi de façon intuitive lorsqu’on navigue entre différentes couches d’UI :
; ; ;< ;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 dans la boîte de dialogue. En fermant ensuite la boîte de dialogue, le focus doit revenir à son déclencheur — le bouton précédent < ; ;/li> ;
; ; ;< ; ;/ul> ;
; ;< ; ;/li> ;
; ;< ;li> ; Limitez au maximum < ;span class="text-rich-text-code" style="font-family : monospace ;"> ;autofocus< ; ;/span> ; :
; ; ;< ;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, il peut aussi amener l’utilisateur à passer à côté de nombreuses informations potentiellement importantes en amont < ; ;/li> ;
; ; ; ;< ;li> ; Un conflit potentiel avec d’autres éléments en autofocus peut 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> ; ;) recevoir l’autofocus, gardez cette logique au niveau le plus élevé possible, c.-à-d. la page où l’< ;span class="text-rich-text-code" style="font-family : monospace ;"> ;input< ; ;/span> ; est affiché < ; ;/li> ;
; ; ;< ; ;/ul> ;
; ;< ; ;/li> ;
< ; ;/ul> ;
La vie est plus simple avec des raccourcis
Comme mentionné plus haut, les raccourcis clavier reproduisent la façon dont un utilisateur de lecteur d’écran navigue sur le site. Les power users s’appuient aussi sur les raccourcis pour gagner en productivité. C’est une excellente manière d’aider tous les types 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 concert avec l’indicateur de focus). L’ordre de focus doit correspondre à l’ordre des éléments interactifs dans l’arbre 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 la plus complète, mais aussi la plus 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 consiste à utiliser les touches fléchées. C’est la méthode la plus courante pour naviguer sur un site web, par exemple pour la navigation dans les menus ou entre des éléments adjacents dans une liste
- Les touches fléchées peuvent aussi être utilisées pour faire défiler des résultats de recherche ou des tableaux
Voici quelques autres recommandations de raccourcis à envisager :
- 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 pertinent d’ajouter un raccourci global pour parcourir ces zones et permettre d’accéder beaucoup plus rapidement au contenu pertinent. Nous avons choisi F6 (et Shift + F6 pour l’autre sens) à cet effet
- Les utilisateurs doivent pouvoir utiliser les touches fléchées pour une navigation bidimensionnelle au sein de structures complexes, comme des tableaux.
- Enfin, documenter ces raccourcis clavier au sein du site le rend beaucoup plus accessible aux nouveaux utilisateurs. Dans Glean, les utilisateurs peuvent utiliser Command + ‘/’ n’importe où pour afficher la liste de nos raccourcis pris en charge
L’accessibilité est un parcours
Construire un produit à partir de zéro comporte toujours des défis, mais c’est extrêmement gratifiant d’essayer de bien faire dès le départ. Optimiser l’expérience au clavier et intégrer des raccourcis ne sont qu’une partie de notre suite et de notre pipeline d’accessibilité — et, à mesure que nous continuons à développer Glean, nous restons engagés à respecter les standards WCAG 2.1 AA. Si vous souhaitez en savoir plus, restez à l’écoute pour la partie 2 de notre série d’articles sur l’accessibilité ! ;
Vous avez des questions ou des demandes concernant l’accessibilité ? Contactez-nous à a11y@glean.com — et consultez notre feuille de route publique sur l’accessibilité pour savoir 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. ;
