Création de grilles accessibles avec Kendo UI

Dans ce blog, nous verrons comment implémenter une grille accessible à l'aide des composants de grille de Kendo UI . Notez que, bien que nous utilisions un composant de Kendo pour jQuery pour cet exemple, Kendo UI comporte des composants en natif pour Angular React et Vue . ]

L’accessibilité Web signifie que les personnes handicapées peuvent utiliser le Web et la façon dont une grille est interprétée diffère d’un utilisateur à l’autre, qu’il soit visionnaire ou non. Un utilisateur voyant peut rapidement comprendre les informations, car il a un visuel de la grille entière. Un utilisateur non-voyant interagit différemment avec une grille: une technologie d'assistance, comme un lecteur d'écran, lira la grille une cellule à la fois. Par conséquent, la grille doit être conçue pour que les informations contextuelles ne soient pas perdues. Nous verrons ensuite comment la grille y parvient et est conforme aux Directives pour l'accessibilité aux contenus Web (WCAG) 2.1 .

Rendre le lecteur d'écran accessible aux en-têtes

Le critère de succès 1.3.1 de WCAG est le suivant: «Les informations, la structure et les relations véhiculées par la présentation peuvent être déterminées par programme ou sont disponibles en texte.» Pour une grille, la structure et les relations au sein des données sont principalement identifiées par leurs en-têtes. Les en-têtes sont généralement la première ligne ou la première colonne d'une grille. Les en-têtes peuvent également être distingués des autres cellules avec une police en gras ou un arrière-plan ombré. Ces indices visuels ne peuvent pas être interprétés par un utilisateur non-voyant. De plus, comme les en-têtes sont toujours visibles, un utilisateur voyant sait quelle cellule de données est associée à quel en-tête. Ce qui suit est un exemple de tableau.

Si la grille n'était pas conçue pour être accessible, la première ligne après les en-têtes serait lue comme suit: “Corvin, Câmpineanu, Roumanie, 02/09/1996, corvin-96@example.com.” Dans cet exemple, vous pourrez peut-être déchiffrer la signification de chaque information, mais vos données pourraient ne pas être aussi distinctes. Si vous disposiez d'une grille de données financières, chaque cellule serait un nombre et il serait pratiquement impossible de déterminer le sens de chaque nombre. Pour un utilisateur non-voyant, il doit y avoir un moyen d'associer l'en-tête à une cellule de données.

Pour un tableau avec une présentation simple, l'utilisation de l'élément e pour identifier les cellules d'en-tête suffit pour un lecteur d'écran. Cependant, pour les tableaux avec une mise en page complexe, l'attribut scope doit également être ajouté aux en-têtes de tableau. Les en-têtes de tableau de la grille de l'interface utilisateur Kendo ont l'attribut scope = "col" pour associer les en-têtes de colonne aux données. Grâce à ces améliorations, un lecteur d'écran va maintenant annoncer le nom de l'en-tête avec les données lorsque la colonne change. En utilisant l'exemple précédent, la deuxième ligne serait lue comme suit: «Nom, Corvin; Nom de famille; Câmpineanu; Région, Roumanie; Anniversaire, 02/09/1996; Email, corvin-96@example.com. ”

Rendre le contenu du clavier accessible

La prochaine directive en matière d'accessibilité que vous devez examiner est de rendre le contenu du clavier accessible, qui figure dans la directive 2.1 des WCAG. Certains utilisateurs ont des handicaps physiques qui les empêchent d'utiliser une souris. Ils dépendent donc du clavier 100% du temps. Même si un utilisateur n'a pas d'incapacité physique, il peut être plus pratique d'avoir la possibilité d'utiliser un clavier. Une grille de Kendo UI peut être parcourue au clavier en définissant l'attribut navigatable sur true . Cela vous permet d'utiliser les touches fléchées pour vous déplacer dans la grille. Cela facilite également la modification de la grille. Si vous avez activé la modification dans la cellule, vous pouvez appuyer sur la touche "entrée" au lieu de cliquer sur la cellule pour la mettre en mode modification.

Dans l'exemple suivant, le mode d'édition de la grille est en ligne. Mais maintenant, la commande d'édition peut être activée par le clavier.

Il existe également un gestionnaire d'événements de navigation qui peut être utilisé lorsque le mode de navigation est activé. L'événement peut être déclenché avec la souris ou le clavier. Des gestionnaires d'événements tels que onClick qui ne peuvent être déclenchés que par une limite d'accessibilité de la souris.

Aidez les utilisateurs à naviguer

La dernière norme d'accessibilité que nous allons explorer est la directive 2.4 des WCAG, selon laquelle vous devez «fournir des moyens pour aider les utilisateurs à naviguer, à trouver le contenu et à déterminer où ils se trouvent. "La grille le fait de plusieurs manières. Lorsque la grille est en mode édition, l'élément en entrée sélectionné est mis en surbrillance. Lorsque l'attribut sélectionnable est activé, la ligne sélectionnée Si pageable est activé, un téléavertisseur sera ajouté au pied de page du tableau afin que vous puissiez voir votre emplacement dans la grille. Par défaut, un bouton est associé à chaque page. , le bouton de la page en cours étant mis en surbrillance.Le pageur peut également inclure un élément d’entrée pour permettre à l’utilisateur de saisir le numéro de la page vers laquelle il doit naviguer.

[19659020] Pagination sous un tableau de données avec des boutons étiquetés 1-8. Les flèches avant et arrière permettent aux utilisateurs d'avancer ou de reculer d'une page, ou de revenir au début ou à la fin des pages. Le bouton intitulé « 1 » is highlighted in blue to show that it is selected. » title= »grid04″/>

En savoir plus sur l'accessibilité

Nous avons créé un livre blanc complet sur l'accessibilité pour les développeurs, qui couvre tout, des lois au codage en passant par les tests. Téléchargez le livre blanc:

Accessibilité pour les développeurs

Ajout de l'accessibilité à vos applications

Pour vous assurer que vous créez des applications Web accessibles, commencez par utiliser des composants des bibliothèques Kendo UI. . Nos composants sont tous conformes à WCAG et vous offrent une grande fonctionnalité, des grilles et graphiques aux programmateurs et aux sélecteurs. Prenez une longueur d'avance sur l'interface utilisateur de votre application et sur la conformité de l'accessibilité en même temps. En savoir plus:

Kendo UI