Is jouw website al toetsenbordtoegankelijk?

Waarom is dit zo belangrijk?

Toetsenbordtoegankelijkheid heeft te maken met zogenaamde ‘apparaat-onafhankelijke toegang’ tot de informatie en functionaliteiten van een webpagina. Dit houdt in dat je een website niet alleen met de muis moet kunnen bedienen moet zijn, maar ook met alternatieve vormen van invoer- of aanwijsapparaten. Zoals een toetsenbord, maar bijvoorbeeld ook een joystick of stembediening.

Over het algemeen zijn pagina’s die bedienbaar zijn met het toetsenbord ook toegankelijk via stembediening of andere apparaten. Zo kan de gebruiker dus zelf kiezen welke bediening hij of zij wil gebruiken. Dit vergroot de toegankelijkheid van je website.

Wanneer is een onderdeel toetsenbordtoegankelijk?

De toegankelijkheid van een website bepalen we aan de hand van de WCAG: de Web Content Accessibility Guidelines. Dit zijn richtlijnen voor digitale toegankelijkheid. De WCAG 2.1 AA is de meest recente versie van de WCAG die onder andere geldt voor overheidsorganisaties. Deze richtlijn telt in totaal vijftig punten waaraan de website moet voldoen om digitaal toegankelijk te zijn.

Als we  een web-element beoordelen op toegankelijkheid voor toetsenbordbediening kijken we naar de volgende zeven criteria uit de WCAG 2.1 AA:

• 1.4.3 Contrast (minimum)
• 1.4.11 Contrast van niet-tekstuele content
• 2.1.1 Toetsenbord
• 2.1.2 Geen toetsenbordval
• 2.1.4 Enkel teken sneltoetsen
• 2.4.7 Focus zichtbaar
• 4.1.2 Naam, rol, waarde

De toelichting bij deze punten is terug te vinden in de: Richtlijnen voor Toegankelijkheid van Webcontent (WCAG) 2.1 (w3.org).

Meest voorkomende problemen en mogelijke oplossingen

De meeste problemen die te maken hebben met toetsenbordtoegankelijkheid vinden we bij formulieren, uitklapmenu's en met Javascript gegenereerde knoppen. We bespreken deze problemen stap voor stap in de alinea’s hieronder en geven mogelijke oplossingen. Ook mensen zonder functiebeperking kunnen daar voordeel van hebben. Bijvoorbeeld als ze websites bezoeken vanaf een mobiele telefoon of ander apparaat dat je met een toetsenbord bedient.

Formulieren

Vaak kun je formulieren op websites alleen invullen met behulp van een muis of ander 'aanwijsapparaat'. Hierdoor zijn ze niet toegankelijk voor mensen die de pagina bedienen met steminvoer, toetsenbord of een ander invoerapparaat zonder aanwijsfunctie.

Denk bijvoorbeeld aan keuzelijsten met 'bolletjes’ (radio buttons) waarbij een bezoeker alleen met muisbediening een keuze kan maken.

Ook zien we dat radio button-elementen gebruikt worden om te filteren binnen een menu. Zodra de eerste keuze is geselecteerd, wordt de pagina opnieuw geladen of ververst. Hierdoor kunnen bezoekers de andere keuzemogelijkheden niet meer bereiken.

Een mogelijke oplossing hiervoor is om het formulier niet gelijk te laten verzenden na het selecteren van de eerste keuze, maar gebruikers de keuze eerst nog met een submit-knop te laten bevestigen.

Uitklapmenu's

Uitklapmenu's werken vaak alleen met de muis. Submenu's verschijnen alleen als je de muisaanwijzer op een hoofdmenu-item plaatst. Als de gebruiker met behulp van het toetsenbord (met de Tab-toets) naar het hoofdmenu-item gaat, verschijnt het submenu meestal niet. Dit gebeurt bijvoorbeeld als er alleen een onMouseOver-event gebruikt is voor het uitklappen. Een mogelijke oplossing kan zijn om een onFocus-event te gebruiken, zodat het menu ook uitklapt als de 'focus' erop staat. Dit laatste gebeurt als met de Tab-toets naar dit menu-element wordt gesprongen.

Het probleem wordt nog groter als de hoofdmenu-items geen hyperlinks naar webpagina's zijn, maar slechts kopjes van de bijbehorende submenu's. Dit kun je oplossen door altijd hyperlink of button-elementen te gebruiken voor de hoofdmenu-items en/of het uitklappen van bijbehorende submenu's. Het volledige navigatiemenu is daardoor ook toegankelijk met het toetsenbord.

Met Javascript gegenereerde knoppen

Veel van de interactieve of dynamische onderdelen op websites zijn afhankelijk van de werking van de muis. Dit komt doordat vaak gekozen wordt voor ‘eventhandlers’ in JavaScript die apparaatafhankelijk zijn. In de meeste gevallen kun je ze hierdoor alleen met de muis bedienen. Voorbeelden hiervan zijn: 'onMouseOver' en 'onClick' events.

Dit zien we onder andere bij knoppen waarmee je een chatfunctie of pop-up kunt openen, waarbij de knop geen of een onjuiste semantische rol heeft. Het gaat hier om knoppen die gemaakt zijn met Java-script en die bijvoorbeeld geen juist <button> element bevatten. Ook komt het wel eens voor dat bijvoorbeeld een <div> element met behulp van Javascript veranderd is in een interactieve knop. Het <div> element heeft daarbij geen naam, rol of waarde, conform het succescriterium 4.1.2 Naam, rol en waarde.

Dit kun je oplossen door gebruik te maken van standaard HTML-elementen zoals bijvoorbeeld een <button> element. Deze kun je gegarandeerd bedienen met een toetsenbord, mits je geen gebruik maakt van bijvoorbeeld het attribuut tabindex=”-1”.

Meer weten?

Wil je meer weten over dit onderwerp? Of heb je hulp nodig bij het (toetsenbord)toegankelijk maken van je website? Onze experts helpen je graag verder. Neem gerust vrijblijvend contact op met Harmen Lanser, onze onderzoeker Digitale Toegankelijkheid, via hlanser@accessibility.nl.