Meilleures pratiques d'accessibilité au clavier
Une technologie d'assistance que nous avons tous à notre disposition est le clavier. Avec le clavier seul, n'importe qui devrait pouvoir naviguer et effectuer une tâche disponible en ligne, tout comme le ferait un utilisateur de souris.
Pour certaines personnes, en particulier celles qui ont une déficience motrice et qui ne peuvent pas utiliser une souris ou un trackpad, le clavier est la principale méthode de navigation sur le Web et d'interaction avec les interfaces utilisateur.
Ce qui est génial avec le clavier, c'est que la plupart d'entre nous sont probablement assez familiers avec cet appareil, ce qui rend les tests avec un clavier seul assez faciles.
Jetons un coup d'œil à quelques façons d'assurer l'accessibilité pour les utilisateurs du clavier uniquement.
Indicateur de mise au point
L'indicateur de focus est l'une des aides les plus élémentaires pour aider les utilisateurs à naviguer dans une application avec facilité et confiance (et est intégré à chaque site par défaut).
Qu'est-ce que l'indicateur de mise au point ? C'est l'indicateur visuel de l'endroit où vous vous trouvez actuellement sur une page lorsque vous naviguez uniquement au clavier. Considérez l'indicateur de focus comme le curseur de la souris pour le clavier !
Chargez votre site préféré et commencez à appuyer sur la touche Tab . Y a-t-il une indication de l'endroit où se trouve actuellement le curseur sur la page ? Si vous êtes dans Chrome ou Safari, l'indicateur par défaut est un contour bleu, où Firefox et Internet Explorer/Edge présentent un contour noir en pointillés.
Pour les personnes handicapées motrices ou toute autre déficience (temporaire ou permanente) qui empêche l'utilisation de la souris, la navigation avec le clavier est la deuxième meilleure option.
De plus, ceux qui se considèrent comme des "utilisateurs expérimentés" qui préfèrent le clavier à l'utilisation de la souris, comme remplir de longs formulaires, en bénéficieront également grandement.
Lorsque vous utilisez la touche Tab sur un site, le curseur du clavier apparaît et se déplace d'un élément HTML à l'autre. L'utilisation de Shift + Tab déplace le curseur du clavier vers l'arrière dans la page. Les éléments mis en évidence sont considérés comme "naturellement" focalisables. Les éléments tels que les liens, les boutons, les entrées de formulaire, etc. reçoivent tous le focus du clavier par défaut et doivent être mis en surbrillance lorsque le curseur passe de l'un à l'autre.
Si vous ne voyez pas le curseur sur la page, vous avez un problème d'accessibilité
Parfois, lors de la conception ou du développement d'un projet, il est demandé de retirer l'anneau indicateur de mise au point. Ceci est généralement le résultat de l'affichage du contour lors de l'interaction de la souris, ce qui peut être considéré comme un résultat esthétique négatif.
Ne fais pas ça…
*:focus { outline: none; } Sans indicateur de focus, un utilisateur voyant uniquement au clavier ne saura pas où il se trouve sur la page lors de la navigation dans le contenu. Il s'agit d'un problème d'accessibilité important où le maintien de l'indicateur de focus par défaut aura un impact énorme sur la convivialité de votre site.
Bien qu'il soit fortement recommandé de ne pas supprimer l'indicateur par défaut, il existe quelques solutions de contournement qui pourraient être utilisées en remplacement et dont nous discuterons bientôt.
Indicateur de mise au point personnalisée
En utilisant CSS, il est possible de créer votre propre indicateur de focus. Avec un peu de code comme…
*:focus { outline: solid 3px red; }
… vous pouvez créer un indicateur de focus personnalisé. Cela place un contour rouge uni autour des éléments focalisables.
Lors de la mise en œuvre d'un plan personnalisé, il y a quelques points à garder à l'esprit :
- Assurez-vous que le rapport de contraste de l'indicateur par rapport à l'arrière-plan est élevé. Si les gens ne peuvent pas voir l'indicateur de mise au point, son objectif est perdu.
- Rendez-le cohérent. Étant donné qu'un indicateur de focus personnalisé sera inattendu lors de la première visite, c'est une bonne idée de garder les choses cohérentes et prévisibles tout au long de l'expérience utilisateur du site.
Détecter l'utilisation du clavier/souris
De nombreux travaux ont été réalisés récemment sur la détection du moment où quelqu'un utilise une souris ou un clavier pour naviguer dans le contenu du site. Ce faisant, les concepteurs sont en mesure de créer un indicateur de mise au point personnalisé et très visible pour les utilisateurs de clavier uniquement. Les utilisateurs de souris seraient libres de se fier uniquement au curseur de la souris comme indicateur.
Cette technique n'est pas encore intégrée directement dans les navigateurs. Cependant, il existe des extraits de code tiers (également appelés "polyfill") disponibles pour obtenir cette fonctionnalité.
Deux d'entre eux méritent d'être vérifiés :
Critères de réussite WCAG
Cela revient à WCAG 2.4.7 Focus Visible qui stipule :
"Toute interface utilisateur utilisable par clavier a un mode de fonctionnement dans lequel l'indicateur de focus du clavier est visible."
Ordre de mise au point
Si vous connaissez CSS Flexbox ou Grid, vous savez peut-être qu'il est facile de manipuler l'ordre du contenu en utilisant seulement quelques propriétés CSS. Par exemple, si vous devez déplacer un conteneur de barre droite vers le côté gauche de l'écran, cela peut être accompli en ajoutant une ligne de CSS.
Le problème ici est que lorsque quelqu'un utilise le clavier, le lecteur d'écran ou toute autre entrée qui n'est pas une souris, l'indicateur de mise au point peut sauter sur l'écran de manière inattendue. En déplaçant le conteneur de la barre de droite vers la gauche via CSS, le code HTML utilisé pour générer le contenu de la page reste à la même position. En conséquence, l'ordre de focus du clavier passerait de la barre d'en-tête supérieure au conteneur de contenu principal à droite, puis de nouveau en haut à gauche de la page, enfin au contenu du pied de page.
Assurez-vous que l'ordre visuel du contenu correspond à l'ordre HTML
C'est un problème lorsqu'il s'agit de personnes malvoyantes qui dépendent d'un logiciel de zoom ou d'une personne ayant une déficience cognitive qui peut devenir confuse à cause du mouvement inattendu d'une partie de l'écran à une autre. Pour cette seule raison, il est recommandé de s'assurer que l'ordre visuel du contenu correspond à l'ordre HTML que le navigateur interprète lors du chargement de la page. Vous créerez ainsi une expérience utilisateur beaucoup plus confortable et prévisible.
Critères de réussite WCAG
Cela revient à WCAG 2.4.3 : Focus Order qui stipule :
"Si une page Web peut être parcourue de manière séquentielle et que les séquences de navigation affectent le sens ou le fonctionnement, les composants focalisables reçoivent le focus dans un ordre qui préserve le sens et l'opérabilité."
Gestion des focus
La gestion du focus est une méthode utilisée pour déplacer délibérément et délibérément le curseur du clavier d'un élément à un autre au nom de l'utilisateur. Cette technique ne doit être utilisée qu'en cas d'absolue nécessité afin de ne pas créer plus de travail pour l'utilisateur lorsqu'un changement d'orientation inattendu s'est produit.
Un exemple de gestion du focus que nous obtenons gratuitement du navigateur est que lorsque nous activons la touche Tab dans un champ de formulaire, le focus est automatiquement envoyé au champ suivant de l'ensemble. Ou, lors du déplacement d'un lien à l'autre, le focus se déplace du haut du document vers le bas. Lors de l'utilisation d'éléments natifs, le navigateur s'occupe de déplacer et de gérer la position du focus pour nous.
Cependant, lorsqu'il s'agit de créer un contrôle ou un widget non natif, comme une fenêtre modale que nous examinerons plus en détail ultérieurement, nous devons gérer la position du focus au nom de l'utilisateur.
Pour ce faire, nous utilisons l'attribut tabindex .
L'attribut tabindex
L'attribut tabindex peut être appliqué à n'importe quel élément HTML afin d'aider à gérer le focus, mais son utilisation doit être limitée à quelques cas d'utilisation.
Regardons les valeurs que nous pouvons attribuer à cet attribut et le résultat de chacun.
tabindex="-1"
La valeur tabindex="-1" permet à un élément non focalisable de recevoir le focus par programmation via JavaScript, mais n'ajoute pas l'élément à l'ordre de focus naturel. Cela signifie que lorsque quelqu'un navigue avec la touche Tab , tout élément avec une valeur tabindex de -1 ne recevra pas le focus.
Par exemple, lors de l'ouverture d'une fenêtre modale, utilisez JavaScript pour appliquer l' tabindex="-1" au conteneur de fenêtre modale, puis appelez la méthode focus() du conteneur pour appliquer le focus clavier. Cela permet à l'utilisateur de Tabuler vers l'avant à partir de ce point, découvrant le contenu de la fenêtre modale comme prévu.
tabindex="0"
La valeur tabindex="0" permet à un élément non focalisable de recevoir le focus et inclut l'élément dans l'ordre de focus naturel. Avec cet ensemble sur un élément non focalisable, lorsque quelqu'un navigue via la touche Tab , cet élément avec son attribut tabindex défini sur une valeur de 0 recevra le focus.
Par exemple, s'il était nécessaire d'attacher un gestionnaire d'événements de clic à quelque chose comme un élément div , l'application tabindex="0" permettrait à la div de recevoir le focus du clavier lors de la navigation dans le contenu de la page.
tabindex="1" ou supérieur
Toute valeur tabindex supérieure à 0 est considérée comme un anti-modèle et doit être évitée. Par exemple, si un élément présentait tabindex="5" , cela enverrait d'abord le focus à cet élément lors de la navigation dans le contenu de la page, puis lors de la navigation, le focus reviendrait au premier élément dans l'ordre de tabulation naturel.
Comme indiqué précédemment, le navigateur gère automatiquement la gestion du focus entre les éléments focalisables nativement. Dans cet esprit, comptons sur le navigateur pour gérer organiquement le focus tel que déterminé par l'ordre des éléments dans le document.
Évitez d'ajouter
tabindex="0"partout !
Lorsqu'il s'agit de naviguer dans des éléments non focalisables, tels que du contenu en texte brut, des en-têtes ou des images, il est important de noter que les technologies d'assistance, telles que les lecteurs d'écran (dont nous parlerons plus en détail ultérieurement), disposent d'une fonctionnalité intégrée pour lire et consommer ces types de contenu.
Après avoir appris à utiliser la touche Tab pour se déplacer dans une page Web et l'attribut tabindex , vous pourriez être tenté de placer tabindex="0" sur tout afin de vous assurer qu'un utilisateur de lecteur d'écran peut Tab sur ces éléments. Veuillez vous abstenir de le faire. Ceci est considéré comme un anti-modèle car cela entraînera plus de travail pour les utilisateurs utilisant uniquement le clavier pour se déplacer et consommer le contenu qui les intéresse.
À quelques exceptions près, seuls les éléments devant recevoir l' tabindex="0" sont ceux auxquels une action est appliquée, comme un gestionnaire d'événements de clic JavaScript. Laissez tous les autres éléments en dehors de l'ordre de tabulation naturel, sinon les utilisateurs utilisant uniquement le clavier devraient appuyer plusieurs fois sur la touche Tab juste pour atteindre les liens au bas de la page, ce qui entraînerait une expérience utilisateur frustrante.
Une note rapide sur l'attribut de autofocus au point automatique
Semblable à l'utilisation de l'attribut tabindex avec une valeur supérieure à 1 , l'attribut autofocus se comporte de la même manière, sauf que quel que soit l'élément doté de cet attribut, cet élément recevra automatiquement le focus lors du chargement.
L'attribut de autofocus est un peu comme tomber dans un film d'environ 15 minutes ; vous pouvez en quelque sorte comprendre ce qui se passe, mais vraiment, vous auriez aimé être à l'heure pour regarder le film depuis le début. Maintenant, vous êtes confus à propos de ce qui se passe, vous avez faim de ne pas pouvoir attraper du pop-corn et vous vous sentez un peu ennuyé. C'est à cela que ressemble l'expérience de la mise au autofocus pour les utilisateurs de lecteurs d'écran (sauf peut-être la partie affamée, mais bon, on ne sait jamais.)
Pour cette raison, la mise au autofocus est considérée comme un anti-motif et doit être évitée.