7. Bedienbaar

7.1 Bedienbaar met toetsenbord en muis

Let op: Mac-gebruikers moeten de instellingen voor het toetsenbord aanpassen om te kunnen testen met het toetsenbord.

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 in principe 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. Je kunt dit zelf eenvoudig testen. Toets daarbij het volgende:

1. De toetsen tab, enter en de pijltjestoetsen werken naar verwachting
2. Alles is bereikbaar
3. Focus is zichtbaar
4. Tabvolgorde is logisch
5. Alles is bruikbaar

Het testen van de toetsenbordtoegankelijkheid is de makkelijkste en een van de belangrijkste testen op toegankelijkheid.

Regelmatig kom je tegen dat iets niet toegankelijk is met het toetsenbord. Dat gaat vaak om verkeerd geïmplementeerd JavaScript. Bijvoorbeeld bij het tabben door de site blijf je haken op een tekst, waar dit script onderzit. Dat heet een toetsenbordval.

Een screenreader kan de content ook niet-lineair opvragen. De gebruiker kan bijvoorbeeld een koppenlijst opvragen en direct naar een kop in de content springen. Of een linklijst opvragen met alle hyperlinks. In feite zijn dit de mogelijkheden om te scannen, iets wat de ziende persoon met zijn ogen doet.

Dat betekent wel weer dat het belangrijk is dat alle koppen zijn opgemaakt met kopstijlen en dat kop- en linkteksten betekenisvol zijn.

7.2 Tabindex

Met het attribuut tabindex manipuleer je de tabvolgorde binnen een website.

Normaal gesproken zijn alleen links en formulierelementen tabbaar. De tabvolgorde is bepaald door de volgorde waarin de elementen in de code staan.

Met tabindex kun je aan deze tabnavigatie wijzigen: je kunt een element toevoegen, verwijderen of de plek in de tabvolgorde wijzigen.

Waardes voor de tabindex

De tabindex heeft als waarde altijd een geheel getal (integer). Er zijn 3 manieren om het te gebruiken:

1. positief getal, bijvoorbeeld tabindex = "1": geeft een element een expliciete tabvolgorde en overschrijft daarmee de standaard tabvolgorde binnen een pagina. Gebruik deze nooit.
2. tabindex= "0": hiermee maak je een element tabbaar, op de plek waar het element in de code staat. De tabvolgorde wordt dus verder niet aangepast.
3. tabindex= "-1": hiermee haal je een element juist uit de tabvolgorde. Het is niet meer 'tabbaar'.

tabindex ="1" (of elk getal boven 1)

Een positieve waarde voor de tabindex is altijd verkeerd. Vermijd dit dus altijd. Wil je de tabvolgorde veranderen, verander dan de volgorde van de elementen in de broncode.

tabindex ="0"

Soms wil je een ander element dan een link of formulierveld ook meenemen in de tabvolgorde, bijvoorbeeld op een p-element voor een instructie bij een formulier:

<p tabindex="0">Heb je een vraag of opmerking voor ons, gebruik onderstaand formulier. Je kunt natuurlijk ook bellen of mailen, net wat je makkelijk vindt.</p>

tabindex ="-1"

Als tabindex wordt gebruikt is dat meestal om hiermee een element uit de tabnavigatie te halen. Dat kan met de waarde "-1".

Hieronder een voorbeeld waarbij een veld uit de tabvolgorde wordt gehaald:

<input type="text" id="input_extra" name="feedback[extra]" value="" tabindex="-1">

In dit geval is het een veld dat bedoeld is om spammers te weren en juist niet ingevuld moet worden.

7.3 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.internetacademy.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 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.

7.4 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 lijntje om de link waar je op dat moment bent (de focus), zoals hieronder is te zien (lijntje om NCDT 2022). Webbouwers halen dit lijntje soms weg en dat is niet de bedoeling.

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 op dat de focus zichtbaar is bij aanklikbare afbeeldingen.

7.5 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

In ons e-book webcontent geven we een uitgebreide uitleg hierover in het hoofdstuk headings voor betekenisvol opmaken.

Algemene adviezen:

• Zorg voor een <h1> op elke pagina
• Zorg voor unieke <h1>-tekst
• Pas heading alleen toe als de tekst ook echt een kop is
• Voorkom lege headings
• Hou de juiste volgorde van de niveaus aan. Bijvoorbeeld ga niet van <h2> naar <h4> of van <h2> naar <h1>.

Uitzondering: headings bij gebruik van modals

Als je werkt met een modal dan zie je bij de controle van de pagina dat de koppen van de modal ook staan in de pagina waar de modal geopend wordt. Omdat een modal meestal ook een h1 heeft, zie je 2 keer een h1 in de code. Dit is geen probleem, want in principe krijgt de schermlezer alleen de headings van de pagina waar die is, dus van de modal óf van de hoofdpagina.

7.6 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: verbindingen leggen in ons e-book Webcontent.

7.7 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 weten niet waar de 'rechterkant' is, want links of rechts bestaat niet in 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.

7.8 Instellen toetsenbordtoegankelijkheid op een Mac

Op een Apple-computer moet je de browser aanpassen om te kunnen testen op de toetsenbordtoegankelijkheid.

• Firefox:
  • Systeemvoorkeuren (van de Mac) ▸ Toetsenbord ▸ Toetscombinaties
  • Selecteer onderaan het voorkeurenvenster de optie Verplaats focus tussen regelaars met toetsenbordnavigatie. In macOS Mojave of lager kies je Alle regelaars.

  

• Chrome:
  • Voorkeuren ▸ Toegankelijkheid
  • Selecteer Navigeren op pagina's met een tekstcursor (Gebruik de sneltoets F7 om browsen met navigatietoetsen aan of uit te zetten).
• Safari:
  • Voorkeuren ▸ Geavanceerd ▸ Tabtoets markeert elk onderdeel op de webpagina