Bedienbaar: alles werkt, ook zonder muis

Wat is het

Bedienbaar is het tweede principe van WCAG. Iedereen moet alles op je website kunnen gebruiken: het menu, de knoppen en de formulieren. Niet alleen met een muis, maar ook met alleen het toetsenbord of met spraakbesturing.

Het heeft vijf richtlijnen. Die gaan over bediening met het toetsenbord (2.1), genoeg tijd (2.2) en flitsende beelden die een epileptische aanval kunnen uitlokken (2.3), en over je weg vinden (2.4) en andere manieren van bedienen, zoals aanraken en spraak (2.5). Daaronder vallen 20 succescriteria op niveau A en AA: eisen waarop je een website kunt testen. Hieronder staan de belangrijkste, met hun nummer in WCAG 2.2. Dat nummer gebruik je als je een probleem doorgeeft aan je webbouwer of leverancier.

Waarom het ertoe doet

Mensen die blind zijn, gebruiken vaak het toetsenbord, net als sommige mensen met een motorische beperking. Iemand die trilt, raakt kleine knoppen die dicht bij elkaar staan makkelijk mis.

Mensen die toetsenbord en muis allebei niet kunnen gebruiken, werken soms met spraakherkenning of met een speciale schakelaar. Werkt één knop in je aanmeldformulier alleen met de muis, dan kunnen zij daar vastlopen, hoe goed de rest ook is.

Zo doe je het

Het bouwen doet je webbouwer. De meeste punten hieronder kun je zelf nalopen met het toetsenbord of een telefoon.

1. Alles werkt met het toetsenbord (2.1.1, niveau A). Met Tab ga je naar de volgende link of knop, met Enter kies je, en nergens loop je vast (2.1.2, A). Een bekend probleem: de knoppen van een videospeler.
2. Je ziet altijd waar je bent (2.4.7, AA). De focus is een zichtbare rand of kleur rond de link of knop waar je bent. Haalt je webbouwer de standaardrand van de browser weg, dan moet er een andere zichtbare focus voor in de plaats komen. De knop met focus mag ook niet helemaal verdwijnen achter bijvoorbeeld een vaste chatbalk (2.4.11, AA, nieuw in 2.2). Vraag je webbouwer om te laten zien hoe de focus eruitziet op elke kleur achtergrond die je gebruikt.
3. De volgorde klopt (2.4.3, A). Met Tab ga je in een logische volgorde door de pagina, meestal van boven naar beneden.
4. Je kunt het menu overslaan (2.4.1, A). Een link “Naar de inhoud” bovenaan scheelt veel tikken.
5. Titels en koppen zeggen waar het over gaat (2.4.2, A en 2.4.6, AA). “Aanmelden bij het wijkteam” in het tabblad zegt meer dan “Home”.
6. Linkteksten zijn duidelijk (2.4.4, A). “Lees meer over aanmelden” in plaats van “klik hier”.
7. Er is meer dan één weg naar een pagina (2.4.5, AA). Bijvoorbeeld het menu en een zoekfunctie, of een overzicht van alle pagina’s. Iemand die slecht ziet, vindt een pagina soms makkelijker met zoeken dan via een groot menu. Heeft je site maar drie of vier pagina’s, dan kunnen links vanaf de startpagina genoeg zijn.
8. Er is genoeg tijd (2.2.1, A). Logt het cliëntportaal iemand uit na een tijd? Waarschuw dan eerst, en geef minstens 20 seconden om met één handeling meer tijd te vragen. Of laat iemand de tijdslimiet vooraf uitzetten.
9. Niets beweegt zonder pauzeknop (2.2.2, A). Nieuwsberichten die vanzelf wisselen en langer dan vijf seconden doorgaan, moet je kunnen pauzeren, stoppen of verbergen. En niets knippert vaker dan drie keer per seconde (2.3.1, A).
10. Het kan ook zonder slepen en vegen (2.5.7, AA, nieuw in 2.2, en 2.5.1, A). Verschuif je een afspraak door te slepen? Zorg dan ook voor een knop of keuzelijst. Kun je op een kaart van de wijk inzoomen met twee vingers? Zet er dan ook een plus- en een minknop bij.
11. De zichtbare tekst zit in de naam (2.5.3, A). Staat er “Aanmelden” op een knop, dan staat dat woord ook in de naam in de code. Iemand die met spraak werkt, zegt namelijk wat er op de knop staat: “klik Aanmelden”. Heet de knop in de code “Formulier versturen”, dan gebeurt er niets.
12. Klikvlakken zijn groot genoeg (2.5.8, AA, nieuw in 2.2). Een knop is minstens 24 bij 24 CSS-pixels, een maat die webbouwers gebruiken, of er is genoeg ruimte omheen. Een link midden in een zin telt niet mee. De strengere maat van 44 bij 44 hoort bij niveau AAA (2.5.5).

Let op

• Test het zelf. Leg je muis weg en vul je aanmeldformulier in met alleen Tab, Shift+Tab, de pijltjes en Enter. De Toetsenbordtest neemt je daarbij in tien korte stappen mee.
• Controleer uitklapmenu’s apart. Een menu dat openklapt als je er met de muis op wijst, moet ook met het toetsenbord werken.
• Kijk welke versie een checklist volgt. Oudere regels en checklists gaan uit van WCAG 2.1, en daar staan de eisen die hierboven “nieuw in 2.2” heten niet in. Welke versie de regels voor de overheid vragen, lees je in Wat is WCAG?

Meer weten

• De andere principes: waarneembaar, begrijpelijk en robuust.
• Je website toegankelijk maken: de stappen voor je organisatie.
• Checklist toegankelijke website