En utilisant les bons éléments HTML sémantiques, vous pourrez peut-être répondre à la plupart ou à la totalité de vos besoins d'accès au clavier. Vous passerez ainsi moins de temps à manipuler tabindex et vos utilisateurs seront plus satisfaits.
Prise en charge du clavier sans frais (et meilleure expérience mobile)
De nombreux éléments interactifs intégrés sont disponibles, avec une sémantique et une compatibilité avec le clavier appropriées. Les plus utilisés par les développeurs sont les suivants :
De plus, les éléments avec l'attribut contenteditable sont parfois utilisés pour la saisie de texte libre.
Il est facile de passer à côté de la compatibilité avec le clavier intégrée à ces éléments.
Vous trouverez ci-dessous quelques exemples d'éléments à explorer. Au lieu d'utiliser votre souris, essayez d'utiliser votre clavier pour les utiliser. Vous pouvez utiliser TAB (ou SHIFT +
TAB) pour passer d'une commande à l'autre, et les touches fléchées et des touches telles que ENTER et SPACE pour manipuler leurs valeurs.
Si vous avez un téléphone à portée de main, vous pouvez constater que ces éléments intégrés ont souvent des interactions uniques sur mobile. Essayer de reproduire vous-même ces interactions mobiles demande beaucoup de travail. C'est une autre bonne raison de s'en tenir aux éléments intégrés dans la mesure du possible.
Utilisez button à la place de div.
Un anti-modèle d'accessibilité courant consiste à traiter un élément non interactif, tel qu'un div ou un span, comme un bouton en y ajoutant un gestionnaire de clics.
Cependant, pour être considéré comme accessible, un bouton doit :
- être sélectionnable au clavier ;
- Assistance désactivée
- Prise en charge des touches
ENTERouSPACEpour effectuer une action - être énoncés correctement par un lecteur d'écran ;
Le bouton div ne contient aucun de ces éléments. Cela signifie que vous devrez écrire du code supplémentaire pour reproduire ce que l'élément button vous fournit gratuitement.
Par exemple, les éléments button disposent d'une astuce intéressante appelée "activation de clics synthétiques". Si vous ajoutez un gestionnaire de "clic" à un button, il s'exécutera lorsque l'utilisateur appuiera sur ENTER ou SPACE. Un bouton div ne dispose pas de cette fonctionnalité. Vous devrez donc écrire du code supplémentaire pour écouter l'événement keydown, vérifier que le code de touche est ENTER ou SPACE, puis exécuter votre gestionnaire de clics. Aïe !
C'est beaucoup de travail supplémentaire !
Comparez les différences dans cet exemple. TAB pour les deux commandes, et utilisez ENTER et SPACE pour tenter de cliquer dessus.
Si votre site ou application existante comporte des boutons div, envisagez de les remplacer par des éléments button. button est facile à styliser et offre de nombreux avantages en termes d'accessibilité.
Liens et boutons
Un autre antimodèle courant consiste à traiter les liens comme des boutons en leur associant un comportement JavaScript.
<a href="#" onclick="// perform some action">
Les boutons et les liens sont compatibles avec l'activation de clics synthétiques. Alors, lequel devez-vous choisir ?
- Si un clic sur l'élément effectue une action sur la page, utilisez
<button>. - Si l'utilisateur clique sur l'élément, il est orienté vers une nouvelle page, puis utilisez
<a>. Cela inclut les applications Web monopages qui chargent de nouveaux contenus et mettent à jour l'URL à l'aide de l'API History.
En effet, les lecteurs d'écran annoncent les boutons et les liens différemment. L'utilisation de l'élément approprié aide les utilisateurs de lecteurs d'écran à savoir à quoi s'attendre.
À FAIRE : DevSite - Évaluation "Penser et vérifier"
Attribuer un style
Certains éléments intégrés, en particulier <input>, peuvent être difficiles à styliser.
Avec un peu de CSS intelligent, vous pourrez peut-être contourner certaines de ces limites. Le projet WTFForms (au nom hilarant) contient un exemple de feuille de style qui illustre un certain nombre de techniques permettant de styliser certains des éléments intégrés les plus difficiles.
Étapes suivantes
L'utilisation d'éléments HTML intégrés peut considérablement améliorer l'accessibilité de votre site et réduire considérablement votre charge de travail. Essayez de parcourir votre site avec la touche de tabulation et recherchez les commandes qui ne sont pas compatibles avec le clavier. Si possible, remplacez-les par des alternatives HTML standardisées.
Il peut arriver que vous trouviez un élément qui n'a pas de contrepartie en HTML.
Pas de problème ! Lisez la suite pour découvrir comment ajouter la prise en charge du clavier aux commandes interactives personnalisées à l'aide de tabindex.