En utilisant les éléments HTML sémantiques appropriés, vous pourrez peut-être répondre à la plupart de vos besoins d'accès au clavier, voire à tous. Vous passerez ainsi moins de temps à modifier 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 de les utiliser avec le clavier. 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, comme 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 ;
Un bouton div ne comporte 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 sans frais.
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 clics à un button, il s'exécute lorsque l'utilisateur appuie 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 contrôler, et utilisez ENTER et SPACE pour essayer 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 ou 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 acceptent une forme d'activation de clic synthétique. Quelle option choisir ?
- Si un clic sur l'élément effectue une action sur la page, utilisez
<button>. - Si un clic sur l'élément transfère l'utilisateur vers une nouvelle page, utilisez
<a>. Cela inclut les applications Web à page unique qui chargent du nouveau contenu 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 à l'aide de la touche 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.