Comment rendre accessible un composant de table React (grille de données) ? Lisez cet article de blog pour un didacticiel complet par l'un de nos ingénieurs en logiciel et experts en accessibilité les plus expérimentés. Ne vous inquiétez pas si vous êtes nouveau sur le sujet, nous commencerons par définir ce qu'est l'accessibilité Web.
Construire des grilles de données accessibles pour le Web est difficile – ce sont des composants d'interface utilisateur incroyablement complexes. Les développeurs de React sont confrontés à un défi supplémentaire lors de la création de tableaux de données en raison de la façon dont React fonctionne sous le capot. Un défi spécifique à React est qu'un composant parent ne connaît pas nécessairement l'état actuel des composants enfants.
Bien qu'il puisse sembler intimidant d'entreprendre le projet de rendre accessible un composant avec autant de pièces mobiles, voici la bonne nouvelle :KendoRéagirl'équipe abeaucoupd'expériencecréation de composants Web accessibleset nous allons vous expliquer tout ce que vous devez savoir pour créer le vôtregrille de données React accessible . Nous passerons en revue toutes les exigences d'accessibilité (A11Y), ainsi que les outils qui vous aideront à les mettre en œuvre dans React. Ensuite, nous parlerons des choses spécifiques que vous devez faire pour rendre votre grille accessible aux lecteurs d'écran et à la navigation au clavier.
Remarque : Bien que nous utiliserons React pour les exemples de ce blog, la plupart du contenu ci-dessous est pertinent pour n'importe quelle grille de données Web.
Bien sûr, si vous préférez simplement ignorer le travail de création de votre propre tableau et commencer immédiatement à utiliser un magnifique tableau de données entièrement accessible dans votre application, il existe un moyen de le faire ! LeComposant de grille de données KendoReact est conforme à la section 508, ainsi que 100 % navigable au clavier. VérifiezDocumentation sur l'accessibilité de React Data Gridet voyez si cela pourrait convenir à votre projet et vous faire gagner un temps précieux.
Qu'est-ce que l'accessibilité ?
LeDéfinition MDNd'accessibilité est l'un des meilleurs, car il est simple, mais complet :Les composants accessibles peuvent être utilisés par autant d'utilisateurs que possible dans autant de contextes que possible.Lorsque nous construisons notre composant table, cette définition est notre principe directeur.
Directives d'accessibilité en un coup d'œil
L'accessibilité n'est pas seulement moralement la bonne chose à faire, mais c'est aussi une décision commerciale intelligente (permettant l'accès à de nouveaux segments de marché), ainsi qu'une exigence légale dans de nombreuses régions du monde.
Ce sont les normes, politiques, spécifications et directives les plus populaires qui régissent la manière dont les applications et sites Web accessibles doivent être créés.
- Normes et politiques :
- Spécifications techniques:
- W3C WAI-ARIA– Initiative d'accessibilité Web pour les applications Internet riches accessibles
- Lignes directrices et ressources de formation :
Outils d'accessibilité pour les développeurs
Pour aider les développeurs à se conformer aux directives d'accessibilité, il existe de nombreux outils que vous pouvez utiliser pour développer, tester et évaluer les composants et les pages pour la conformité A11Y :
- ax DevTools – Une extension de navigateur gratuite pour Chrome et Firefox qui analyse la page et répertorie les erreurs possibles, avec des outils payants supplémentaires disponibles
- Chrome– Arborescence d'accessibilité, activée à titre expérimental
- Firefox– Affichage de l'arborescence d'accessibilité et affichage de l'ordre des onglets de page
- Lecteurs d'écran les plus populaires :
- NVDA – Prend en charge Windows, gratuit avec une option de don
- Mâchoires – Prend en charge Windows, essai gratuit et abonnement payant
- Voix off – Lecteur d'écran natif pour macOS et iOS ; aucun téléchargement nécessaire – trouvez-le dans leAccessibilitésection de vos préférences système macOS ou iOS
- Narrateur – Lecteur d'écran natif pour le système d'exploitation Windows ; aucun téléchargement nécessaire – trouvez-le dans la section Facilité d'accès de vos paramètres Windows
A qui profite l'accessibilité ?
Pour mieux comprendre comment aborder le développement de grilles de données accessibles, pensons aux personnes qui les utiliseront. Comme nous l'avons mentionné précédemment, les fonctionnalités d'accessibilité ne sont pas seulement utiles à vos utilisateurs handicapés, elles profitent à tous ceux qui utilisent votre application !
Cela inclut à la fois les utilisateurs malvoyants et aveugles, ainsi que les utilisateurs souffrant de diverses formes de daltonisme.
Lecture complémentaire :Déficiences visuelles et ce dont vous avez besoin pour l'accessibilité.
- Utilisateurs avec déficiences motrices
Cela inclut les utilisateurs ayant un usage limité de leurs bras et de leurs mains, les utilisateurs avec des membres manquants ou amputés, ainsi que les utilisateurs souffrant de tremblements ou d'autres problèmes de motricité fine.
Lecture complémentaire :Handicaps moteurs et ce dont vous avez besoin pour l'accessibilité.
- Utilisateurs souffrant de troubles cognitifs
Cela inclut les utilisateurs ayant des troubles d'apprentissage, le mal des transports ou la sensibilité à la lumière, le TDAH, la dyslexie et plus encore.
Lecture complémentaire :Types de handicaps et expérience utilisateur.
- Utilisateurs avec des déficiences temporaires
Cela inclut les utilisateurs présentant des déficiences qui finiront par disparaître, comme un bras cassé ou une infection oculaire. Cela inclut également les utilisateurs avectrèsdéficiences à court terme, telles que les utilisateurs qui ne portent pas leurs lunettes ou les utilisateurs souffrant de migraine.
Certains utilisateurs préfèrent simplement naviguer dans leurs systèmes à l'aide du clavier ou de la voix, car ces méthodes sont plus rapides et plus efficaces pour eux.
Comment créer un composant de table React accessible
Lorsque vous codez une table de données React accessible, vous devez être conscient de deux scénarios principaux :
- Lecteurs d'écran– Selon leEnquête sur les lecteurs d'écran Web AIM 2021 , l'utilisateur typique des lecteurs d'écran Jaws ou NVDA est malvoyant. Ces lecteurs d'écran disposent de modes de navigation particuliers (parcourir et se concentrer) qui ignorent toute navigation basée sur JavaScript.
- Clavier uniquement – Rendre une application navigable au clavier implique d'activer la navigation par onglets pour basculer entre les composants de la page. Les composants complexes tels que les grilles de données nécessitent une navigation au clavier personnalisée avec une seule tabulation.Taquet de tabulation uniquesignifie que le composant peut être ignoré en appuyant sur une seule touche de tabulation et que l'utilisateur peut continuer la navigation sur le reste de la page.
Implémentation de la prise en charge des lecteurs d'écran pour votre grille de données React
L'accessibilité du lecteur d'écran pour votre grille de données peut être obtenue en utilisant une combinaison de
éléments. Comme mentionné ci-dessus, les lecteurs d'écran ont leurs propres modes de navigation spéciaux ; dans cette section, nous passerons en revue le code HTML que vous devez écrire pour vous assurer que votre composant fonctionne bien avec ces modes de navigation.
Les instructions ci-dessous s'appliquent à toutes les grilles Web, mais dans les exemples ci-dessous, nous utiliserons leGrille de données de réaction cela fait partie de la bibliothèque KendoReact. Nous allons construire notre grille de données en utilisant deux
éléments, un pour l'en-tête et un pour le corps. Cette approche garantit la rétrocompatibilité, prenant en charge toutes les fonctionnalités des anciens navigateurs.
Pour une expérience optimale sur différents navigateurs et lecteurs d'écran, nous vous suggérons d'appliquer toutes lesRôles ARIAau
a également implémenté Data Grid. ARIA signifie« Applications Internet riches accessibles »,et les attributs ARIA existent pour ajouter du contexte aux éléments HTML non sémantiques, de sorte que des widgets plus complexes et des outils personnalisés puissent toujours être utilisés de manière accessible.
- Ajouter une racine
Élément de grille.
- Ajouter
role="grille"attribut.
- Ajouter
air-col = ""attribut avec le nombre actuel de colonnes.
- Ajouter
aria-rowcount=""attribut avec le nombre actuel de lignes.
- Ajoutez les lignes d'en-tête dans
ne contenant que
élément.
- Ajouter
role="ligne"attribut.
- Ajouter
aria-rowindex=""attribut avec l'index actuel de la ligne, à partir de 1.
- Ajoutez les cellules d'en-tête comme
éléments.
- Ajouter
rôle="en-tête de colonne"attribut.
- Ajouter
aria-colindex = ""attribut avec l'index actuel de la colonne, à partir de 1.
- Ajouter
aria-sort="ascendant|descendant|aucun"attribut si la colonne est triable.
- Ajouter
aria-selected="vrai|faux"si la grille prend en charge la sélection.
- Ajouter les lignes de corps dans le nouveau
ne contenant que
élément.
- Ajouter
role="ligne"attribut.
- Ajouter
aria-rowindex=""attribut avec l'index actuel de la ligne, en commençant par le dernier index des lignes d'en-tête.
- Ajouter les cellules du corps comme
éléments.
- Ajouter
rôle="cellule de grille"attribut.
- Ajouter
aria-colindex = ""attribut avec l'index actuel de la colonne, à partir de 1.
- Ajouter
aria-selected="vrai|faux"si la grille prend en charge la sélection.
- Marquez tous les éléments entre les niveaux d'éléments ci-dessus avec
role="présentation" pour les désigner comme purement présentationnels et liés à l'interface utilisateur. Cela indique au lecteur d'écran qu'il n'y a aucune information dans ces éléments, et il peut les supprimer en toute sécurité de l'arborescence d'accessibilité.
Maintenant que vous avez suivi les étapes ci-dessus, votre React Grid est parfaitement accessible aux lecteurs d'écran. Cela peut être vu par exemple dans la console « visualiseur vocal » du lecteur d'écran NVDA lors de la navigation de l'en-tête au corps de la grille de données :
Vous pouvez également vérifier si vous avez correctement implémenté les étapes ci-dessus en ouvrant le tableau dansarbre d'accessibilité voir. Cela devrait ressembler à la capture d'écran suivante :
Mise en œuvre de l'accessibilité de la grille via la navigation au clavier
Concentrons-nous maintenant sur le deuxième groupe d'utilisateurs que nous souhaitons autoriser à accéder à notre grille de données React : les personnes qui naviguent dans notre grille en utilisant uniquement leur clavier. Cela implique deux tâches principales : la mise en œuvre d'une navigation à tabulation unique et la gestion de l'index de tabulation itinérant.
Implémentation de composants navigables à tabulation unique
Selon les directives WAI-ARIA, notre grille de données doit être à tabulation unique afin que les éléments puissent être rapidement ignorés d'une simple pression sur une touche et que la navigation ne soit pas maladroite ou difficile pour nos utilisateurs.
La première étape pour y parvenir est de rendre un seul élément interactif focalisable avectabindex="0"et les autres non focalisables avectabindex="-1".
Vous pouvez voir à quoi cela ressemble dans la capture d'écran suivante de Firefox avec l'option "Afficher l'ordre de tabulation" activée :
Gestion du tabindex itinérant dans React
"Roving Tabindex" est une technique où nous maintenons l'état de focus du composant en déplaçant le focus ettabindex entre les éléments interactifs du conteneur. Cela peut être fait en écoutant leonKeyDown événement du conteneur afin de répondre aux événements du clavier. Voici un exemple basé sur la capture d'écran précédente :
- Premier élément interactif,
Nomen-tête de colonne, atabindex="0"et se concentrer.
- L'utilisateur appuie
Flèche vers le bas touche du clavier. En réponse à l'événement :
- Faire, construire
Chaïcellule avectabindex="0".
- Se concentrer
Chaïcellule.
- Faire, construire
Nomcellule avectabindex="-1".
Cela peut être difficile. Une approche naïve consisterait à implémenter la navigation au clavier en dehors de React, en utilisant du JavaScript vanille. Cependant, cette approche n'est pas un choix stable ou durable si vos composants sont (correctement) écrits en utilisant le style déclaratif React. En effet, React peut modifier dynamiquement l'arborescence DOM sous-jacente, ce qui signifie que votre état de focus sera perdu lorsque l'interface utilisateur changera. Une meilleure solution consiste à utiliser l'API de contexte React pourcommuniquer les changements de position de mise au point aux nœuds de navigation feuille . Cette approche doit également utiliser les méthodes de cycle de vie React et les crochets à l'intérieur de la grille de données pour maintenir le focus et la position de navigation entre les rendus.
Test d'accessibilité
Votre travail n'est pas vraiment terminé si vous n'avez pas testé si les fonctionnalités d'accessibilité que vous avez implémentées fonctionnent réellement et fonctionnent bien. Il est préférable de tester votre solution en combinant une analyse statique (à l'aide d'outils tels que ax DevTools) et des tests manuels (à l'aide d'un lecteur d'écran et d'un clavier pour naviguer dans votre composant). Si nous exécutons l'outil hache sur leGrille de données KendoReactavec un thème à contraste élevé, le résultat ressemble à ceci :
Comme vous le voyez, il n'y a qu'une seule erreur : la région de défilement n'a pas d'accès au clavier. C'est un bon exemple d'erreur de faux positif ! Comme nous avons implémenté la navigation au clavier avec un itinéranttabindexil a été déplacé dynamiquement vers la zone de défilement.
Pour les tests manuels, je suggère de commencer par NVDA. Il est gratuit et propose quelques options utiles pour faciliter encore plus le test de votre implémentation :
- Console de visualisation vocale : Cette section contient un enregistrement écrit de tout ce qui est lu par le lecteur d'écran. Il peut être activé en cliquant avec le bouton droit sur l'icône de la barre d'état système de NVDA et en sélectionnantOutils->Visionneuse de discours.
- Mise en évidence : Ceci est utile pour voir la position de navigation exacte, ainsi que pour aider à distinguer les modes de navigation (bordure rouge) et de mise au point (bordure bleue). Il peut être activé en cliquant avec le bouton droit sur l'icône de la barre d'état système de NVDA et en sélectionnantPréférences->Réglages->Vision->Activer la mise en surbrillance.
Prêt à mettre à jour votre grille de données pour une accessibilité complète ?
Vous devriez maintenant avoir un bon aperçu de ce qu'implique l'accessibilité sur le Web, ainsi que toutes les informations dont vous avez besoin pour rendre votre composant de table React accessible aux lecteurs d'écran et à la navigation au clavier.
Construire une grille de données React et la rendre accessible sont des tâches complexes et chronophages. Il existe une alternative : vous pouvez utiliser des composants prêts à l'emploi qui ont déjà une accessibilité intégrée. Une excellente option est leBibliothèque de composants d'interface utilisateur KendoReactqui comprend plus de 100 composants accessibles, dont un puissantComposant de grille de données React.
Quel que soit votre choix, vos utilisateurs vous remercieront de privilégier l'accessibilité et de rendre leur expérience intuitive et accessible, quelle que soit la façon dont ils naviguent dans votre application !
Source link
