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.

Waarom het ertoe doet

Veel mensen kunnen geen muis gebruiken. Wie blind is, gebruikt vaak het toetsenbord. Net als sommige mensen met een motorische beperking. Ook wie een gebroken arm heeft, gebruikt soms even de Tab-toets. Wie trilt, raakt kleine knoppen die dicht bij elkaar staan makkelijk mis.

Wie toetsenbord en muis allebei niet kan gebruiken, werkt soms met spraakherkenning of met een speciale schakelaar. Werkt één knop in je aanmeldformulier alleen met de muis, dan kan zo iemand daar vastlopen, hoe goed de rest ook is.

Zo doe je het

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. 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).
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. Wie 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. 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. Niets knippert vaker dan drie keer per seconde (2.3.1, A).
10. Slepen en vegen zijn nooit nodig (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. Wie met spraak werkt, zegt wat er op de knop staat. Heet de knop in de code anders, dan werkt dat spraakcommando niet.
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).

Zo ziet het eruit in de praktijk

Een ambulant begeleider helpt een cliënt die haar handen slecht kan gebruiken. Ze bedient haar laptop met spraak. Op de website van de organisatie van de begeleider wil ze zich aanmelden voor een inloopochtend. Ze zegt “klik Aanmelden”, maar er gebeurt niets. In de code heet de knop “Formulier versturen”.

De begeleider neemt het mee naar zijn team. Een collega loopt de pagina na met de Toetsenbordtest en vindt nog drie dingen. Je ziet niet waar je bent, want de rand om links en knoppen is weggehaald. Onderaan staat een vaste chatbalk die over de knop “Versturen” schuift als je er met Tab op komt. En een datum kies je alleen door een schuifje te slepen. Met het toetsenbord lukt dat niet.

De collega zet de vier punten in één bericht aan de webbouwer, met bij elk punt het nummer uit WCAG. Zo kan de webbouwer elke eis precies opzoeken.

Wat zeg je tegen de cliënt? Bijvoorbeeld: “Het ligt niet aan jou of aan je spraakprogramma. De knop is verkeerd gebouwd, en dat laten we repareren.” En tegen de webbouwer: “Kun je laten zien hoe de focus eruitziet, op elke kleur achtergrond die we gebruiken?”

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.
• Een uitklapmenu dat bij het aanwijzen opent, moet ook met het toetsenbord werken. Dit gaat vaak mis.
• Let op de versie. Oudere regels en checklists gaan uit van WCAG 2.1. De eisen die hierboven “nieuw in 2.2” heten, staan daar 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