Implémenter l’accessibilité du clavier
Pour implémenter efficacement l’accessibilité du clavier, suivez ces recommandations :
Vérifiez que les spécifications sont complètes
Avant de commencer le développement, il est essentiel d’inspecter minutieusement les spécifications de conception. Posez des questions telles que :
- Puis-je également appeler le bouton avec Espace ?
- Que se passe-t-il si j’appuie sur Ctrl + F6 ?
- Où va le focus après avoir fermé la fenêtre contextuelle ?
- À quoi ressemble l’indicateur visuel focus clavier ?
Cette approche proactive de l’analyse de la façon dont chaque élément interactif doit fonctionner permet d’identifier les problèmes d’accessibilité potentiels au début, ce qui facilite l’implémentation de solutions pendant le développement.
Créer une bonne conception technique
Le développement d’une conception technique bien composante est essentiel pour faciliter l’accessibilité. Une approche basée sur des composants permet une implémentation réutilisable et cohérente des fonctionnalités accessibles dans l’ensemble de l’application. Cette conception modulaire garantit que les considérations d’accessibilité sont intégrées à chaque composant, ce qui facilite la maintenance et la mise à jour.
Utiliser des contrôles sémantiques
Dans la mesure du possible, utilisez des contrôles HTML sémantiques, tels que <bouton>, <a> et <entrée>, car ils sont intrinsèquement accessibles. Les éléments HTML sémantiques sont fournis avec des fonctionnalités de clavier intégrées. Les technologies d’assistance les reconnaissent automatiquement, ce qui réduit le besoin d’implémentations d’accessibilité personnalisées pour votre produit.
Lors de la création de contrôles personnalisés, définissez le tabindex sur 0 ou 1 pour garantir une gestion appropriée du focus. Évitez d’utiliser des valeurs tabindex positives, car elles peuvent créer un ordre de focus imprévisible. Les contrôles personnalisés doivent être conçus pour être opérables au clavier et doivent inclure des rôles et des attributs ARIA (Accessible Rich Internet Applications) appropriés pour fournir un contexte supplémentaire aux technologies d’assistance. ARIA ne doit être utilisé que lors de l’utilisation du code HTML sémantique, et l’expérience d’accessibilité par défaut utilisant ces sémantiques n’est pas suffisante pour fournir une expérience équitable à l’utilisateur.
<button>End Session</button>
<a href="https://support.microsoft.com/en-us/office/6f7772b2-2f33-4bd2-8ca7-dae3b2b3ef25">Learn more</a>
<label for="shouldUseSubtitlesInput">Always Use Subtitles</label>
<input type="checkbox" id="shouldUseSubtitlesInput" checked>
Utiliser des gestionnaires d’événements indépendants de l’appareil
Utilisez des gestionnaires d’événements indépendants des appareils comme onFocus, onBlur, onChange et onSelect pour rendre votre application plus accessible sur différents appareils. Ces gestionnaires d’événements fonctionnent sur différents appareils d’entrée, notamment les claviers, les souris et les écrans tactiles, ce qui offre une expérience utilisateur cohérente. Si vous devez utiliser des gestionnaires d’événements dépendants de l’appareil, incluez des gestionnaires d’événements souris et clavier tels que onMouseOver, onMouseOut, onHover, onKeyUp et onKeyPress pour répondre à tous les utilisateurs. Utilisez la méthode .focus() pour définir le focus clavier par programme, et incluez toujours un indicateur visuel pour le focus clavier pour aider les utilisateurs à naviguer plus facilement dans votre application.
Définir le focus clavier
Utilisez la méthode .focus() pour définir le focus clavier si nécessaire et inclure un indicateur visuel pour l’élément prioritaire. Les indicateurs de focus visibles sont essentiels pour l’accessibilité du clavier, car ils aident les utilisateurs à identifier l’élément actuellement actif et prêt à l’interaction. Les utilisateurs qui naviguent au clavier s’appuient sur des indications visuelles pour comprendre où se trouve le focus et les actions qu’ils peuvent effectuer ensuite. Sans indicateurs de focus clairs, les utilisateurs peuvent devenir désorientés et difficiles à interagir avec le contenu efficacement. Des repères visuels clairs tels que des contours ou des mises en surbrillance aident les utilisateurs à naviguer et à interagir plus facilement avec le contenu. Une approche courante consiste à ajouter un contour ou une bordure visible à un élément lorsqu’il obtient le focus. Par exemple, dans les applications web, vous pouvez utiliser la pseudo-classe :focus dans CSS pour appliquer un plan visible aux boutons, liens et champs de formulaire. Cela garantit que lorsqu’un élément reçoit le focus, il est visuellement distinct des autres éléments de la page. Évitez le style automatique, car il ne rend pas de la même manière dans les différents navigateurs. Enfin, assurez-vous que le focus clavier ne change pas de manière inattendue. Par exemple, si le focus se trouve sur le premier onglet du volet et que vous appuyez sur la flèche vers le bas, il ne doit pas accéder au volet d’aide et perturber la navigation.
Utiliser des éléments sémantiques
Il est également important d’utiliser des éléments HTML sémantiques et des rôles et attributs ARIA si nécessaire pour améliorer l’accessibilité du clavier. Ces éléments définissent non seulement le contenu, mais fournissent également des informations importantes sur le rôle et l’objectif de différentes parties d’une page web. L’utilisation du code HTML sémantique est essentielle pour créer du contenu numérique accessible et convivial. Les éléments HTML sémantiques, tels que <button>, <a>, et <form>, sont intrinsèquement accessibles au clavier et fournissent des informations significatives aux technologies d'assistance. Par exemple, un <élément de bouton> peut être activé à l’aide des touches Entrée ou Espace, et un<> élément (ancre) peut être accédé et activé à l’aide des touches Tab et Entrée. Ces éléments sont conçus pour être opérables via le clavier sans nécessiter de script ou de personnalisation supplémentaires. En plus de l’accessibilité du clavier, les éléments HTML sémantiques fournissent des informations significatives pour les technologies d’assistance telles que les lecteurs d’écran. Par exemple, un lecteur d’écran peut annoncer qu’un <bouton est un bouton> et qu’un <formulaire est un formulaire> , ce qui permet aux utilisateurs de comprendre la structure et les fonctionnalités du contenu.
Les rôles et attributs ARIA sont des outils essentiels pour améliorer l’accessibilité des composants personnalisés et du contenu web dynamique. Ils fournissent un contexte et des informations supplémentaires aux technologies d’assistance, ce qui permet aux utilisateurs handicapés de comprendre et d’interagir efficacement avec des éléments web complexes. Utilisez des rôles ARIA avec parcimonie et uniquement lorsque l’accessibilité intégrée des éléments HTML sémantiques est insuffisante. Les rôles ARIA définissent l’objectif et le comportement d’un élément. Par exemple, l’attribution du rôle de bouton à un élément interactif personnalisé informe les technologies d’assistance que l’élément fonctionne comme un bouton, même s’il ne s’agit pas d’un bouton< HTML> natif. Cela permet aux lecteurs d’écran d’annoncer l’élément en tant que bouton, ce qui permet aux utilisateurs de comprendre ses fonctionnalités. Les rôles ARIA courants incluent le bouton, la boîte de dialogue, le menu, l’onglet et l’alerte, entre autres. L’utilisation de ces rôles garantit que les composants personnalisés sont accessibles et fournissent des informations significatives aux utilisateurs. Les attributs ARIA, tels que aria-label et aria-labelledby, fournissent des informations supplémentaires sur les éléments interactifs.
- L’attribut aria-label définit une chaîne qui étiquette un élément, particulièrement utile pour les éléments sans étiquettes de texte visibles. Par exemple, un bouton d’icône de recherche peut être étiqueté avec aria-label="Search » pour informer les lecteurs d’écran de son objectif.
- L’attribut aria-labelledby est utilisé pour faire référence à un autre élément qui contient le texte de l’étiquette. Cela est utile pour associer une étiquette à un contrôle de formulaire, par exemple la liaison d’un champ d’entrée de texte à son élément d’étiquette correspondant.
- D’autres attributs ARIA importants incluent aria-expanded, qui indique si un élément repliable est déployé ou replié, et aria-hidden, qui masque les éléments des technologies d’assistance. En utilisant des rôles et des attributs ARIA, les développeurs peuvent améliorer l’accessibilité des composants personnalisés, ce qui garantit que tous les utilisateurs peuvent naviguer et interagir efficacement avec le contenu web.
Éviter les pièges clavier
Éviter les pièges de clavier est un aspect crucial de la garantie de l’accessibilité du clavier. Un piège du clavier se produit lorsqu’un utilisateur accède à un élément interactif à l’aide du clavier mais ne peut pas en déplacer le focus, l'obligeant à recharger la page ou à redémarrer l’application. Cela peut être frustrant et désorientant, en particulier pour les utilisateurs qui s’appuient uniquement sur la navigation au clavier. Pour empêcher les pièges de clavier, les développeurs doivent s’assurer que tous les éléments interactifs sont entièrement opérables et que les utilisateurs peuvent les quitter à l’aide de touches de clavier standard, telles que la touche Tab. L’une des causes courantes des pièges de clavier est le mauvais gestion du focus par les composants personnalisés ou les widgets. Par exemple, une boîte de dialogue modale ou un menu déroulant doit permettre aux utilisateurs d’accéder et de sortir du composant sans se bloquer. Pour ce faire, définissez la gestion appropriée du focus au sein du composant et assurez-vous que la touche Tab déplace le focus sur l’élément logique suivant. Assurez-vous que les utilisateurs ne puissent pas accéder aux éléments qui sont réduits ou masqués. Par exemple, si le volet de transcription est réduit, le focus du clavier ne doit pas se déplacer vers ses éléments.
Test, test, test
L’un des conseils les plus importants consiste à tester votre site web ou votre application à l’aide d’un clavier uniquement. Cela permet d’identifier les éléments qui ne sont pas accessibles ou opérables via le clavier. Assurez-vous que tous les éléments interactifs, tels que les boutons, les liens et les champs de formulaire, peuvent être accessibles et activés à l’aide de la touche Tab et d’autres raccourcis clavier standard. En outre, assurez-vous que l’ordre de focus est logique et intuitif, en suivant la disposition visuelle du contenu. Cela permet aux utilisateurs de comprendre le flux de navigation et de localiser les éléments avec lesquels ils ont besoin d’interagir. Corrigez les problèmes que vous identifiez.