En utilisant les éléments HTML sémantiques appropriés, vous pourrez peut-être répondre à la plupart ou à la totalité de vos besoins d'accès au clavier. Ainsi, vous passerez moins de temps à manipuler tabindex, et vos utilisateurs seront plus satisfaits.
Prise en charge sans frais du clavier (et une meilleure expérience mobile)
Un certain nombre d'éléments interactifs intégrés sont compatibles avec la sémantique et le clavier appropriés. 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 au format libre.
On oublie facilement que ces éléments sont compatibles avec le clavier intégré.
Vous trouverez ci-dessous quelques exemples d'éléments à explorer. Au lieu d'utiliser la souris, utilisez le clavier pour les manipuler. Vous pouvez utiliser TAB (ou SHIFT +
TAB) pour passer d'une commande à l'autre, et utiliser les touches fléchées et les 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, souvent, ces éléments intégrés ont des interactions uniques sur mobile. Essayer de reproduire vous-même ces interactions sur mobile représente beaucoup de travail. C’est une autre bonne raison de s’en tenir aux éléments intégrés chaque fois que possible.
Utiliser 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.
Mais pour être considéré comme accessible, un bouton doit:
- être sélectionnable avec le clavier ;
- Assistance en cours de désactivation
- Accepter les touches
ENTERouSPACEpour effectuer une action - être correctement annoncée par un lecteur d'écran ;
Un bouton div ne contient aucun de ces éléments. Cela signifie que vous devez écrire du code supplémentaire pour reproduire ce que l'élément button vous offre sans frais.
Par exemple, les éléments button ont une astuce appelée *activation des 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 devez donc écrire du code supplémentaire pour écouter l'événement keydown, vérifier que le code de clavier est ENTER ou SPACE, puis exécuter votre gestionnaire de clics. Aïe !
Cela représente beaucoup de travail supplémentaire !
Comparez la différence dans cet exemple. TAB pour l'un ou l'autre, et utilisez ENTER et SPACE pour tenter de cliquer dessus.
Si votre site ou votre application existants comportent des boutons div, envisagez de les remplacer par des éléments button. button est facile à styliser et offre de nombreuses fonctionnalités d'accessibilité.
Liens et boutons
Un autre anti-modè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 une certaine forme d'activation des clics synthétiques. Alors, que 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 pour accéder à une nouvelle page, utilisez
<a>. Cela inclut les applications Web monopages qui chargent le nouveau contenu et mettent à jour l'URL à l'aide de l'API History.
En effet, les boutons et les liens sont annoncés différemment par les lecteurs d'écran. L'utilisation de l'élément approprié permet aux utilisateurs de lecteurs d'écran de savoir à quel résultat s'attendre.
À FAIRE: Site DevSite – Évaluation Think and Check
Attribuer un style
Certains éléments intégrés, en particulier <input>, peuvent être difficiles à styliser.
Avec un peu de style CSS, vous pourrez peut-être contourner certaines de ces limites. Le projet WTFForms (au nom hilarant) contient un exemple de feuille de style qui présente un certain nombre de techniques permettant de styliser certains des éléments intégrés les plus complexes.
É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. Parcourez le 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'ait pas d'équivalent en HTML.
Pas de problème ! Poursuivez votre lecture pour découvrir comment ajouter la prise en charge du clavier aux commandes interactives personnalisées à l'aide de tabindex.