Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung →
Barrierefreiheit
Wat betekent focusvolgorde op een website?
De focusvolgorde is de volgorde waarin de Tab-toets de bedieningselementen van een pagina aanroept. Deze moet de zichtbare rangschikking volgen: van boven naar beneden, van links naar rechts. Als de focus in plaats daarvan in alle richtingen springt, verliezen toetsenbordgebruikers hun oriëntatie — zij kunnen niet voorzien waar het volgende toetsenaanslag terechtkomt. Het WCAG-criterium 2.4.3 vereist een navolgbare volgorde.
Hoe ontstaat een verkeerde focusvolgorde
De Tab-toets volgt de volgorde van elementen in de broncode — niet wat op het scherm zichtbaar is. Als het ontwerp elementen naar andere posities verplaatst, vallen beide volgorden uit elkaar: de focus springt van het naamveld naar de voettekst en vandaar terug naar de verzendknop. Ook achteraf ingevoegde dialoogvensters belanden in de broncode vaak helemaal aan het einde — wie erin wil tabben, moet eerst door de hele rest van de pagina. Een derde klassieker zijn vast ingestelde tabvolgorde-nummers in de broncode, die een eigen volgorde afdwingen die met de lay-out botst. Dit alles is alleen zichtbaar in een echte toetsenbord-doorvoering.
Zo meet de controledienst de focusvolgorde
De controledienst drukt op uw pagina echt op de Tab-toets en registreert de positie van elke stop. Vervolgens telt hij terugsprongen: plaatsen waar de focus duidelijk omhoog of in dezelfde regel naar links springt, tegen de leesrichting in. Als meer dan 30 procent van de focusverschuivingen een terugsprong zijn, wordt het criterium als overtreden beschouwd; tussen 10 en 30 procent noteert het rapport een handmatige testcase, omdat multi-kolom lay-outs enkele sprongen kunnen verklaren. Daaronder wordt de volgorde als navolgbaar beschouwd. Het rapport geeft het aantal terugsprongen en gecontroleerde stops aan — u ziet de meetbasis, niet alleen het oordeel.
Beispiele
Fokus springt durch tabindex
<input tabindex="3" name="name">
<input tabindex="1" name="email">
<button tabindex="2">Senden</button><input name="name">
<input name="email">
<button>Senden</button>Positive tabindex-Werte erzeugen eine eigene Reihenfolge, die von der sichtbaren abweicht. Die Quelltextreihenfolge ist die richtige.
- Tab door uw belangrijkste pagina en kijk naar de markering — volgt deze de leesrichting van linksboven naar rechtsonder?
- Test vooral formulieren: de veldvolgorde per toetsenbord moet overeenkomen met de zichtbare volgorde.
- Vraag uw bureau af van vaste tabvolgorde-nummers in de broncode af te zien — de broncode-volgorde moet de zichtbare volgorde zijn.
- Laat dialoogvensters de focus bij het openen naar het venster verplaatsen en bij het sluiten naar de oorspronkelijke positie terugkeren.