Utiliser du code HTML sémantique pour faciliter l'utilisation du clavier

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. Autrement dit, vous passez moins de temps à manipuler tabindex et vos utilisateurs sont plus satisfaits.

Prise en charge du clavier sans frais (et meilleure expérience mobile)

Il existe un certain nombre d'éléments interactifs intégrés avec une sémantique appropriée et une compatibilité avec le clavier. 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 d'oublier la prise en charge du clavier intégré que ces éléments offrent. 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 ENTER ou SPACE pour effectuer une action
  • être énoncées 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 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 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é.

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 une forme d'activation de clic synthétique. Alors, lequel devez-vous choisir ?

  • Si un clic sur l'élément entraîne une action sur la page, utilisez <button>.
  • Si un clic sur l'élément redirige 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 pouvez 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.