Omslag van 'WCAG in de praktijk'

4. Bedienbaar

Om een computer te bedienen heb je een toetsenbord en een muis. Maar die heb je niet altijd en niet iedereen kan een muis of toetsenbord bedienen. Om die reden moet de website ook bruikbaar zonder of zonder toetsenbord.

4.1 Bedienbaar met toetsenbord en muis

Omschrijving

Mensen die blind zijn kunnen geen muis gebruiken, want ze zien niet waar de muis zich op het beeldscherm bevindt. Zij zijn dus voor de invoer aangewezen op het toetsenbord. Ook voor mensen met motorische problemen of mensen met RSI kan het gebruik van de muis moeilijk zijn.

Een groot verschil tussen het werken met een toetsenbord en een muis is dat het werken met een toetsenbord altijd lineair is. Met een muis kun je direct op een link klikken, waar die ook op de pagina staat. Met een toetsenbord begin je normaal gesproken linksboven en moet je alle links een voor een langs om te komen bij de link die je aan wilt klikken.

Succescriteria

  • 1.3.2 Betekenisvolle volgorde (niveau A)
  • 2.1.1 Toetsenbord (niveau A)
  • 2.1.2 Toetsenbordval (niveau A)
  • 2.4.1 Blokken overslaan (niveau A)
  • 2.4.7 Focus zichtbaar (niveau AA)

Toepassen

Alles moet bereikbaar zijn met het toetsenbord. Dat gaat soms mis bij video. De video is dan niet bereikbaar met het toetsenbord of – als je in de video zit – kom je er niet meer uit. Dat heet een toetsenbordval.

Een andere probleem is verkeerd geïmplementeerd JavaScript. Bij het tabben door de site blijf je haken op een tekst, waar dit script onderzit.

Je kunt zelf heel eenvoudig testen of je website toetsenbordtoegankelijk is. Kijk of je met de tab-toets door de hele site kunt navigeren.

4.2 Skiplinks naar onderdelen van je site

Omschrijving

Sommige mensen kunnen geen muis gebruiken en zijn aangewezen op enkel het toetsenbord. Voor hen is het belangrijk dat zij blokken content kunnen overslaan. Bijvoorbeeld dat ze direct bij de hoofdinhoud van een pagina kunnen springen.

Blokken overslaan kan goed met zogenaamde skiplinks. Normaal zie je die niet, maar als je door de site tabt worden die wel zichtbaar. Probeer dat maar eens op onze site, www.theinternetacademy.nl. Als je met de tabtoets door de site gaat, wordt de skiplink 'Naar inhoud' zichtbaar.

Deze zichtbaarheid is handig voor toetsenbordgebruikers. Gebruikers van screenreaders komen deze skiplinks als 1e links tegen en kunnen zo ook makkelijk delen van de pagina overslaan.

Succescriterium

  • 2.4.1 Blokken overslaan (niveau A)

Toepassen

De skiplinks worden in de template van je website ingebouwd. Zorg dat de skiplink de 1e link is.

4.3 Zichtbaar zijn waar je bent

Omschrijving

Succescriterium 2.4.7 geeft aan dat zichtbaar moet zijn waar je met de tab-toets in de site bent. Normaal geeft je browser een stippellijntje om de link waar je op dat moment bent (de focus), zoals hieronder is te zien (stippellijntje om Programma). Webbouwers halen dit lijntje soms weg en dat is niet de bedoeling.

De focus rectangle is zichtbaar op NCDT 2018

Succescriterium

  • 2.4.7 Focus zichtbaar

Toepassen

  1. Ga met je tabtoets door je site en controleer of je steeds kunt zien waar je met de tabtoets zit.
  2. Doe dit door de hele pagina totdat je weer bij het begin bent.
  3. Zie je de focus niet, dan is de focus mogelijk verwijderd door de webbouwer.

Let er ook dat de focus zichtbaar is bij aanklikbare afbeeldingen.

Opmerking:
In WCAG 2.2 is een extra criterium over deze focus opgenomen, zie Mogelijke toevoeging WCAG 2.2. Handig om alvast rekening te houden.

4.4 Kopstijlen voor koppen

Omschrijving

Koppen geven een pagina betekenis en structuur. Vandaar dat het belangrijk is dat de kopteksten betekenisvol zijn en dat je ook de juiste kopstijlen gebruikt.

Succescriteria

  • 2.4.2 Paginatitel (niveau A)
  • 2.4.6 Koppen en labels (niveau AA)

Toepassen

Zie de uitleg in het hoofdstuk Headings voor betekenisvol opmaken in ons e-book Webcontent.

4.5 Hyperlinks

Omschrijving

Bij een link moet duidelijk zijn waar de link naar toegaat, anders wordt het een grote verrassing als je er op klikt.

Succescriteria

  • 2.4.4 Linkdoel, in context (niveau A)

Toepassen

Zie de uitleg in het hoofdstuk Hyperlinks: verbinding leggen in ons e-book Webcontent.

4.6 Plaatsaanduiding met rechts en links

Omschrijving

Het lijkt zo logisch om te schrijven 'In het submenu aan de rechterkant kunt u (...)', maar als de website responsive is zal dit vaak niet rechts zijn maar eronder of erboven. Ook blinde gebruikers kunnen niet weten waar ze de 'rechterkant' kunnen vinden, want die is er niet bij spraak- of braille-uitvoer.

Succescriteria

  • 1.3.3 Zintuiglijke eigenschappen (niveau A)

Toepassen

Verwijs niet met rechts, links of soortgelijke aanduidingen zoals een 'horizontaal menu'. Onder en boven kun je wel gebruiken.

Hieronder een voorbeeld waarbij verwezen wordt naar een horizontaal menu; voor mobiele gebruikers en gebruikers van een screenreader is het niet duidelijk welk menu bedoeld wordt.

top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.