Succescriterium 2.4.3 Focus volgorde

Niveau A

Lees de officiële tekst van succescriterium 2.4.3 Focus volgorde

• De tabvolgorde

  De tabvolgorde bepaalt in welke volgorde iemand met de Tab-toets langs de links en formuliervelden gaat. Dat is iets anders dan de leesvolgorde, en het is een aparte instelling die je zelf moet zetten.

  Ga als volgt te werk:

  1. Open het zijpaneel met de paginaminiaturen.
  2. Klik in dat paneel en selecteer alle pagina’s, bijvoorbeeld met Ctrl-A (op een Mac Command-A).
  3. Klik met de rechtermuisknop en kies Pagina-eigenschappen.
  4. Kies bij Tabvolgorde de optie “Documentstructuur gebruiken”.
  5. Klik op OK.

  Zonder deze instelling gebruikt Acrobat de volgorde waarin de onderdelen ooit zijn aangemaakt. Die is meestal willekeurig, en dan springt de focus kriskras door het document.

  Thema’s

  PDF

  Doelgroepen

  Auditeur Documentmaker

  Wie het raakt

  Je bent blind Je ziet slecht

  Hulpmiddelen

  Schermlezer Voorleessoftware

  Open dit onderwerp op een eigen pagina

• Focusvolgorde: de volgorde in je HTML

  Eén regel lost het meeste op: schrijf de HTML in de volgorde waarin de pagina gelezen moet worden, en gebruik CSS alleen om te bepalen wáár iets staat.

  Deze drie eigenschappen verplaatsen het beeld zonder de volgorde te veranderen. Het oog volgt de nieuwe plek, het toetsenbord de oude:

  .blok    { order: -1; }
  .raster  { grid-row: 1; grid-column: 2; }
  .zijbalk { position: absolute; right: 0; }

  Wil je de tekst links en het beeld rechts, zet de tekst dan eerst in de HTML. Op een smal scherm komt alles onder elkaar in die volgorde te staan, en dan klopt het daar ook.

  <div class="tweeluik">
    <div class="tekst">…</div>       <!-- eerst lezen, eerst in de code -->
    <figure class="beeld">…</figure>
  </div>
  
  .tweeluik { display: grid; grid-template-columns: 1fr 1fr; }

  Gebruik geen positieve tabindex. Een getal boven nul zet het onderdeel vooraan in de rij, vóór alles wat geen tabindex heeft. Eén zo’n onderdeel zet de hele volgorde op zijn kop. tabindex="0" en tabindex="-1" zijn wel in orde.

  Let daarnaast op twee plekken waar de volgorde met script wordt bepaald. Een venster dat opengaat hoort de focus mee te nemen en bij het sluiten terug te geven aan de knop waarop is gedrukt. Een menu dat uitklapt hoort zijn onderdelen meteen na de knop te hebben staan, niet onderaan de pagina.

  Thema’s

  Bediening Formulieren

  Doelgroepen

  Auditeur Ontwikkelaar

  Wie het raakt

  Je beweegt moeilijk Je ziet slecht

  Hulpmiddelen

  Schermlezer Toetsenbord

  Open dit onderwerp op een eigen pagina

• Focusvolgorde: zo test je het

  De focusvolgorde is te toetsen met het toetsenbord en het oog. Er is geen software voor nodig.

  Ga als volgt te werk:

  • Klik bovenaan de pagina, buiten een link of invoerveld.
  • Druk op Tab en volg met je ogen waar de focus heen springt.
  • Teken die route in gedachten na: loopt hij van links naar rechts en van boven naar beneden?

  Springt de focus vooruit en dan weer terug omhoog, dan is de afwijking gevonden. Begin bij formulieren: daar heeft een verkeerde volgorde de meeste gevolgen.

  Drie plekken waar het vaak misgaat:

  • Een venster dat opengaat en de focus achterlaat op de pagina erachter.
  • Een uitklapmenu waarvan de onderdelen onderaan de pagina in de code staan.
  • Een tweeluik met beeld en tekst waarvan de code omgekeerd is.

  Zoek in de bronbestanden daarnaast naar een positieve tabindex. Elke treffer is vrijwel zeker een fout:

  tabindex="1"
  tabindex="2"

  Zoek ook naar order: en flex-direction: row-reverse in het stijlbestand. Dat hoeft geen fout te zijn, maar het is wel de plek waar je moet kijken.

  Thema’s

  Bediening Formulieren

  Doelgroepen

  Auditeur Ontwikkelaar

  Wie het raakt

  Je beweegt moeilijk Je ziet slecht

  Hulpmiddelen

  Schermlezer Toetsenbord

  Open dit onderwerp op een eigen pagina

• Focusvolgorde: wat het criterium vraagt

  Wie met het toetsenbord werkt krijgt de pagina als een rij: eerst dit, dan dat. Het overzicht dat een ziende bezoeker in één blik heeft, ontbreekt daarbij. Klopt de volgorde van de focus niet met de volgorde waarin de pagina te lezen is, dan raakt de bezoeker de draad kwijt. Zorg daarom dat de focus in een logische volgorde door de pagina loopt.

  De oorzaak is bijna altijd dezelfde. Het ontwerp vraagt het beeld rechts en de tekst links; in de code staat het beeld eerst en wordt het met CSS naar rechts geschoven. Op het scherm klopt dat, maar de focus volgt de code. De bezoeker springt dan eerst naar rechts, dan naar links en dan weer naar rechts.

  Bij een formulier heeft dat gevolgen. Gaat de focus van Postcode naar Versturen en pas daarna naar Huisnummer, dan wordt het formulier half ingevuld verstuurd.

  Dit criterium gaat over de focusvolgorde: waar Tab naartoe springt. 1.3.2 Betekenisvolle volgorde gaat over de leesvolgorde: waar de tekst over gaat. Vaak is het dezelfde fout, maar niet altijd — een pagina kan goed leesbaar zijn en toch onhandig te bedienen.

  Thema’s

  Bediening Formulieren

  Doelgroepen

  Auditeur Ontwikkelaar

  Wie het raakt

  Je beweegt moeilijk Je ziet slecht

  Hulpmiddelen

  Schermlezer Toetsenbord

  Open dit onderwerp op een eigen pagina