Toegankelijkheidstips voor het toetsenbord HTML en CSS gebruiken

Uw website toegankelijk maken voor gebruikers met alleen toetsenbord is een belangrijk onderdeel van het grotere toegankelijkheidsfoto. Hier zijn enkele tips voor toetsenbordtoegankelijkheid die u snel kunt implementeren met behulp van eenvoudige HTML en CSS.

Al vanaf het begin

Deze tips maken deel uit van Web Accessibility: de complete leergids, waar we een reeks tutorials, artikelen, cursussen en e-boeken hebben verzameld, om u vanaf het begin inzicht te geven in webtoegankelijkheid.

Wat is Toetsenbordtoegankelijkheid?

Een toetsenbord kan voor sommige gebruikers het primaire middel zijn om door websites te navigeren. Tegenwoordig, wanneer de meeste webinterfaces zijn ontworpen met muisaanwijzers en aanraakinteractie in gedachten, wordt toetsenbordnavigatie verwaarloosd. Toegankelijkheid van het toetsenbord is de gewoonte om ervoor te zorgen dat gebruikers efficiënt en ongehinderd kunnen navigeren met alleen hun toetsenbord.

Die mogelijk toegang tot het toetsenbord nodig heeft?

Dit zijn de belangrijkste doelgroepen van toetsenbordtoegankelijkheid:

• Gebruikers met motorische handicaps die problemen hebben met het gebruik van een muis, een aanraakapparaat of het klikken op kleine dingen.
  
• Blinde of slechtziende gebruikers geven er vaak de voorkeur aan websites te navigeren met specifieke braille-toetsenborden.
  
• Amputees of patiënten met een aangeboren amputatie (geboorte zonder ledemaat of ledematen, met name de handen in dit geval) maken vaak gebruik van speciale hardware die de toetsenbordfunctionaliteit nabootst.
  
• Iedereen die simpelweg geen toegang heeft tot een functionerende muis of touchpad.

1. Test uw site op toegankelijkheid van het toetsenbord

Het belangrijkste doel van toetsenbordtoegankelijkheid is om elk interactief element, zoals koppelingen en formulierbesturingselementen, beschikbaar te maken met de tab sleutel. Dit is hoe gebruikers met alleen een toetsenbord door een webpagina navigeren. Het testen van uw website op toetsenbordtoegankelijkheid is eigenlijk vrij eenvoudig: druk gewoon op tab toets en navigeer van de bovenkant van de pagina naar de onderkant, markeer actieve elementen terwijl u bezig bent.

Navigeren door snelle links in de Tuts + footer met de tab sleutel

Observeer hoe gemakkelijk of moeilijk het is om naar de hoofdinhoud te gaan, op een menu-item te klikken, een formulier in te vullen, een schuifregelaar te bedienen of uw huidige positie op de pagina te volgen. U kunt ook de omgekeerde richting testen met behulp van de Shift + Tab Toetsenbord sneltoets.

2. Maak merkbaar :focus stijlen

CSS heeft een :focus pseudo-klasse die wordt geactiveerd wanneer een gebruiker op een item klikt of tikt, of selecteert met het tab sleutel. De :focus status geldt alleen voor focuseerbare elementen, namelijk , , , </code>, <code><select></code>, en <code><area></code>.</p><p>Elke browser wordt geleverd met een eigen standaard <code>:focus</code> stijlen - meestal een gestippelde zwarte omtrek rond het element, of een wazige gloed, maar veel ontwerpers vinden het niet naar hun smaak en zullen het volledig verwijderen. Dit is eigenlijk de grootste fout die toetsenbordtoegankelijkheid op webpagina's ruïneert. Als u niet van de standaardstijlen houdt, gebruik dan iets dat overeenkomt met het ontwerp van uw website. </p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.jpg">Standaard: focusstijlen in de Google Chrome-browser<p>Kies een stijl die gemakkelijk opvalt, maar niet alleen op kleuren vertrouwt. Hier is een mogelijk voorbeeld dat goed kan werken voor gebruikers met alleen toetsenbord:</p><pre>: focus outline: 3px effen rood; </pre><h2> 3. Gebruik niet-kleurige ontwerpers voor koppelingen</h2><p>Hyperlinks mogen niet alleen op kleur worden onderscheiden. Dit principe wordt meestal genoemd met betrekking tot visuele toegankelijkheid, omdat mensen met een laag gezichtsvermogen de verschillen tussen bepaalde kleuren moeilijk te onderscheiden vinden. Maar duidelijk zichtbare links zijn ook belangrijk voor de toegankelijkheid van het toetsenbord. Gebruikers met alleen een toetsenbord moeten in staat zijn om koppelingen zo snel mogelijk te herkennen. Dit helpt ze de pagina te scannen en erachter te komen hoe ze naar het gedeelte waarin ze zijn geïnteresseerd, kunnen navigeren.</p><p>gelijk aan <code>:focus</code> stijlen, hyperlinks komen ook met standaard browserstijlen - blauw onderstreept in de meeste gevallen. Ontwerpers verwijderen echter vaak de onderstreping en gebruiken alleen kleuren om de aanwezigheid van een link aan te geven. Als u de standaard onderstreping verwijdert, gebruikt u altijd een andere niet-gekleurde aanduiding die overeenkomt met uw websiteontwerp, zoals randen, pictogrammen of contouren.</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.png">Duidelijke links op gov.uk: (1) hyperlink (2) focused (3) visited<p>U kunt de <code>titel</code> attribuut om de inhoud van een link te beschrijven, maar deze wordt pas zichtbaar als iemand de link omslaat. Gebruikers met alleen een toetsenbord hebben geen toegang tot zweefgebeurtenissen, dus plaats nooit cruciale informatie in de <code>titel</code> attribuut. Het telt ook niet als een niet-gekleurde aanduiding. Doe dit bijvoorbeeld nooit:</p><pre> Klik hier </pre><p>In plaats daarvan, doe dit:</p><pre> Belangrijke informatie </pre><p>WCAG 2.0 waarschuwt ook voor de toegankelijkheidsproblemen van het title-kenmerk. Gebruik het met zorg of gebruik het helemaal niet.</p><h2> 4. Gebruik Native Control Elements</h2><p>Formulieren zijn interactieve elementen, dus ze moeten toegankelijk zijn via het toetsenbord. Gebruikers met alleen een toetsenbord moeten in staat zijn formulieren in te vullen, knoppen in te drukken, bereikschuifregelaars te gebruiken, opties te selecteren en bedieningselementen gemakkelijk te bedienen. Als u formulieren op uw website hebt, moet u ze één voor één testen, met behulp van de <strong>tab</strong> sleutel. Denk aan aanmeldingsformulieren, nieuwsbriefformulieren, aanmeldingsformulieren, opmerkingenformulieren, winkelwagentjes, enzovoort.</p><p>De beste manier om toegankelijke formulieren te maken, is door native besturingselementen te gebruiken waar dit mogelijk is. Native bedieningselementen worden geleverd met ingebouwde toetsenbordtoegankelijkheid, wat betekent dat ze focuseerbaar zijn en standaard reageren op toetsaanslagen. Ze zijn als volgt:</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>U kunt bijvoorbeeld een schuifregelaar met toetsenbordbereik maken met de volgende HTML:</p><pre><input type="range" min="0" max="10"></pre><p>Toetsenbordgebruikers kunnen het eerst focussen met de <strong>tab</strong> toets en beweeg de schuifregelaar op en neer met <strong>Ruimte</strong>. </p><p>Als u om een ​​of andere reden een niet-focusseerbare HTML-tag voor een interactief element wilt gebruiken, kunt u dit doelgericht maken met de <code>tabindex = "0"</code> attribuut. Dit is bijvoorbeeld een <code><div></code> veranderd in een focuseerbare knop:</p><pre><div role="button" tabindex="0"> Klik hier </div></pre><p>De <code>role = "button"</code> attribuut in het bovenstaande fragment is een mijlpaal in ARIA. Hoewel alleen-toetsenbordgebruikers het niet nodig hebben, is het onmisbaar voor gebruikers van schermlezers en visuele toegankelijkheid.</p><p>Zelfs als de niet-native knop focuseerbaar is gemaakt, is deze nog steeds inferieur aan zijn native tegenhanger qua toetsenbordtoegankelijkheid. U zult dit meteen begrijpen wanneer u een gebeurtenishandler aan de knop probeert toe te voegen. Dit is wat een klikgebeurtenislistener eruit ziet met de native <code><button></code> element:</p><pre><button onclick="alert('Hi, I am a native button!')"> Klik hier </button></pre><p>En hier is het equivalent met de div-knop:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')"> Klik hier </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>Als u op de knoppen klikt met uw muis of touchpad, ziet u beide waarschuwingsberichten. Als u echter naar elke knop navigeert met behulp van de <strong>tab</strong> sleutel en treffer <strong>invoeren</strong> om ze te verwerken, ziet u alleen het eerste bericht dat bij de native-knop hoort. Om de niet-native knop de toetsenbordinvoer te laten verwerken, moet je ook een toetsaanslaggebeurtenishandler apart definiëren:</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!')"> Klik hier </div></pre><p>Nu, wanneer toetsenbordgebruikers raken <code>invoeren</code>, ze zien ook het bericht dat bij de niet-native-knop hoort. Zoals je kunt zien, is het veel gemakkelijker en sneller om de oorspronkelijke versie te gebruiken. Dus gebruik, tenzij u een goede reden hebt om ze niet te gebruiken, altijd native besturingselementen.</p><h2> 5. Voeg een "Skip to Main Content" -link toe</h2><p>Een toevoegen <strong>Ga naar de hoofdinhoud</strong> of <strong>Navigatie overslaan</strong> een link naar uw webpagina's helpt gebruikers met alleen toetsenbordsoftware enorm. In de meeste gevallen zullen deze gebruikers niet alle navigatielinks willen doorlopen voordat ze de inhoud beginnen te lezen. Dit geldt vooral als ze meer dan één pagina op uw site bekijken. Stelt u zich eens voor dat ze zonder een navigatielink moeten navigeren via dezelfde navigatielinks op de startpagina <em>elke keer</em>. Het lijkt geen bijzonder vermakelijke activiteit.</p><p>Als u een goed werkende link voor overslaan van links wilt maken, moet u deze koppelen aan de hoofdinhoud met behulp van de <code>ID kaart</code> en <code>href</code> HTML-kenmerken op de volgende manier:</p><pre>Ga naar de hoofdinhoud <nav>Navigatie</nav> <main tabindex="-1">Belangrijkste inhoud</main></pre><p>U moet ook het <code>tabindex = "- 1"</code> attribuut aan de container van de hoofdinhoud. Dit is dezelfde tabindex die we hierboven hebben gebruikt om de niet-native knop focusbaar te maken. De <code>tabindex</code> kenmerk wordt gebruikt om de standaard navigatievolgorde aan te passen. Met een waarde van <code>0</code>, het maakt niet-focusseerbare elementen focusbaar. Met een waarde van <code>-1</code>, het maakt ook elementen focusbaar, maar ze worden niet bereikbaar met standaard toetsenbordnavigatie. Bepaalde browsers, zoals Chrome en IE, vereisen de aanwezigheid van <code>tabindex = "- 1"</code> op het doel van de skip navigation link, dus vergeet het nooit.</p><h3>Onthul de Skip Link alleen voor toetsenbordgebruikers</h3><p>U kunt CSS gebruiken om de navigatiebalk voor overslaan alleen zichtbaar te maken voor gebruikers van het toetsenbord. Verberg de link in de standaardstatus van reguliere gebruikers door deze uit de viewport te plaatsen. Onthul het vervolgens voor toetsenbordgebruikers door afzonderlijke stijlen te maken voor de focusstatus die wordt geactiveerd wanneer de gebruiker de <strong>tab</strong> sleutel. </p><p>Je kunt dit effect zien in actie op sites zoals webaim.org, www.w3.org en (zoals gewoonlijk) www.gov.uk:</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css_2.jpg">Heb je deze link eerder gezien??<p>De volgende CSS is een vereenvoudigde versie van de skip-navigatiecode van het IT Accessibility Handbook van NC State University:</p><pre>a.skip-main left: -999px; positie: absoluut; top: auto; breedte: 1px; hoogte: 1px; overloop verborgen; z-index: -999; a.skip-main: focus left: auto; top: auto; breedte: 30%; hoogte: auto; overloop: automatisch; marge: 0 35%; opvulling: 5px; lettertypegrootte: 20px; omtrek: 3px effen rood; text-align: center; z-index: 999; </pre><p>Wanneer de gebruiker de <strong>tab</strong> sleutel, de <code>.skip-main</code> element krijgt de focusstatus en de koppeling voor overslaan van navigatie verschijnt op het scherm. </p><p>Je kunt snel testen hoe het werkt als je helemaal bovenaan op de demo klikt en op de <strong>tab</strong> sleutel. Misschien vindt u het gemakkelijker om de demo hieronder in de volledige paginaweergave te openen.</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>Volgende stappen</h2><p>In dit artikel heb ik een aantal basistoetsen voor toetsenbordtoegankelijkheid gedeeld die u kunt implementeren met behulp van HMTL en CSS. Er zijn ook andere, geavanceerdere dingen die je zou kunnen doen voor toetsenbordtoegankelijkheid. U kunt bijvoorbeeld:</p><ul> <li>voeg aangepaste sneltoetsen toe aan uw webapp,</li> <li>maak toetsenbord-navigeerbare JavaScript-widgets,</li> <li>of maak toetsenbord-toegankelijke schuifregelaars.</li> </ul><p>Naast deze tips, vermijd het gebruik van CAPTCHA's waar mogelijk, omdat ze ernstige toegankelijkheidsproblemen hebben, zowel voor gebruikers van schermlezers als voor gebruikers met alleen toetsenbord. Als u ze nog steeds moet gebruiken, biedt u ze op meer dan twee manieren aan, anders hebben gebruikers met toegankelijkheidsnoden moeite met het verwerken van uw formulieren. Laat het ons weten als u zelf toegankelijkheidstips voor het toetsenbord hebt!</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">Web ontwerp</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">Keyboard Maestro I Introductie</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 Observing met Facebook's KVOController</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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </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="Zoeken..."> <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>