Comment activer la navigation au clavier pour la table material-ui

Aug 18 2020

J'ai une application de réaction créée avec Material-UI. L'utilisateur a demandé d'activer la navigation au clavier pour l'ensemble du site Web. Je ne parviens pas à naviguer dans les tableaux avec le clavier sur ce site Web. Ma table ressemble à quelque chose commehttps://material-ui.com/components/tables/#fixed-header. Je veux monter et descendre d'une rangée en appuyant sur "flèche vers le haut" et "flèche vers le bas" sur le clavier. Comment puis-je l'activer ?

Réponses

1 FED Sep 10 2020 at 18:42

La navigation au clavier fait généralement référence à la possibilité de se concentrer sur et de déclencher des éléments interactifs tels que des liens, des boutons, des sélecteurs de date, des modaux, etc. en utilisant uniquement les commandes du clavier. Un tableau n'est pas un élément interactif donc pas focusable par le clavier.

La demande de votre utilisateur peut avoir pour but de s'assurer que le site Web respecte les Directives pour l'accessibilité du contenu Web . Les tables Material UI sont sémantiquement marquées comme des tables avec une ligne d'en-tête de table, donc les bases sont là pour répondre à ce critère.

Si vous activez un lecteur d'écran (comme VoiceOver sur Mac ou NVDA sur Windows) vous pourrez alors naviguer dans le tableau avec les touches fléchées et chaque cellule sera annoncée par le lecteur d'écran.

  • https://webaim.org/techniques/tables/data