Astuces pour l'accessibilité au clavier utilisant HTML et CSS

Rendre votre site Web accessible aux utilisateurs ne disposant que d'un clavier est un élément important d'une image plus globale de l'accessibilité. Voici quelques conseils d’accessibilité au clavier que vous pouvez rapidement mettre en œuvre à l’aide de HTML et de CSS de base..

A11y depuis le début

Ces conseils font partie de l'accessibilité Web: le Guide de formation complet, où nous avons rassemblé une série de tutoriels, d'articles, de cours et de livres électroniques pour vous aider à comprendre l'accessibilité au Web dès le début..

Qu'est-ce que l'accessibilité au clavier??

Un clavier peut être le moyen principal pour certains utilisateurs de naviguer sur des sites Web. De nos jours, lorsque la plupart des interfaces Web sont conçues avec des curseurs de souris et une interaction tactile en tête, la navigation au clavier est négligée. L'accessibilité au clavier consiste à s'assurer que les utilisateurs peuvent naviguer efficacement et sans entrave en utilisant uniquement leur clavier..

Qui pourrait avoir besoin d'un clavier accessible??

Ce sont les principaux groupes cibles d’accessibilité au clavier:

• Utilisateurs ayant une déficience motrice qui ont des difficultés à utiliser une souris, à utiliser un appareil tactile ou à cliquer sur de petites choses.
  
• Les utilisateurs aveugles ou malvoyants préfèrent souvent naviguer sur des sites Web dotés de claviers braille spécifiques..
  
• Les amputés ou ceux qui ont une amputation congénitale (naissance sans membre, surtout les mains dans ce cas) utilisent souvent un matériel spécial reproduisant les fonctionnalités du clavier..
  
• Toute personne n'ayant simplement pas accès à une souris ou à un pavé tactile en état de fonctionnement.

1. Testez votre site pour l'accessibilité du clavier

L’objectif le plus important de l’accessibilité au clavier est de rendre chaque élément interactif, tel que les liens et les contrôles de formulaire, disponible avec le logiciel. Languette clé. C’est ainsi que les utilisateurs utilisant uniquement le clavier naviguent dans une page Web. Tester votre site Web pour l’accessibilité au clavier est en fait assez facile: appuyez simplement sur la touche Languette touche de navigation et naviguez du haut de la page vers le bas en mettant en évidence les éléments actifs au fur et à mesure.

Navigation dans les liens rapides dans le bas de page Tuts + avec le Languette clé

Observez à quel point il est facile ou difficile d'accéder au contenu principal, cliquez sur un élément de menu, remplissez un formulaire, utilisez un curseur ou suivez votre position actuelle sur la page. Vous pouvez également tester le sens inverse à l'aide du bouton Maj + Tab raccourci clavier.

2. Créer notable :concentrer modes

CSS a un :concentrer pseudo-classe qui est déclenchée lorsqu'un utilisateur clique ou tape sur un élément, ou le sélectionne avec le Languette clé. le :concentrer s’applique uniquement aux éléments focalisables, à savoir , , , </code>, <code><select></code>, et <code><area></code>.</p><p>Chaque navigateur est livré avec sa propre valeur par défaut <code>:concentrer</code> styles - généralement un contour en pointillé noir autour de l'élément ou une lueur floue, mais de nombreux concepteurs ne le trouvent pas à leur goût et l'élimineront complètement. C’est en fait l’erreur numéro un qui ruine l’accessibilité au clavier sur les pages Web. Si vous n'aimez pas les styles par défaut, utilisez quelque chose qui correspond à la conception de votre site Web. </p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.jpg">Par défaut: styles de focus dans le navigateur Google Chrome<p>Choisissez un style qui se remarque facilement mais ne repose pas uniquement sur les couleurs. Voici un exemple possible qui peut bien fonctionner pour les utilisateurs utilisant uniquement le clavier:</p><pre>: focus contour: 3px rouge solide; </pre><h2> 3. Utiliser des désignateurs autres que la couleur pour les liens</h2><p>Les hyperliens ne doivent pas être distingués uniquement par leur couleur. Ce principe est généralement mentionné en relation avec l’accessibilité visuelle, car les personnes malvoyantes ont du mal à discerner les différences entre certaines couleurs. Cependant, des liens clairement visibles sont également importants pour l'accessibilité au clavier. Les utilisateurs utilisant uniquement le clavier doivent pouvoir repérer les liens le plus rapidement possible. Cela les aide à numériser la page et à trouver comment naviguer vers la partie qui les intéresse..</p><p>Similaire à <code>:concentrer</code> styles, les liens hypertexte viennent également avec des soulignements bleus de style de navigateur par défaut dans la plupart des cas. Cependant, les concepteurs suppriment souvent le soulignement et n'utilisent que des couleurs pour indiquer la présence d'un lien. Si vous supprimez le soulignement par défaut, utilisez toujours un autre identificateur sans couleur qui correspond à la conception de votre site Web, tel que des bordures, des icônes ou des contours..</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.png">Liens clairs sur gov.uk: (1) lien hypertexte (2) ciblé (3) visité<p>Vous pouvez utiliser le <code>Titre</code> attribut pour décrire le contenu d'un lien, mais il ne devient visible que lorsque quelqu'un survole le lien. Les utilisateurs uniquement au clavier n’ont pas accès aux événements survolés. Par conséquent, ne placez jamais d’informations cruciales dans la liste. <code>Titre</code> attribut. De plus, cela ne compte pas comme désignateur non couleur. Par exemple, ne faites jamais ceci:</p><pre> Cliquez ici </pre><p>Au lieu de cela, faites ceci:</p><pre> Une information important </pre><p>WCAG 2.0 met également en garde sur les problèmes d'accessibilité de l'attribut title. Utilisez-le avec précaution ou ne l'utilisez pas du tout..</p><h2> 4. Utiliser des éléments de contrôle natifs</h2><p>Les formulaires sont des éléments interactifs, ils doivent donc être accessibles via le clavier. Les utilisateurs utilisant uniquement le clavier doivent pouvoir remplir des formulaires, appuyer sur des boutons, utiliser les curseurs de plage, sélectionner des options et utiliser les contrôles avec facilité. Si vous avez des formulaires sur votre site Web, vous devez les tester un à un en utilisant le <strong>Languette</strong> clé. Pensez aux formulaires d'inscription, aux formulaires de newsletter, aux formulaires de connexion, aux formulaires de commentaires, aux paniers d'achat, etc..</p><p>Le meilleur moyen de créer des formulaires accessibles consiste à utiliser des éléments de contrôle natifs chaque fois que cela est possible. Les éléments de contrôle natifs sont livrés avec une accessibilité de clavier intégrée, ce qui signifie qu'ils peuvent être mis au point et répondent par défaut aux événements de frappe. Ils sont comme suit:</p><ul> <li><code><button></code></li> <li><code><input></code></li> <li><code><textarea></code></li> <li><code><select></code></li> <li><code><option></code></li> </ul><p>Par exemple, vous pouvez créer un curseur de plage accessible au clavier avec le code HTML suivant:</p><pre><input type="range" min="0" max="10"></pre><p>Les utilisateurs de clavier peuvent d’abord se concentrer sur le <strong>Languette</strong> touche, puis déplacez le curseur de haut en bas avec <strong>Espace</strong>. </p><p>Si, pour une raison quelconque, vous devez utiliser une balise HTML non activable pour un élément interactif, vous pouvez la rendre activable à l'aide de la commande <code>tabindex = "0"</code> attribut. Par exemple, voici un <code><div></code> transformé en un bouton pouvant être mis au point:</p><pre><div role="button" tabindex="0"> Cliquez moi </div></pre><p>le <code>role = "bouton"</code> L'attribut dans l'extrait ci-dessus est un rôle de repère ARIA. Bien que les utilisateurs utilisant uniquement le clavier n'en aient pas besoin, c'est indispensable pour les utilisateurs de lecteurs d'écran et pour l'accessibilité visuelle.</p><p>Même si le bouton non natif a été mis au point, il reste inférieur à son homologue natif en termes d’accessibilité au clavier. Vous le comprendrez immédiatement lorsque vous essayez d'ajouter un gestionnaire d'événements au bouton. Voici à quoi ressemble un écouteur d’événements clic avec le serveur natif <code><button></code> élément:</p><pre><button onclick="alert('Hi, I am a native button!')"> Cliquez moi </button></pre><p>Et, voici l'équivalent en utilisant le bouton div:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')"> Cliquez moi </div></pre> <iframe src="https://codepen.io/tutsplus/embed/jeYmpE/?height=300&theme-id=12451&default-tab=result&embed-version=2" frameborder="no" allowfullscreen="true" scrolling="no"></iframe> <p>Si vous cliquez sur les boutons à l'aide de votre souris ou de votre pavé tactile, vous pouvez voir les deux messages d'alerte. Cependant, si vous accédez à chaque bouton à l’aide de la touche <strong>Languette</strong> touche et frappe <strong>Entrer</strong> pour les traiter, vous ne verrez que le premier message, appartenant au bouton natif. Pour que le bouton non natif traite l'entrée au clavier, vous devez également définir un gestionnaire d'événements de frappe au clavier séparément:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')" onkeydown="alert('Hi, I am a non-native button!')"> Cliquez moi </div></pre><p>Maintenant, quand les utilisateurs du clavier frappent <code>Entrer</code>, ils voient également le message appartenant au bouton non natif. Comme vous pouvez le constater, il est beaucoup plus facile et rapide d’utiliser la version native. Donc, à moins que vous n'ayez une bonne raison de ne pas les utiliser, utilisez toujours des éléments de contrôle natifs.</p><h2> 5. Ajouter un lien «Passer au contenu principal»</h2><p>Ajout d'un <strong>Passer au contenu principal</strong> ou <strong>Passer la navigation</strong> un lien vers vos pages Web aide grandement les utilisateurs ne disposant que d’un clavier. Dans la plupart des cas, ces utilisateurs ne souhaitent pas parcourir tous les liens de navigation avant de commencer à lire le contenu. Cela est particulièrement vrai quand ils regardent plus d'une page de votre site. Imaginez, sans lien de navigation, ils doivent passer par les mêmes liens de navigation sur la page d'accueil <em>à chaque fois</em>. Cela ne semble pas être une activité particulièrement divertissante.</p><p>Pour créer un lien de navigation fonctionnel, vous devez le lier au contenu principal à l'aide du bouton <code>identifiant</code> et <code>href</code> Les attributs HTML de la manière suivante:</p><pre>Passer au contenu principal <nav>La navigation</nav> <main tabindex="-1">Contenu principal</main></pre><p>Vous devez également ajouter le <code>tabindex = "- 1"</code> attribuer au conteneur du contenu principal. C'est le même tabindex que celui que nous avons utilisé ci-dessus pour rendre le bouton non natif mis au point. le <code>Tabindex</code> attribut est utilisé pour modifier l'ordre de navigation par défaut. Avec une valeur de <code>0</code>, cela permet de mettre au point des éléments non focalisables. Avec une valeur de <code>-1</code>, cela permet également aux éléments de se focaliser, mais ils deviennent inaccessibles avec la navigation au clavier par défaut. Certains navigateurs, tels que Chrome et IE, nécessitent la présence de <code>tabindex = "- 1"</code> sur la cible du lien de navigation de saut, afin de ne jamais l'omettre.</p><h3>Révéler le lien de saut uniquement aux utilisateurs de clavier</h3><p>Vous pouvez utiliser CSS pour rendre le lien de navigation visible uniquement pour les utilisateurs du clavier. Dans son état par défaut, masquez le lien des utilisateurs normaux en le positionnant hors de la fenêtre d'affichage. Ensuite, révélez-le aux utilisateurs du clavier en créant des styles distincts pour l'état de focus déclenché lorsque l'utilisateur frappe <strong>Languette</strong> clé. </p><p>Vous pouvez voir cet effet en action sur des sites tels que webaim.org, www.w3.org et (comme d'habitude) www.gov.uk:</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css_2.jpg">Avez-vous déjà vu ce lien avant?<p>Le code CSS suivant est une version simplifiée du code de navigation simplifiée du manuel d’accessibilité informatique de la NC State University:</p><pre>a.skip-main left: -999px; position: absolue; en haut: auto; largeur: 1px; hauteur: 1px; débordement caché; z-index: -999; a.skip-main: focus left: auto; en haut: auto; largeur: 30%; hauteur: auto; débordement: auto; marge: 0 35%; rembourrage: 5px; taille de police: 20px; contour: 3px rouge solide; text-align: center; z-index: 999; </pre><p>Lorsque l'utilisateur frappe le <strong>Languette</strong> clé, la <code>.sauter</code> l’élément est défini et le lien de navigation apparaît à l’écran.. </p><p>Vous pouvez rapidement tester son fonctionnement en cliquant tout en haut de la démo ci-dessous et en appuyant sur le bouton <strong>Languette</strong> clé. Vous trouverez peut-être plus facile d'ouvrir la démo ci-dessous en mode pleine page..</p> <iframe src="https://codepen.io/tutsplus/embed/VEyboG/?height=400&theme-id=12451&default-tab=result&embed-version=2" frameborder="no" allowfullscreen="true" scrolling="no"></iframe> <h2>Prochaines étapes</h2><p>Dans cet article, j'ai partagé quelques conseils de base sur l'accessibilité au clavier que vous pouvez implémenter à l'aide de HMTL et CSS. Vous pouvez également effectuer d'autres tâches plus avancées pour améliorer l'accès au clavier. Par exemple, vous pourriez:</p><ul> <li>ajouter des raccourcis clavier personnalisés à votre application Web,</li> <li>créer des widgets JavaScript navigables,</li> <li>ou construire des curseurs accessibles au clavier.</li> </ul><p>En plus de ces conseils, évitez autant que possible d'utiliser les CAPTCHA, car ils posent de graves problèmes d'accessibilité, à la fois pour les lecteurs d'écran et les claviers. Si vous devez toujours les utiliser, indiquez plus de deux façons de les résoudre, faute de quoi les utilisateurs ayant des besoins d'accessibilité auront du mal à traiter vos formulaires. Faites-nous savoir si vous avez des conseils en matière d'accessibilité du clavier!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Création de sites web</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/computers/keyboard-maestro-i-introduction.html">Clavier Maestro I Introduction</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_12/keyboard-maestro-i-introduction_7.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/code/key-value-observing-with-facebooks-kvocontroller.html">Key-Value Observer avec le KVOController de Facebook</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/key-value-observing-with-facebooks-kvocontroller.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Chercher..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>