Ontwikkelaar

Afbeeldingen die puur decoratief zijn voegen geen informatie toe. Ze maken een pagina aantrekkelijker, maar zijn niet echt nodig om een tekst of pagina te begrijpen. Mensen die gebruik maken van schermlezers, hebben eigenlijk niets aan deze plaatjes. Zorg daarom dat decoratieve afbeeldingen worden verborgen voor schermlezers.

Decoratieve afbeeldingen kunnen het best met CSS worden geplaatst.

In de code ziet dat er zo uit:

<div class="line"></div>

.line {
 background-image: url("horizontale-lijn.jpg");
}

Als het niet mogelijk is om een decoratieve afbeelding met CSS te plaatsen, dan moet het alt-attribuut in het <​img​>-element worden leeg gelaten. Het alt-attribuut moet wel aanwezig zijn maar het heeft dan geen tekst.

In de code ziet dat er zo uit:

<img src="horizontale-lijn.jpg" alt="">

Open dit onderwerp op een eigen pagina

Zorg dat alle bewegende, scrollende of knipperende content dat automatisch start én langer dan 5 seconden duurt kan worden gepauzeerd, gestopt of worden uitgezet. Onder bewegende, scrollende of knipperende content vallen onder andere carrousels, animaties op de pagina, bewegende advertenties, enz. Bezoekers met een cognitieve beperking kunnen er door worden afgeleid. Ook voor bezoekers die gebruik maken van een schermlezer kan dit storend zijn.

Deze regels gelden ook alle automatisch verversende content, maar hiervoor geldt ook de frequentie van updates mag worden aangepast.

Open dit onderwerp op een eigen pagina

De zichtbaarheid van de focus is met het toetsenbord te toetsen. Er is geen software voor nodig.

Ga als volgt te werk:

• Open de pagina en klik één keer bovenaan, buiten een link of invoerveld.
• Druk op Tab, en blijf drukken tot je onderaan de pagina bent.
• Kijk bij elke druk of zichtbaar is welk onderdeel is geselecteerd.

Let daarbij op vier dingen:

• Verdwijnt de focus? Er verandert niets in beeld, terwijl er wel iets is geselecteerd.
• Springt de focus heen en weer? Dan klopt de volgorde niet met wat er staat. Dat valt onder 2.4.3.
• Kom je ergens niet meer weg? Een venster of videospeler die je met Tab niet uit komt is een toetsenbordval.
• Schuift de pagina mee? Staat het geselecteerde onderdeel half onder een vaste balk, dan valt dat onder 2.4.11.

Is de focus nergens te zien, zoek dan in het stijlbestand naar deze regels:

outline: none;
outline: 0;

Staan die er, en staat er geen eigen rand voor in de plaats, dan is de oorzaak gevonden.

Open dit onderwerp op een eigen pagina

Zoek eerst alles op wat verschijnt bij aanwijzen of bij focus. Dat zijn meestal vraagtekens, pictogrammen, menu’s en linkvoorbeelden.

Ga daarna als volgt te werk:

• Wijs het onderdeel aan tot de uitleg verschijnt.
• Beweeg de aanwijzer langzaam naar de uitleg toe. Blijft hij staan?
• Ga met de aanwijzer over de uitleg heen. Blijft hij nog steeds staan?
• Druk op Escape zonder de aanwijzer te verplaatsen. Verdwijnt hij?
• Wijs opnieuw aan en wacht tien seconden. Verdwijnt hij vanzelf?

Doe de test daarna met het toetsenbord. Tab naar hetzelfde onderdeel: verschijnt de uitleg ook dan? Zo niet, dan mist een deel van de bezoekers hem helemaal.

Open dit onderwerp op een eigen pagina

Deze test duurt tien seconden per knop en vraagt alleen een muis of een vinger.

Ga als volgt te werk:

• Druk een knop in en houd vast.
• Schuif de muis of vinger van de knop af, ernaast.
• Laat los.

Er hoort niets te gebeuren. Gebeurt het toch, dan reageert de knop op het indrukken en is de afwijking gevonden.

Test niet alle knoppen. Begin bij de knoppen waar een vergissing gevolgen heeft: verwijderen, versturen, betalen, opzeggen, en alles wat een venster sluit zonder op te slaan.

In de console van Chrome is dit ook op te zoeken:

['mousedown', 'pointerdown', 'touchstart'].forEach(function (soort) {
  document.querySelectorAll('*').forEach(function (el) {
    if (typeof getEventListeners === 'function' && getEventListeners(el)[soort]) {
      console.warn(soort, el);
    }
  });
});

getEventListeners bestaat alleen in de console van Chrome. In andere browsers zoek je in de bronbestanden naar die drie woorden; dat werkt overal.

Open dit onderwerp op een eigen pagina

Zoek eerst alles op wat normaal versleept wordt: schuifregelaars, herschikbare lijsten, kaarten en carrousels.

Ga daarna als volgt te werk:

• Bedien het onderdeel zonder ingedrukt te houden.
• Gebruik alleen losse klikken of tikken.
• Lukt het niet, dan is dat de afwijking.

Doe de test daarna nog eens met alleen het toetsenbord. Dat is 2.1.1 Toetsenbord, maar het gaat vaak om dezelfde onderdelen.

Test ook op een aanraakscherm. Onderdelen die met een muis goed werken zijn met een vinger soms alleen te vegen, en dan is er geen alternatief.

Uitzonderingen waar je geen afwijking op hoeft te melden:

• Een handtekening zetten. Het pad dat wordt getrokken is het resultaat.
• Tekenen of schilderen.
• Een handeling waarbij de precieze plek telt en die niet in stappen te doen is.

Open dit onderwerp op een eigen pagina

Bovenaan de pagina staat een vaste balk op zijn plek en bedekt hij niets. De fout laat zich pas zien nadat de pagina is gescrold.

Ga als volgt te werk:

• Scroll een halve pagina naar beneden.
• Klik ergens in de tekst, buiten een link.
• Druk op Tab en kijk of het geselecteerde onderdeel zichtbaar is.
• Doe hetzelfde met Shift en Tab, dus omhoog. Daar gaat het het vaakst mis.

Voor dit criterium mag een deel bedekt zijn. Is er nog een stuk van de knop en de focusrand te zien, dan voldoet het. Is er niets te zien, dan niet. Bij twijfel is het antwoord meestal dat het niet genoeg is: een knop waarvan twee pixels zichtbaar zijn, is niet gevonden.

Dit script meldt elk onderdeel dat bij het krijgen van de focus wordt bedekt. Plak het in de console van de browser en tab daarna door de pagina:

document.addEventListener('focusin', function (e) {
  var r = e.target.getBoundingClientRect();
  var boven = document.elementFromPoint(r.left + 4, r.top + 4);
  if (boven && boven !== e.target && !e.target.contains(boven)) {
    console.warn('bedekt door', boven, e.target);
  }
});

Elke melding is een plek om na te kijken. Het script vervangt de test niet, want het kent het verschil tussen gedeeltelijk en volledig bedekt niet.

Open dit onderwerp op een eigen pagina

Knoppen hoeven er niet groter uit te zien. Het gaat om het gebied dat op een tik reageert, en dat mag onzichtbaar zijn.

De eenvoudigste oplossing laat het pictogram op 16 pixels staan en maakt de knop eromheen 24:

.icoonknop {
  min-inline-size: 24px;
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Is er echt geen ruimte, vergroot het gebied dan met een onzichtbare laag over de knop heen. Het beeld blijft klein, het doel wordt groot:

.icoonknop { position: relative; }

.icoonknop::after {
  content: "";
  position: absolute;
  inset: -8px;          /* 8 pixels extra aan elke kant */
}

Waar het meestal misgaat:

• Rijen pictogrammen naast elkaar in een tabel of werkbalk.
• Het sluitkruisje van een venster. Dat is bijna altijd te klein, terwijl het de knop is die iemand onder tijdsdruk zoekt.
• Paginanummers onder een lijst, vaak 20 bij 20 met een paar pixels ertussen.

Open dit onderwerp op een eigen pagina

De oplossing is bijna altijd hetzelfde: het slepen blijft, er komt een manier met losse klikken naast.

Bij een schuifregelaar gebruik je input type="range", die met de pijltoetsen te bedienen is. Voor de aanwijzer zet je er twee knoppen naast, met het getal erbij zodat zichtbaar is wat er verandert:

<button type="button" aria-label="Minder">−</button>
<input type="range" id="prijs" min="0" max="500" step="10" value="100">
<button type="button" aria-label="Meer">+</button>
<output for="prijs">100 euro</output>

Bij een lijst die herschikt kan worden zet je bij elk onderdeel een knop omhoog en een knop omlaag. Dat werkt met de muis, met een aanraakscherm, met een toetsenbord en met een schermlezer:

<li>
  Nieuwsbrief
  <button type="button" aria-label="Nieuwsbrief omhoog">↑</button>
  <button type="button" aria-label="Nieuwsbrief omlaag">↓</button>
</li>

Bij een carrousel horen er knoppen voor vorige en volgende te zijn naast het vegen. Bij een kaart knoppen om te verschuiven en te zoomen; de meeste kaartbibliotheken hebben die al, maar soms staan ze uit.

Open dit onderwerp op een eigen pagina

Alle functies op een website moeten te bereiken en gebruiken zijn met alleen het toetsenbord. Sommige bezoekers kunnen geen muis gebruiken door bijvoorbeeld een visuele of motorische beperking. Als alle functionaliteit met het toetsenbord kan worden bediend, dan werkt deze ook met een groot aantal hulptechnologieën. Zorg daarom dat onderdelen zoals links, knoppen, navigatie, invoervelden, selectievakjes, keuzerondjes, keuzelijsten en alle andere interactieve functies de toetsenbordfocus kunnen krijgen en kunnen worden gebruikt.

Standaard HTML-elementen voor links, knoppen en formulierelementen op de website zijn goed toegankelijk met het toetsenbord.

De standaard toetsenbordnavigatie is als volgt:

• Met TAB navigeert de toetsenbordfocus vooruit.
• Met SHIFT + TAB navigeert de toetsenbordfocus achteruit.
• Met de pijltoetsen kan worden genavigeerd in gegroepeerde menu’s of radiobuttons.

Bezoekers die gebruik maken van het toetsenbord gebruiken de TAB-toets om door een website te navigeren. De TAB-toets verplaatst de toetsenbordfocus naar het volgende focuseerbare onderdeel.

Open dit onderwerp op een eigen pagina

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.

Open dit onderwerp op een eigen pagina

Als bezoekers met het toetsenbord naar een onderdeel op de pagina kunnen navigeren, maar er niet meer vandaan kunnen, dan is dit een toetsenbordval. Om uit een toetsenbordval te raken is de enige manier vaak om de muis (of ander aanwijsapparaat) te gebruiken of om de pagina helemaal te herladen. Dit is geen optie voor bezoekers die geen gebruik kunnen maken van de muis. Dit komt soms voor als er plugins worden gebruikt.

Zorg dat met het toetsenbord helemaal over de pagina kan worden genavigeerd.

Open dit onderwerp op een eigen pagina

Een balk die vastgeplakt in beeld blijft staan kan het onderdeel bedekken waar de toetsenbordfocus net naartoe is gesprongen. De bezoeker ziet dan niet welk onderdeel is geselecteerd en weet niet wat er gebeurt bij het indrukken van Enter. Zorg daarom dat het onderdeel met de focus niet volledig bedekt wordt.

Een deel mag bedekt zijn, als de rest maar zichtbaar blijft. Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA, dus het valt onder de wettelijke eis. Er is ook een strengere versie: 2.4.12 Focus niet bedekt (uitgebreid) op niveau AAA, waarbij er niets overheen mag staan.

De oorzaak is bijna altijd een van deze:

• Een menubalk die vastgeplakt bovenaan blijft staan.
• Een cookiemelding onderaan het scherm.
• Een chatknop in de hoek.
• Een balk met acties die verschijnt zodra de bezoeker scrolt.
• Een tabel met een vastgezette kop of kolom.

Open dit onderwerp op een eigen pagina

Een website moet werken in zowel de staande als de liggende stand. Niet iedereen kan zijn apparaat draaien: een telefoon in een houder op een rolstoel staat vast, en wie een tablet op een standaard heeft staan of met één hand werkt kan dat ook niet. Een melding als “Draai je scherm voor de beste ervaring” maakt de site voor die bezoekers onbruikbaar.

Je mag geen stand afdwingen, tenzij het echt niet anders kan — een piano-app of het fotograferen van een cheque zijn de gebruikelijke voorbeelden.

Wat er ook onder valt:

• Een pagina die alleen in staande stand een menu toont.
• Een videospeler die in liggende stand het scherm overneemt en niet meer terug wil.
• Een app die in de manifest-instellingen op één stand is vastgezet.

Open dit onderwerp op een eigen pagina

Het onderdeel dat met het toetsenbord is geselecteerd heeft de focus. De browser zet daar standaard een rand omheen, zodat zichtbaar is waar de bezoeker zich bevindt. Ontbreekt die rand, dan is niet te zien welk onderdeel wordt bediend en wat er gebeurt bij het indrukken van Enter. Zorg daarom dat de toetsenbordfocus altijd zichtbaar is.

Dit raakt vooral:

• Bezoekers die geen muis kunnen vasthouden en alles met het toetsenbord doen.
• Bezoekers die een schermvergroting gebruiken en maar een klein deel van het scherm zien. De focus geeft aan waar dat deel moet staan.
• Bezoekers die met een schakelaar of met hun stem werken.

De rand is op de meeste sites ooit bewust weggehaald, met één regel CSS: outline: none. De standaardrand is niet mooi, maar het antwoord daarop is een betere rand en niet geen rand.

Open dit onderwerp op een eigen pagina

Verschijnt er extra inhoud zodra een bezoeker iets aanwijst of met het toetsenbord selecteert — een tooltip, een uitklapmenu, een voorbeeldvenster — dan moet die inhoud te lezen zijn. Wie ingezoomd werkt ziet de uitleg buiten zijn deel van het scherm staan en moet er met de aanwijzer naartoe. Verdwijnt de uitleg onderweg, dan is hij onbereikbaar.

Er gelden drie eisen:

• Wegklikbaar. De uitleg is te sluiten met Escape, zonder de aanwijzer te verplaatsen.
• Aanwijsbaar. De aanwijzer kan erheen zonder dat de uitleg verdwijnt.
• Blijvend. De uitleg blijft staan tot de bezoeker wegwijst, hem sluit of de informatie niet meer klopt. Niet tot een tijdklok afloopt.

Waar dit opduikt: tooltips bij een pictogram of vraagteken, uitklapmenu’s die opengaan bij aanwijzen, voorbeeldvensters bij een link, foutmeldingen die bij focus verschijnen, en een winkelmandje dat opengaat bij aanwijzen.

Open dit onderwerp op een eigen pagina

Sommige functionaliteit op een website is alleen te uit te voeren met een moeilijk gebaar. Bijvoorbeeld gebaren waarbij de bezoeker meerdere vingers moet gebruiken (meerpuntsgebaren) of gebaren waarbij de bezoeker een vinger (of de aanwijzer) in een bepaald pad moet bewegen (pad gebaseerde gebaren). Bezoekers kunnen, om verschillende redenen, soms niet in staat zijn om moeilijke gebaren te maken met hun vingers of met een aanwijzer. Bijvoorbeeld door een motorische beperking.

Zorg dat functionaliteit die met gebaren wordt geactiveerd, ook met een klik, dubbelklik of klikken-en-vasthouden van een muis kan worden geactiveerd. Dit kan bijvoorbeeld met een eenvoudige bediening toe te voegen.

Open dit onderwerp op een eigen pagina

Zoek eerst alles op wat verschijnt bij aanwijzen of bij focus. Dat zijn meestal vraagtekens, pictogrammen, menu’s en linkvoorbeelden.

Ga daarna als volgt te werk:

• Wijs het onderdeel aan tot de uitleg verschijnt.
• Beweeg de aanwijzer langzaam naar de uitleg toe. Blijft hij staan?
• Ga met de aanwijzer over de uitleg heen. Blijft hij nog steeds staan?
• Druk op Escape zonder de aanwijzer te verplaatsen. Verdwijnt hij?
• Wijs opnieuw aan en wacht tien seconden. Verdwijnt hij vanzelf?

Doe de test daarna met het toetsenbord. Tab naar hetzelfde onderdeel: verschijnt de uitleg ook dan? Zo niet, dan mist een deel van de bezoekers hem helemaal.

Open dit onderwerp op een eigen pagina

Zoek eerst alles op wat normaal versleept wordt: schuifregelaars, herschikbare lijsten, kaarten en carrousels.

Ga daarna als volgt te werk:

• Bedien het onderdeel zonder ingedrukt te houden.
• Gebruik alleen losse klikken of tikken.
• Lukt het niet, dan is dat de afwijking.

Doe de test daarna nog eens met alleen het toetsenbord. Dat is 2.1.1 Toetsenbord, maar het gaat vaak om dezelfde onderdelen.

Test ook op een aanraakscherm. Onderdelen die met een muis goed werken zijn met een vinger soms alleen te vegen, en dan is er geen alternatief.

Uitzonderingen waar je geen afwijking op hoeft te melden:

• Een handtekening zetten. Het pad dat wordt getrokken is het resultaat.
• Tekenen of schilderen.
• Een handeling waarbij de precieze plek telt en die niet in stappen te doen is.

Open dit onderwerp op een eigen pagina

Gegevens die binnen hetzelfde proces al zijn ingevuld, mogen niet een tweede keer worden gevraagd. Gebeurt dat toch, dan moeten ze automatisch worden ingevuld of te kiezen zijn uit wat er al staat. Overbodig typen is niet gelijk verdeeld: wie met één vinger, met zijn stem of met een schakelaar werkt is er minuten mee kwijt, en maakt bij elke aanslag kans op een fout.

Dit criterium is nieuw in WCAG 2.2 en staat op niveau A.

Er zijn twee uitzonderingen: als het opnieuw invullen nodig is voor de veiligheid, zoals bij een wachtwoord, en als de oude informatie niet meer geldig is.

Open dit onderwerp op een eigen pagina

De eis laat vrij hóe het wordt opgelost. Er zijn drie manieren, en welke past hangt af van hoe zeker het antwoord hetzelfde is.

Weet je het antwoord zeker, vul het dan in. De bezoeker kan het nog aanpassen:

<label for="post-straat">Straat en huisnummer</label>
<input id="post-straat" name="post_straat"
       value="Marsweg 89A"
       autocomplete="shipping street-address">

Een vinkje “hetzelfde als hierboven” is de bekendste oplossing en meestal de beste. Zet hem aan als dat het gewone geval is, dan hoeft de meerderheid niets te doen:

<input type="checkbox" id="zelfde" name="zelfde" checked>
<label for="zelfde">Mijn afleveradres is hetzelfde als mijn factuuradres</label>

Zijn er meerdere eerdere antwoorden, geef dan een keuzelijst in plaats van een leeg veld.

Zet daarnaast op elk veld het juiste autocomplete-woord. Dan vult de browser of de wachtwoordbeheerder het zelf in, zonder eigen code. Daarmee voldoe je meteen aan 1.3.5 Identificeer het doel van de input:

autocomplete="name"
autocomplete="email"
autocomplete="postal-code"
autocomplete="shipping street-address"
autocomplete="billing street-address"

Open dit onderwerp op een eigen pagina

Er is één oplossing die altijd werkt en die in twee minuten is gebouwd: zet er een knop naast.

<!-- niet doen -->
<select onchange="this.form.submit()">

<!-- wel doen -->
<select id="sortering" name="sortering">…</select>
<button type="submit">Toon resultaten</button>

Dat kost één klik en voorkomt dat een bezoeker per ongeluk ergens anders belandt. Het werkt bovendien zonder JavaScript.

Wil je toch automatisch versturen, dan mag dat als je het vooraf aankondigt. Zet die aankondiging in het label en niet erachter, anders wordt hij pas gelezen als het al is gebeurd:

<label for="taal">Taal <span class="hint">(de pagina laadt opnieuw)</span></label>
<select id="taal" name="taal" onchange="this.form.submit()">

Open dit onderwerp op een eigen pagina

De oplossing is bijna altijd hetzelfde: het slepen blijft, er komt een manier met losse klikken naast.

Bij een schuifregelaar gebruik je input type="range", die met de pijltoetsen te bedienen is. Voor de aanwijzer zet je er twee knoppen naast, met het getal erbij zodat zichtbaar is wat er verandert:

<button type="button" aria-label="Minder">−</button>
<input type="range" id="prijs" min="0" max="500" step="10" value="100">
<button type="button" aria-label="Meer">+</button>
<output for="prijs">100 euro</output>

Bij een lijst die herschikt kan worden zet je bij elk onderdeel een knop omhoog en een knop omlaag. Dat werkt met de muis, met een aanraakscherm, met een toetsenbord en met een schermlezer:

<li>
  Nieuwsbrief
  <button type="button" aria-label="Nieuwsbrief omhoog">↑</button>
  <button type="button" aria-label="Nieuwsbrief omlaag">↓</button>
</li>

Bij een carrousel horen er knoppen voor vorige en volgende te zijn naast het vegen. Bij een kaart knoppen om te verschuiven en te zoomen; de meeste kaartbibliotheken hebben die al, maar soms staan ze uit.

Open dit onderwerp op een eigen pagina

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.

Open dit onderwerp op een eigen pagina

Soms moeten formulieren binnen een bepaalde tijd worden ingevuld of verloopt een inlogsessie na een bepaalde termijn. Zo’n tijdslimiet is niet handig voor bezoekers die meer tijd nodig hebben. Bijvoorbeeld omdat zij gebruik maken van hulptechnologieën of omdat zij door een cognitieve beperking meer tijd nodig hebben om tekst te lezen. Zorg daarom dat er geen tijdslimiet wordt gebruikt. Als het echt niet anders kan, geef bezoekers dan de mogelijkheid om de tijdslimiet aan te passen. Dit kan op één van de volgende manieren:

• Uitzetten: Laat bezoekers de tijdslimiet uitzetten voordat het begint.
• Aanpassen: Laat bezoekers de tijdslimiet aanpassen tot ten minste 10 keer de tijdslimiet voordat het begint.
• Verlengen: Geef bezoekers een waarschuwing voordat de tijd afloopt en geef ze tenminste 20 seconden om de tijdslimiet te verlengen. Laat de bezoeker dit ten minste 10 keer doen.

Niet bij alle tijdslimieten is het nodig dat deze kan worden uitgezet, aangepast of worden verlengt. Er zijn namelijk een paar uitzonderingen:

• Real-time: Als de tijdslimiet onderdeel is van een real-time gebeurtenis, zoals het bieden in veiling, en er geen alternatief voor de tijdslimiet mogelijk is.
• Essentieel: Als de tijdslimiet zelf essentieel is, zoals bij een toets die in een bepaalde tijd moet worden gemaakt, en verlenging de activiteit ongeldig zou maken.
• Langer dan 20 uur: Als de tijdslimiet langer is dan 20 uur.

Open dit onderwerp op een eigen pagina

Verschijnt er extra inhoud zodra een bezoeker iets aanwijst of met het toetsenbord selecteert — een tooltip, een uitklapmenu, een voorbeeldvenster — dan moet die inhoud te lezen zijn. Wie ingezoomd werkt ziet de uitleg buiten zijn deel van het scherm staan en moet er met de aanwijzer naartoe. Verdwijnt de uitleg onderweg, dan is hij onbereikbaar.

Er gelden drie eisen:

• Wegklikbaar. De uitleg is te sluiten met Escape, zonder de aanwijzer te verplaatsen.
• Aanwijsbaar. De aanwijzer kan erheen zonder dat de uitleg verdwijnt.
• Blijvend. De uitleg blijft staan tot de bezoeker wegwijst, hem sluit of de informatie niet meer klopt. Niet tot een tijdklok afloopt.

Waar dit opduikt: tooltips bij een pictogram of vraagteken, uitklapmenu’s die opengaan bij aanwijzen, voorbeeldvensters bij een link, foutmeldingen die bij focus verschijnen, en een winkelmandje dat opengaat bij aanwijzen.

Open dit onderwerp op een eigen pagina

Zorg voor labels bij invoervelden

Labels zijn het belangrijkste element voor een toegankelijk formulier. Zorg voor labels bij alle invoervelden of ander formulierelementen zoals selectievakjes, keuzerondjes en keuzelijsten. Een duidelijk label beschrijft precies wat er in het veld ingevuld moet worden, is zichtbaar voor alle bezoekers en staat dichtbij het invoerveld.

Het label moet in de code worden gekoppeld aan het invoerveld. Zo maak je het invoerveld ook toegankelijk voor bezoekers die gebruik maken van hulptechnologieën. Het label is de naam van het invoerveld. Een label vergroot ook het klikbare gebied waarmee een invoerveld kan worden geselecteerd. Dit is handig voor bijvoorbeeld bezoekers met een motorische beperking.

Koppel labels in de code aan een invoerveld

Labels worden geplaatst met het <​label​>-element. Het koppelen van een <​label​>-element aan een formulierelement gebeurt met een for/id-koppeling. Geef hiervoor het <​label​>-element een for-attribuut en het bijbehorende formulierelement een id-attribuut met dezelfde waarde.

In de code ziet dat er zo uit:

<label for="veld1">Naam:</label>
<input type="text" id="veld1">

<label for="veld2">Kies je kleur:</label>
<select id="veld2">
  <option value="0">Rood</option>
  <option value="1">Groen</option>
  <option value="2">Blauw</option>
</select>

<input type="checkbox" id="veld3">
<label for="veld3">Meld mij aan voor de nieuwsbrief</label>

Er zijn ook manieren om de labels visueel te verbergen. Vraag je dan wel goed af waarom je dat zou willen doen. Het invoerveld verliest dan het grotere klikbare gebied en het wordt misschien minder duidelijk voor bezoekers. Als het label toch visueel wordt verborgen, zorg er dan er wel voor dat er een label beschikbaar is voor hulptechnologieën. Gebruik hiervoor het attribuut aria-label, aria-labelledby of een title-attribuut. Deze zijn niet zichtbaar.

In de code ziet dat er zo uit:

<input type="text" aria-label="Naam">

Groepeer meerdere secties van gerelateerde invoervelden

Als een formulier meerdere secties van gerelateerde invoervelden heeft dan wordt een <​fieldset​>-element gebruikt om deze te groeperen. Geef het <​fieldset​>-element een label door een <​legend​>-element in het <​fieldset​>-element te plaatsen. Hulptechnologieën gebruiken het <​legend​>-element alsof het een onderdeel is van het label van de elementen in het <​fieldset​>-element.

Het <​fieldset​>-element is vooral relevant voor het groeperen selectierondjes en keuzevakjes maar kan ook worden gebruikt om andere invoervelden te groeperen.

In de code ziet dat er zo uit:

<fieldset>
  <legend>Ben jij al orgaandonor?</legend>

  <input type="radio" id="veld1">
  <label for="veld1" value="ja">Ja, ik ben orgaandonor</label>

  <input type="radio" id="veld2">
  <label for="veld2" value="nee">Nee, ik ben geen orgaandonor</label>
</fieldset>

Zorg voor instructies bij invoervelden

Instructies geven een extra hint voor de invoer in het invoerveld. De instructies in een formulier moeten aangeven of er verplichte velden zijn en eventueel of er een verplicht invoerformaat is.

Geef aan dat een invoerveld verplicht is

Het aangeven van een verplicht invoerveld kan in tekst of bijvoorbeeld met een asteriks (*). Zorg dat deze aanduiding in het <​label​>-element is geplaatst.

In de code ziet dat er zo uit:

<label for="veld1">Naam: (verplicht)</label>
<input type="text" id="veld1">

Als de instructies niet duidelijk per invoerveld worden benoemd dan hoort voorafgaand aan het eerste invoerveld in tekst worden aangegeven op welke manier de verplichte velden zijn aangeduid.

In de code ziet dat er zo uit:

<p>Alle velden met een * zijn verplicht.</p>

<label for="veld1">Naam: *</label>
<input type="text" id="veld1">

<label for="veld2">Favoriete dier: *</label>
<input type="text" id="veld2">

Markeer verplichte velden ook in de code. Gebruik hiervoor bij voorkeur het aria-required-attribuut.

<p>Alle velden met een * zijn verplicht.</p>

<label for="veld1">Naam: *</label>
<input type="text" id="veld1" aria-required="true">

<fieldset>
  <legend>Ben jij al orgaandonor? *</legend>

  <input type="radio" id="veld2" value="ja" aria-required="true">
  <label for="veld2">Ja, ik ben orgaandonor</label>

  <input type="radio" id="veld3" value="nee" aria-required="true">
  <label for="veld3">Nee, ik ben geen orgaandonor</label>
</fieldset>

Geef het aan als er een verplicht invoerformaat is verplicht is

Ook bij verplichte invoerformaten, zoals een postcode of een e-mailadres die moet worden ingevuld, moeten blijken uit de instructies wat de eisen zijn aan de invoer. Dit kan direct in het <​label​>-element.

In de code ziet dat er zo uit:

<label for="veld1">Geboortedatum (dd-mm-jjjj):</label>
<input type="text" id="veld1">

Maar dit kan ook via het attribuut aria-describedby.

In de code ziet dat er zo uit:

<label for="veld1">Geboortedatum:</label>
<input type="text" id="veld1" aria-describedby="beschrijving">
<span id="beschrijving">dd-mm-jjjj</span>

Open dit onderwerp op een eigen pagina

Als er door het insturen van een formulier een onomkeerbare actie wordt uitgevoerd die grote gevolgen kan hebben, dan moet er voor worden gezorgd dat bezoekers de inzending kunnen annuleren, controleren of bevestigen.

Bezoekers met een functiebeperking lopen vaak meer risico om fouten te maken. Mensen met dyslexie kunnen letters en cijfers omdraaien en mensen met motorische stoornissen kunnen per ongeluk toetsen aanslaan. Eigenlijk hebben alle bezoekers profijt van de mogelijkheid om ernstige fouten te voorkomen.

Bij een formulier waarmee een wettelijke of financiële transactie wordt gedaan, kun je één van de volgende technieken toepassen:

• Geef de bezoeker na verzending van het formulier een bepaalde tijd om de inzending te wijzigen of annuleren.
• Toon voordat het formulier wordt verzonden een overzicht van de ingevulde gegevens en bied de bezoeker de mogelijkheid om deze te verbeteren.
• Voeg een selectievakje toe aan het formulier waarmee de bezoeker aan kan geven dat hij de gegevens heeft gecontroleerd en dat deze correct zijn, voordat hij het formulier verzendt.

Bij een formulier waarmee de bezoeker gegevens kan wijzigen of verwijderen, zoals profielgegevens op een website, kun je één van de volgende technieken toepassen:

• Bied de mogelijkheid om verwijderde gegevens terug te halen.
• Vraag bevestiging om door te gaan met de actie van het wijzigen of verwijderen.
• Voeg een selectievakje toe aan het formulier waarmee de bezoeker aan kan geven dat hij de gegevens heeft gecontroleerd en dat deze correct zijn, voordat hij het formulier verzendt.

Bij een formulier waarmee de bezoeker antwoorden kan geven op vragen uit een test, toets of examen, kun je één van de volgende technieken toepassen:

• Bied de mogelijkheid om antwoorden te controleren en verbeteren voordat ze worden verzonden.
• Vraag bevestiging om door te gaan met het inzenden van het antwoord.

Open dit onderwerp op een eigen pagina

Zorg dat alle bewegende, scrollende of knipperende content dat automatisch start én langer dan 5 seconden duurt kan worden gepauzeerd, gestopt of worden uitgezet. Onder bewegende, scrollende of knipperende content vallen onder andere carrousels, animaties op de pagina, bewegende advertenties, enz. Bezoekers met een cognitieve beperking kunnen er door worden afgeleid. Ook voor bezoekers die gebruik maken van een schermlezer kan dit storend zijn.

Deze regels gelden ook alle automatisch verversende content, maar hiervoor geldt ook de frequentie van updates mag worden aangepast.

Open dit onderwerp op een eigen pagina

Laat geluid niet automatisch spelen na het laden van een pagina, of zorg er in elk geval voor dat het geluid niet langer dan 3 seconden duurt. Voor bezoekers die gebruik maken van voorleessoftware kan het storend zijn als geluid automatisch begint te spelen. Zij kunnen de stem van voorleessoftware dan niet meer goed te horen. Ook voor bezoekers die moeite hebben met concentratie kunnen er door worden afgeleid.

Geluid dat toch automatisch begint te spelen, moet eenvoudig kunnen worden gepauzeerd, gestopt of zachter worden gezet. Zorg dan voor een pauze- of stopknop en een volumeregelaar bij het geluid. Voorzie eventueel ook een skiplink zodat deze bediening gemakkelijk te bereiken is.

Open dit onderwerp op een eigen pagina

Bovenaan de pagina staat een vaste balk op zijn plek en bedekt hij niets. De fout laat zich pas zien nadat de pagina is gescrold.

Ga als volgt te werk:

• Scroll een halve pagina naar beneden.
• Klik ergens in de tekst, buiten een link.
• Druk op Tab en kijk of het geselecteerde onderdeel zichtbaar is.
• Doe hetzelfde met Shift en Tab, dus omhoog. Daar gaat het het vaakst mis.

Voor dit criterium mag een deel bedekt zijn. Is er nog een stuk van de knop en de focusrand te zien, dan voldoet het. Is er niets te zien, dan niet. Bij twijfel is het antwoord meestal dat het niet genoeg is: een knop waarvan twee pixels zichtbaar zijn, is niet gevonden.

Dit script meldt elk onderdeel dat bij het krijgen van de focus wordt bedekt. Plak het in de console van de browser en tab daarna door de pagina:

document.addEventListener('focusin', function (e) {
  var r = e.target.getBoundingClientRect();
  var boven = document.elementFromPoint(r.left + 4, r.top + 4);
  if (boven && boven !== e.target && !e.target.contains(boven)) {
    console.warn('bedekt door', boven, e.target);
  }
});

Elke melding is een plek om na te kijken. Het script vervangt de test niet, want het kent het verschil tussen gedeeltelijk en volledig bedekt niet.

Open dit onderwerp op een eigen pagina

Deze test doe je met het oog en een handvol pagina’s.

Ga als volgt te werk:

• Kies vijf pagina’s die niet op elkaar lijken: de homepage, een dienstenpagina, een formulier, een artikel en een bevestigingspagina.
• Zoek op elke pagina alle vormen van hulp: telefoon, e-mail, contact, chat, veelgestelde vragen.
• Noteer waar ze staan en in welke volgorde.
• Leg de vijf lijstjes naast elkaar.

Waar het meestal misgaat:

• De bestelpagina zonder voettekst, bewust weggehaald om afleiding te voorkomen — precies waar een bezoeker vastloopt.
• Een chatknop die alleen op sommige pagina’s staat.
• Een telefoonnummer in de koptekst op de homepage en alleen in de voettekst op de rest.
• Een volgorde die wisselt: op de ene pagina eerst chat en dan telefoon, op de andere andersom.

Open dit onderwerp op een eigen pagina

Je zoekt onderdelen die hetzelfde doen maar anders heten. Die vind je door de namen naast elkaar te leggen.

Haal de namen op met dit script in de console:

[...document.querySelectorAll('button, a, [role=button]')]
  .map(function (el) {
    return (el.getAttribute('aria-label') || el.textContent).trim();
  })
  .filter(Boolean)
  .forEach(function (n) { console.log(n); });

Doe dit op vijf verschillende pagina’s en zet de uitkomsten onder elkaar in een tekstbestand.

Waar je op let:

• Varianten van hetzelfde woord: zoeken, zoek, search.
• Knoppen die hetzelfde doen maar anders heten.
• Pictogrammen zonder naam. Die komen als lege regel terug.
• Namen die twee keer voorkomen maar iets anders doen. Dat is de omgekeerde fout.

Open dit onderwerp op een eigen pagina

Biedt een website op meerdere pagina’s hulp aan, dan hoort die hulp op elke pagina op dezelfde plek te staan, in dezelfde volgorde. Staat het telefoonnummer op de ene pagina rechtsboven en op de volgende ergens anders, dan raakt de bezoeker het kwijt op het moment dat hij het nodig heeft.

Het gaat er niet om óf er hulp wordt aangeboden — dat is een eigen keuze. Het gaat erom dat de hulp niet per pagina verspringt. Dit criterium is nieuw in WCAG 2.2 en staat op niveau A, dus het valt onder de wettelijke eis.

Als hulp telt:

• Een telefoonnummer of e-mailadres.
• Een link naar contact of een contactformulier.
• Een chatvenster of een chatbot.
• Een link naar veelgestelde vragen of een helpdesk.
• Een link naar een zelfhulppagina bij een specifieke stap.

Open dit onderwerp op een eigen pagina

Een balk die vastgeplakt in beeld blijft staan kan het onderdeel bedekken waar de toetsenbordfocus net naartoe is gesprongen. De bezoeker ziet dan niet welk onderdeel is geselecteerd en weet niet wat er gebeurt bij het indrukken van Enter. Zorg daarom dat het onderdeel met de focus niet volledig bedekt wordt.

Een deel mag bedekt zijn, als de rest maar zichtbaar blijft. Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA, dus het valt onder de wettelijke eis. Er is ook een strengere versie: 2.4.12 Focus niet bedekt (uitgebreid) op niveau AAA, waarbij er niets overheen mag staan.

De oorzaak is bijna altijd een van deze:

• Een menubalk die vastgeplakt bovenaan blijft staan.
• Een cookiemelding onderaan het scherm.
• Een chatknop in de hoek.
• Een balk met acties die verschijnt zodra de bezoeker scrolt.
• Een tabel met een vastgezette kop of kolom.

Open dit onderwerp op een eigen pagina

Veel websites hebben blokken met content die op iedere pagina worden herhaald. Bijvoorbeeld een logo, een zoekveld en navigatie. Voor mensen die hulptechnologieën gebruiken of die het toetsenbord gebruiken om te navigeren, zijn deze herhalende blokken met content niet handig. Vaak staat in deze blokken namelijk veel content die iedere keer hetzelfde is. De inhoud wordt steeds volledig voorgelezen voordat zij uitkomen bij de inhoud op de pagina. Het navigeren duurt zo erg lang. Zorg daarom voor een manier dat zorgt herhalende blokken overgeslagen kunnen worden.

Door skiplinks aan te bieden hoeven gebruikers niet elke keer langs herhalende blokken met content. Een skiplink is een ankerlink die verwijst naar een onderdeel lager op de pagina. Hiermee kunnen zij sneller navigeren naar het gedeelte van de webpagina waar ze moeten zijn.

Skiplinks hebben een anker (#) als waarde in het href-attribuut die verwijst naar een ID verderop in de pagina.

In de code ziet dat er zo uit:

<header>
  <a href="#content">Ga naar de inhoud</a>
  <img src="logo.jpg" alt="WCAG.nl">
  <nav>
    ...
  </nav>
</header>
<main>
  <h1 id="content" tabindex="-1">Inhoud</h1>
    ...
</main>

Open dit onderwerp op een eigen pagina

Webpagina’s moeten op meer dan één manier te vinden zijn. Sommige bezoekers kunnen moeite hebben met het begrijpen van de navigatie op een website, of vinden een bepaalde navigatiemethode makkelijker of sneller.

Zorg daarom voor meer dan één manier om een pagina op een website te vinden. Bied naast de navigatie bijvoorbeeld ook een zoekfunctie aan, of publiceer een pagina met een sitemap.

Open dit onderwerp op een eigen pagina

De zichtbaarheid van de focus is met het toetsenbord te toetsen. Er is geen software voor nodig.

Ga als volgt te werk:

• Open de pagina en klik één keer bovenaan, buiten een link of invoerveld.
• Druk op Tab, en blijf drukken tot je onderaan de pagina bent.
• Kijk bij elke druk of zichtbaar is welk onderdeel is geselecteerd.

Let daarbij op vier dingen:

• Verdwijnt de focus? Er verandert niets in beeld, terwijl er wel iets is geselecteerd.
• Springt de focus heen en weer? Dan klopt de volgorde niet met wat er staat. Dat valt onder 2.4.3.
• Kom je ergens niet meer weg? Een venster of videospeler die je met Tab niet uit komt is een toetsenbordval.
• Schuift de pagina mee? Staat het geselecteerde onderdeel half onder een vaste balk, dan valt dat onder 2.4.11.

Is de focus nergens te zien, zoek dan in het stijlbestand naar deze regels:

outline: none;
outline: 0;

Staan die er, en staat er geen eigen rand voor in de plaats, dan is de oorzaak gevonden.

Open dit onderwerp op een eigen pagina

Knoppen hoeven er niet groter uit te zien. Het gaat om het gebied dat op een tik reageert, en dat mag onzichtbaar zijn.

De eenvoudigste oplossing laat het pictogram op 16 pixels staan en maakt de knop eromheen 24:

.icoonknop {
  min-inline-size: 24px;
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Is er echt geen ruimte, vergroot het gebied dan met een onzichtbare laag over de knop heen. Het beeld blijft klein, het doel wordt groot:

.icoonknop { position: relative; }

.icoonknop::after {
  content: "";
  position: absolute;
  inset: -8px;          /* 8 pixels extra aan elke kant */
}

Waar het meestal misgaat:

• Rijen pictogrammen naast elkaar in een tabel of werkbalk.
• Het sluitkruisje van een venster. Dat is bijna altijd te klein, terwijl het de knop is die iemand onder tijdsdruk zoekt.
• Paginanummers onder een lijst, vaak 20 bij 20 met een paar pixels ertussen.

Open dit onderwerp op een eigen pagina

Een breedte in pixels blijft staan, hoe smal het scherm ook wordt. Een maximumbreedte krimpt mee:

/* houdt vast, ook op 320 pixels */
.kaart { width: 640px; }

/* krimpt mee */
.kaart { max-inline-size: 640px; }

Laat kolommen zelf terugvallen. Met auto-fit hoef je geen enkel breekpunt te bedenken: de kolommen worden smaller tot ze niet meer passen en gaan dan onder elkaar.

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

Een brede tabel of een codevoorbeeld hoeft niet af te breken. Die mogen schuiven, maar dan in hun eigen kader en niet met de hele pagina:

.tabel-omhulsel { overflow-x: auto; }

Open dit onderwerp op een eigen pagina

Er zijn drie regels CSS die dit criterium breken. Wie die opzoekt is er bijna.

Een vaste hoogte knipt de tekst af zodra hij meer ruimte nodig heeft:

/* knipt af */
.knop { height: 40px; }

/* groeit mee */
.knop { min-block-size: 40px; }

Een vaste hoogte met een verborgen overloop is de gevaarlijkste combinatie, want er is niet te zien dát er iets weg is:

.kaart { height: 220px; overflow: hidden; }

Haal de vaste hoogte weg, dan mag de verborgen overloop blijven staan.

Een afgeknipt aantal regels mag, zolang de hele tekst ergens anders wel te lezen is:

.samenvatting { -webkit-line-clamp: 3; }

De veilige basis is dat tekstdragende onderdelen hun hoogte zelf bepalen:

.wp-block-group, .wp-block-column,
p, li, h1, h2, h3, h4, button, a {
  block-size: auto;
  overflow-wrap: break-word;
}

Open dit onderwerp op een eigen pagina

Er is geen extensie nodig. Plak dit in de console van de browser en de pagina staat meteen op de waarden uit de eis:

var s = document.createElement('style');
s.textContent = '* {' +
  'line-height: 1.5 !important;' +
  'letter-spacing: 0.12em !important;' +
  'word-spacing: 0.16em !important; }' +
  'p { margin-bottom: 2em !important; }';
document.head.appendChild(s);

Waar je op let:

• Tekst die uit een knop loopt of erin verdwijnt.
• Kaarten waarvan de laatste regel is afgeknipt. Vergelijk met de kaart ernaast.
• Overlappende regels, bijna altijd door een vaste hoogte op de omhullende laag.
• Een menu dat niet meer past en over de inhoud valt.
• Tabellen waarvan een cel zijn buurcel induwt.

Ververs de pagina om de eigen stijl terug te krijgen.

Open dit onderwerp op een eigen pagina

Deze test kost een minuut per pagina en vindt de meeste fouten.

Ga als volgt te werk:

• Druk vier keer op Ctrl en de plus-toets (op een Mac Command en plus). Je zit dan op 200%.
• Lees de pagina van boven naar beneden.
• Bedien alles: open het menu, vul een formulier in, druk op een knop.

Doe daarna de tweede test, die vaker wordt overgeslagen: zet in de browserinstellingen de standaard tekstgrootte op zeer groot en laat de zoom op 100%. Dat is een andere instelling en legt andere fouten bloot, vooral tekstgroottes die in pixels vastliggen.

Waar je op let:

• Tekst die uit een knop of kader loopt.
• Twee stukken tekst die over elkaar heen vallen.
• Een knop of link die buiten beeld schuift.
• Een menu dat niet meer opengaat of het hele scherm vult.
• Tekst in een afbeelding die wazig wordt in plaats van groter.

Open dit onderwerp op een eigen pagina

Deze test kost een minuut per pagina en vraagt geen gereedschap.

Ga als volgt te werk:

• Maak het browservenster zo groot als het scherm.
• Druk vijf keer op Ctrl en de plus-toets (op een Mac Command en plus). Je zit dan op 400%.
• Lees een alinea. Moet je daarvoor heen en weer schuiven?

Werkt het scherm niet mee, versmal het venster dan tot 320 pixels breed. Dat komt op hetzelfde neer.

Waar je op let:

• Een schuifbalk onderaan de pagina. Dat is de fout. Eén in een tabel of codeblok mag wel.
• Tekst die wegvalt of overlapt, meestal door een vaste hoogte.
• Een menu dat niet meer opengaat of het halve scherm vult.
• Knoppen die buiten beeld vallen. De knop Versturen onder een formulier is de meest voorkomende.
• Een vaste balk bovenaan die op 400% de helft van het scherm inneemt.

Open dit onderwerp op een eigen pagina

Een schermlezer leest een pagina voor in de volgorde van de code, van de eerste regel naar de laatste. Op het scherm staat alles tegelijk, maar wie de pagina hoort of met een vergroting strook voor strook afleest, krijgt hem als een rij. Zorg daarom dat de volgorde in de code overeenkomt met de volgorde waarin de pagina gelezen moet worden.

Een veelvoorkomend voorbeeld is een prijskaart met de prijs boven de naam, terwijl in de code de prijs eerst staat. Op het scherm staat er “Basispakket — 39 euro”. De schermlezer leest “39 euro. Basispakket.” Bij één kaart is dat te volgen, bij vijf kaarten naast elkaar niet meer.

Wie hier tegenaan loopt:

• Bezoekers die blind zijn en de pagina horen in plaats van zien.
• Bezoekers die een schermvergroting gebruiken en de pagina strook voor strook afleiden.
• Bezoekers die de pagina laten voorlezen omdat lezen moeite kost.
• Iedereen op een smal scherm, want dan komt alles onder elkaar te staan in de volgorde van de code.

Open dit onderwerp op een eigen pagina

Bij 400% zoom behandelt de browser de pagina als een smal scherm. Een pagina die ook op een telefoon werkt, schuift zijn kolommen dan onder elkaar. Gebeurt dat niet, dan verschijnt er een schuifbalk onderaan en moet de bezoeker bij elke regel heen en weer schuiven.

De eis is: bij 400% zoom op een scherm van 1280 bij 1024 hoeft er nog maar in één richting geschoven te worden. Dat komt neer op een venster van 320 bij 256 pixels, zo smal als een oude telefoon.

Wie hier last van heeft:

• Bezoekers die slecht zien en daarom vergroten.
• Bezoekers die een schermvergroting gebruiken en maar een deel van het scherm zien.
• Iedereen op een telefoon.

Open dit onderwerp op een eigen pagina

Een website moet werken in zowel de staande als de liggende stand. Niet iedereen kan zijn apparaat draaien: een telefoon in een houder op een rolstoel staat vast, en wie een tablet op een standaard heeft staan of met één hand werkt kan dat ook niet. Een melding als “Draai je scherm voor de beste ervaring” maakt de site voor die bezoekers onbruikbaar.

Je mag geen stand afdwingen, tenzij het echt niet anders kan — een piano-app of het fotograferen van een cheque zijn de gebruikelijke voorbeelden.

Wat er ook onder valt:

• Een pagina die alleen in staande stand een menu toont.
• Een videospeler die in liggende stand het scherm overneemt en niet meer terug wil.
• Een app die in de manifest-instellingen op één stand is vastgezet.

Open dit onderwerp op een eigen pagina

Het onderdeel dat met het toetsenbord is geselecteerd heeft de focus. De browser zet daar standaard een rand omheen, zodat zichtbaar is waar de bezoeker zich bevindt. Ontbreekt die rand, dan is niet te zien welk onderdeel wordt bediend en wat er gebeurt bij het indrukken van Enter. Zorg daarom dat de toetsenbordfocus altijd zichtbaar is.

Dit raakt vooral:

• Bezoekers die geen muis kunnen vasthouden en alles met het toetsenbord doen.
• Bezoekers die een schermvergroting gebruiken en maar een klein deel van het scherm zien. De focus geeft aan waar dat deel moet staan.
• Bezoekers die met een schakelaar of met hun stem werken.

De rand is op de meeste sites ooit bewust weggehaald, met één regel CSS: outline: none. De standaardrand is niet mooi, maar het antwoord daarop is een betere rand en niet geen rand.

Open dit onderwerp op een eigen pagina

Mensen met dyslexie lezen sneller als er meer ruimte tussen de regels en de letters staat. Er zijn browserextensies die die ruimte op elke site instellen. Zorg daarom dat je tekst leesbaar blijft als een bezoeker die ruimte ruimer zet.

De tekst moet het uithouden bij deze vier waarden:

• Regelafstand 1,5 keer de tekstgrootte.
• Ruimte tussen alinea’s 2 keer de tekstgrootte.
• Letterafstand 0,12 keer de tekstgrootte.
• Woordafstand 0,16 keer de tekstgrootte.

Je hoeft die waarden niet zelf te gebruiken. De eis is dat de pagina eraan kan als een bezoeker ze instelt.

Open dit onderwerp op een eigen pagina

Tekst moet tot 200% vergroot kunnen worden zonder dat er inhoud of functies verdwijnen. Dat moet lukken zonder hulpmiddelen: een vergrotingsprogramma telt niet mee, het moet werken met wat de browser zelf biedt. Veel mensen vergroten tekst zonder zichzelf slechtziend te noemen.

Waar het misgaat:

• Tekst in een afbeelding. Die wordt wazig in plaats van groter; dat valt ook onder 1.4.5.
• Vaste hoogtes. De tekst groeit, de knop niet, en de onderste regel verdwijnt.
• Tekstgroottes in pixels die de browserinstelling negeren.
• Een menu dat op 200% over de inhoud valt of niet meer opengaat.

Open dit onderwerp op een eigen pagina

Er zijn drie regels CSS die dit criterium breken. Wie die opzoekt is er bijna.

Een vaste hoogte knipt de tekst af zodra hij meer ruimte nodig heeft:

/* knipt af */
.knop { height: 40px; }

/* groeit mee */
.knop { min-block-size: 40px; }

Een vaste hoogte met een verborgen overloop is de gevaarlijkste combinatie, want er is niet te zien dát er iets weg is:

.kaart { height: 220px; overflow: hidden; }

Haal de vaste hoogte weg, dan mag de verborgen overloop blijven staan.

Een afgeknipt aantal regels mag, zolang de hele tekst ergens anders wel te lezen is:

.samenvatting { -webkit-line-clamp: 3; }

De veilige basis is dat tekstdragende onderdelen hun hoogte zelf bepalen:

.wp-block-group, .wp-block-column,
p, li, h1, h2, h3, h4, button, a {
  block-size: auto;
  overflow-wrap: break-word;
}

Open dit onderwerp op een eigen pagina

Je zoekt onderdelen die hetzelfde doen maar anders heten. Die vind je door de namen naast elkaar te leggen.

Haal de namen op met dit script in de console:

[...document.querySelectorAll('button, a, [role=button]')]
  .map(function (el) {
    return (el.getAttribute('aria-label') || el.textContent).trim();
  })
  .filter(Boolean)
  .forEach(function (n) { console.log(n); });

Doe dit op vijf verschillende pagina’s en zet de uitkomsten onder elkaar in een tekstbestand.

Waar je op let:

• Varianten van hetzelfde woord: zoeken, zoek, search.
• Knoppen die hetzelfde doen maar anders heten.
• Pictogrammen zonder naam. Die komen als lege regel terug.
• Namen die twee keer voorkomen maar iets anders doen. Dat is de omgekeerde fout.

Open dit onderwerp op een eigen pagina

Er is geen extensie nodig. Plak dit in de console van de browser en de pagina staat meteen op de waarden uit de eis:

var s = document.createElement('style');
s.textContent = '* {' +
  'line-height: 1.5 !important;' +
  'letter-spacing: 0.12em !important;' +
  'word-spacing: 0.16em !important; }' +
  'p { margin-bottom: 2em !important; }';
document.head.appendChild(s);

Waar je op let:

• Tekst die uit een knop loopt of erin verdwijnt.
• Kaarten waarvan de laatste regel is afgeknipt. Vergelijk met de kaart ernaast.
• Overlappende regels, bijna altijd door een vaste hoogte op de omhullende laag.
• Een menu dat niet meer past en over de inhoud valt.
• Tabellen waarvan een cel zijn buurcel induwt.

Ververs de pagina om de eigen stijl terug te krijgen.

Open dit onderwerp op een eigen pagina

Deze test kost een minuut per pagina en vindt de meeste fouten.

Ga als volgt te werk:

• Druk vier keer op Ctrl en de plus-toets (op een Mac Command en plus). Je zit dan op 200%.
• Lees de pagina van boven naar beneden.
• Bedien alles: open het menu, vul een formulier in, druk op een knop.

Doe daarna de tweede test, die vaker wordt overgeslagen: zet in de browserinstellingen de standaard tekstgrootte op zeer groot en laat de zoom op 100%. Dat is een andere instelling en legt andere fouten bloot, vooral tekstgroottes die in pixels vastliggen.

Waar je op let:

• Tekst die uit een knop of kader loopt.
• Twee stukken tekst die over elkaar heen vallen.
• Een knop of link die buiten beeld schuift.
• Een menu dat niet meer opengaat of het hele scherm vult.
• Tekst in een afbeelding die wazig wordt in plaats van groter.

Open dit onderwerp op een eigen pagina

Een schermlezer leest een pagina voor in de volgorde van de code, van de eerste regel naar de laatste. Op het scherm staat alles tegelijk, maar wie de pagina hoort of met een vergroting strook voor strook afleest, krijgt hem als een rij. Zorg daarom dat de volgorde in de code overeenkomt met de volgorde waarin de pagina gelezen moet worden.

Een veelvoorkomend voorbeeld is een prijskaart met de prijs boven de naam, terwijl in de code de prijs eerst staat. Op het scherm staat er “Basispakket — 39 euro”. De schermlezer leest “39 euro. Basispakket.” Bij één kaart is dat te volgen, bij vijf kaarten naast elkaar niet meer.

Wie hier tegenaan loopt:

• Bezoekers die blind zijn en de pagina horen in plaats van zien.
• Bezoekers die een schermvergroting gebruiken en de pagina strook voor strook afleiden.
• Bezoekers die de pagina laten voorlezen omdat lezen moeite kost.
• Iedereen op een smal scherm, want dan komt alles onder elkaar te staan in de volgorde van de code.

Open dit onderwerp op een eigen pagina

Mensen met dyslexie lezen sneller als er meer ruimte tussen de regels en de letters staat. Er zijn browserextensies die die ruimte op elke site instellen. Zorg daarom dat je tekst leesbaar blijft als een bezoeker die ruimte ruimer zet.

De tekst moet het uithouden bij deze vier waarden:

• Regelafstand 1,5 keer de tekstgrootte.
• Ruimte tussen alinea’s 2 keer de tekstgrootte.
• Letterafstand 0,12 keer de tekstgrootte.
• Woordafstand 0,16 keer de tekstgrootte.

Je hoeft die waarden niet zelf te gebruiken. De eis is dat de pagina eraan kan als een bezoeker ze instelt.

Open dit onderwerp op een eigen pagina

Tekst moet tot 200% vergroot kunnen worden zonder dat er inhoud of functies verdwijnen. Dat moet lukken zonder hulpmiddelen: een vergrotingsprogramma telt niet mee, het moet werken met wat de browser zelf biedt. Veel mensen vergroten tekst zonder zichzelf slechtziend te noemen.

Waar het misgaat:

• Tekst in een afbeelding. Die wordt wazig in plaats van groter; dat valt ook onder 1.4.5.
• Vaste hoogtes. De tekst groeit, de knop niet, en de onderste regel verdwijnt.
• Tekstgroottes in pixels die de browserinstelling negeren.
• Een menu dat op 200% over de inhoud valt of niet meer opengaat.

Open dit onderwerp op een eigen pagina