Vormgever

Flitsende of knipperende content kan gemakkelijk de aandacht trekken. Dit kan bijvoorbeeld voorkomen in animaties of mediabestanden. Deze content kan een epileptische aanval veroorzaken bij mensen die daar gevoelig voor zijn.

Flitsende content mag daarom niet meer dan 3 keer per seconde flitsen, tenzij het flitsende gedeelte maar een klein oppervlak van het scherm inneemt.

Open dit onderwerp op een eigen pagina

Een site heeft lichte en donkere vlakken. Een focusrand van één kleur valt daardoor altijd op één van de twee weg. Zet daarom een lichte ring binnen een donkere: op een donkere knop valt de lichte op, op een lichte knop de donkere.

In de code ziet dat er zo uit:

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;   /* blijft staan in de hoogcontrastmodus */
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px #FFFFFF,              /* binnenring: licht */
    0 0 0 5px #08251C;              /* buitenring: donker */
  border-radius: 6px;
}

De doorzichtige outline lijkt overbodig maar is dat niet. In de hoogcontrastmodus van Windows verwijdert het systeem alle kleuren en schaduwen, waardoor de box-shadow verdwijnt. Een outline blijft wel staan en krijgt dan de systeemkleur.

Drie oplossingen die niet genoeg zijn:

• Alleen de kleur van de knop veranderen. Kleurverschil alleen is geen zichtbare focus, en voor wie kleur anders ziet werkt het niet.
• De rand strak om het onderdeel leggen. Met outline-offset blijft er lucht, waardoor de rand ook op een gekleurde knop opvalt.
• Een rand dunner dan 2 pixels. Op een vergroot scherm valt die weg tegen de rand van het onderdeel zelf.

Open dit onderwerp op een eigen pagina

De eenvoudigste oplossing is geen tooltip bouwen maar de tekst op de pagina zetten. Kan dat niet, dan moeten er drie dingen kloppen.

Escape sluit de uitleg:

element.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') { verbergTooltip(); }
});

De aanwijzer kan erheen. Laat geen gat tussen het onderdeel en de uitleg: beweegt de aanwijzer over dat gat, dan telt dat als wegwijzen en verdwijnt de uitleg.

.tooltip {
  margin-block-start: 0;
  padding-block-start: 8px;
  pointer-events: auto;
}

En er zit geen tijdklok op. Een bezoeker die langzaam leest is na drie seconden halverwege:

setTimeout(verbergTooltip, 3000);   /* niet doen */

<button aria-describedby="uitleg-btw">Btw-nummer</button>
<div id="uitleg-btw" role="tooltip">Je btw-nummer staat op je factuur.</div>

Open dit onderwerp op een eigen pagina

Zet de automatische schermdraaiing van de telefoon aan, open de site en draai het toestel om. Meer is er niet nodig.

Waar je op let:

• Verschijnt er een melding dat je moet draaien? Dan is dat de fout.
• Blijft alle inhoud zichtbaar en bruikbaar?
• Gaat het menu nog open, en past het op het scherm?
• Werkt een formulier nog, inclusief de knop onderaan?
• Blijf je op dezelfde plek in de pagina, of springt hij naar boven?

Zonder telefoon kan het ook: maak het browservenster laag en breed, bijvoorbeeld 900 bij 400 pixels. In de ontwikkelaarshulpmiddelen van de browser is ook een toestel te kiezen en te draaien.

Open dit onderwerp op een eigen pagina

De fout zit bijna altijd op één van twee plekken. De eerste is een media query die de inhoud verbergt:

/* verbergt de site in liggende stand — nooit doen */
@media (orientation: landscape) {
  .inhoud { display: none; }
  .draai-melding { display: block; }
}

Gebruik orientation gerust om de indeling aan te passen. Gebruik hem nooit om iets te verbergen.

De tweede is het manifest of de app-instellingen:

{
  "orientation": "portrait"
}

De melding weghalen is de eerste stap. De tweede is zorgen dat het er liggend ook goed uitziet. In liggende stand is het scherm laag en breed, en dat is dezelfde situatie als bij inzoomen:

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

.hero { min-block-size: 60vh; }   /* niet: height: 60vh */

Open dit onderwerp op een eigen pagina

De browser schuift een onderdeel net binnen beeld zodra het de focus krijgt. Hij houdt daarbij geen rekening met een balk die eroverheen ligt, want die kent hij niet. Met scroll-margin geef je die ruimte op.

:where(a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-block-start: 120px;   /* de hoogte van de koptekst */
  scroll-margin-block-end: 90px;      /* wat er onderaan blijft staan */
}

Zet de bovenwaarde op de hoogte van de koptekst en de onderwaarde op wat er onderaan blijft staan. Verschilt die hoogte per schermbreedte, zet hem dan in een variabele.

body:has(:focus-visible) .chatknop {
  opacity: 0;
  pointer-events: none;
}

De eenvoudigste oplossing is een balk die niet meescrolt. Een koptekst die gewoon bovenaan de pagina staat kan per definitie niets bedekken, en kost geen onderhoud.

Open dit onderwerp op een eigen pagina

Een knop of link moet minstens 24 bij 24 pixels groot zijn. Is hij kleiner, dan moet er minstens 24 pixels ruimte omheen zitten waar geen andere knop staat. Een vingertop is ongeveer een centimeter breed, zo’n 40 pixels, en dus groter dan een sluitkruisje van 16 bij 16.

Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA. Vierentwintig is een ondergrens en geen streefwaarde: voor een vinger is 44 pixels prettiger. Apple en Google houden in hun eigen richtlijnen 44 en 48 aan.

Dit raakt vooral:

• Bezoekers met trillende handen, door parkinson, MS of ouderdom.
• Bezoekers die de aanwijzer met hun ogen of hun hoofd besturen.
• Bezoekers met één werkende hand, die de telefoon vasthouden en bedienen met dezelfde duim.

Open dit onderwerp op een eigen pagina

Hiervoor is geen software nodig die je moet installeren. De browser toont de maat van elk onderdeel.

Eén knop meten:

• Klik met de rechtermuisknop op de knop en kies Inspecteren.
• Beweeg de muis over het onderdeel in de code. De browser tekent het gebied op de pagina en zet de maat erbij, bijvoorbeeld 18 × 18.
• Is een van beide getallen kleiner dan 24, meet dan de ruimte tot de knop ernaast.

Een hele pagina in één keer: plak dit in het tabblad Console. Het zet een rode rand om elke knop en link die te klein is.

document.querySelectorAll('a, button, input, select, summary')
  .forEach(function (el) {
    var r = el.getBoundingClientRect();
    if (r.width < 24 || r.height < 24) {
      el.style.outline = '2px solid red';
      console.log(Math.round(r.width) + '×' + Math.round(r.height), el);
    }
  });

Doe de test ook op een smal scherm. Knoppen die op een breed scherm ruim staan, komen op een telefoon tegen elkaar aan.

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

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

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

De eenvoudigste oplossing is geen tooltip bouwen maar de tekst op de pagina zetten. Kan dat niet, dan moeten er drie dingen kloppen.

Escape sluit de uitleg:

element.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') { verbergTooltip(); }
});

De aanwijzer kan erheen. Laat geen gat tussen het onderdeel en de uitleg: beweegt de aanwijzer over dat gat, dan telt dat als wegwijzen en verdwijnt de uitleg.

.tooltip {
  margin-block-start: 0;
  padding-block-start: 8px;
  pointer-events: auto;
}

En er zit geen tijdklok op. Een bezoeker die langzaam leest is na drie seconden halverwege:

setTimeout(verbergTooltip, 3000);   /* niet doen */

<button aria-describedby="uitleg-btw">Btw-nummer</button>
<div id="uitleg-btw" role="tooltip">Je btw-nummer staat op je factuur.</div>

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

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

Flitsende of knipperende content kan gemakkelijk de aandacht trekken. Dit kan bijvoorbeeld voorkomen in animaties of mediabestanden. Deze content kan een epileptische aanval veroorzaken bij mensen die daar gevoelig voor zijn.

Flitsende content mag daarom niet meer dan 3 keer per seconde flitsen, tenzij het flitsende gedeelte maar een klein oppervlak van het scherm inneemt.

Open dit onderwerp op een eigen pagina

De browser schuift een onderdeel net binnen beeld zodra het de focus krijgt. Hij houdt daarbij geen rekening met een balk die eroverheen ligt, want die kent hij niet. Met scroll-margin geef je die ruimte op.

:where(a, button, input, select, textarea, summary, [tabindex]) {
  scroll-margin-block-start: 120px;   /* de hoogte van de koptekst */
  scroll-margin-block-end: 90px;      /* wat er onderaan blijft staan */
}

Zet de bovenwaarde op de hoogte van de koptekst en de onderwaarde op wat er onderaan blijft staan. Verschilt die hoogte per schermbreedte, zet hem dan in een variabele.

body:has(:focus-visible) .chatknop {
  opacity: 0;
  pointer-events: none;
}

De eenvoudigste oplossing is een balk die niet meescrolt. Een koptekst die gewoon bovenaan de pagina staat kan per definitie niets bedekken, en kost geen onderhoud.

Open dit onderwerp op een eigen pagina

Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.

Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.

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

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 site heeft lichte en donkere vlakken. Een focusrand van één kleur valt daardoor altijd op één van de twee weg. Zet daarom een lichte ring binnen een donkere: op een donkere knop valt de lichte op, op een lichte knop de donkere.

In de code ziet dat er zo uit:

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid transparent;   /* blijft staan in de hoogcontrastmodus */
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px #FFFFFF,              /* binnenring: licht */
    0 0 0 5px #08251C;              /* buitenring: donker */
  border-radius: 6px;
}

De doorzichtige outline lijkt overbodig maar is dat niet. In de hoogcontrastmodus van Windows verwijdert het systeem alle kleuren en schaduwen, waardoor de box-shadow verdwijnt. Een outline blijft wel staan en krijgt dan de systeemkleur.

Drie oplossingen die niet genoeg zijn:

• Alleen de kleur van de knop veranderen. Kleurverschil alleen is geen zichtbare focus, en voor wie kleur anders ziet werkt het niet.
• De rand strak om het onderdeel leggen. Met outline-offset blijft er lucht, waardoor de rand ook op een gekleurde knop opvalt.
• Een rand dunner dan 2 pixels. Op een vergroot scherm valt die weg tegen de rand van het onderdeel zelf.

Open dit onderwerp op een eigen pagina

Zet de automatische schermdraaiing van de telefoon aan, open de site en draai het toestel om. Meer is er niet nodig.

Waar je op let:

• Verschijnt er een melding dat je moet draaien? Dan is dat de fout.
• Blijft alle inhoud zichtbaar en bruikbaar?
• Gaat het menu nog open, en past het op het scherm?
• Werkt een formulier nog, inclusief de knop onderaan?
• Blijf je op dezelfde plek in de pagina, of springt hij naar boven?

Zonder telefoon kan het ook: maak het browservenster laag en breed, bijvoorbeeld 900 bij 400 pixels. In de ontwikkelaarshulpmiddelen van de browser is ook een toestel te kiezen en te draaien.

Open dit onderwerp op een eigen pagina

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De richtlijnen vereisen voor deze onderdelen een contrastverhouding van ten minste 3:1 tegen alle aangrenzende kleuren. Het kan dus zijn dat een contrast op meerdere plekken gemeten moet worden.

Formulierelementen

Formulierelementen, zoals invoervelden, keuzerondjes en selectievakjes moeten genoeg contrast hebben. Zorg voor een duidelijke rand of een achtergrondkleur met voldoende contrast. Ook de verschillende statussen van deze elementen moeten genoeg contrast hebben. Het moet duidelijk zijn of een keuzerondje of selectievakje is geselecteerd of juist niet.

Iconen

Informatieve iconen en iconen die ook worden gebruik als link of knop moeten genoeg contrast hebben.

Grafieken en diagrammen

Ook onderdelen in grafieken en diagrammen moeten genoeg contrast hebben. Denk hierbij aan de lijnen in een grafiek en de onderdelen in een diagram.

Open dit onderwerp op een eigen pagina

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De contrastverhouding voor tekst moet voldoen aan minimaal:

• 4,5:1 voor tekst die kleiner is dan 24px of 18,5px vetgedrukt.
• 3:1 voor tekst die groter is dan 24px of 18,5px vetgedrukt.

Deze contrasteisen gelden ook voor tekst op afbeeldingen.

Open dit onderwerp op een eigen pagina

Kleur kan helpen om eenvoudig informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden, maar het mag niet de enige manier zijn. Mensen met een visuele beperking kunnen informatie die alleen met kleur worden aangegeven niet (of niet goed) onderscheiden.

Gebruik ook andere manieren, zoals met tekst of een icoon.

Open dit onderwerp op een eigen pagina

Zoomen werkt in elke browser, ook als maten in pixels zijn opgeschreven. De instelling voor de standaard tekstgrootte werkt echter alleen met relatieve eenheden — en dat is de instelling die bezoekers één keer aanzetten en daarna vergeten.

/* volgt de instelling van de bezoeker niet */
body { font-size: 16px; }

/* volgt hem wel */
body { font-size: 1rem; }
h2   { font-size: 1.6rem; }

Laat ook maten meegroeien met de tekst. Gebruik een minimumhoogte in plaats van een vaste hoogte, en geef de leesbreedte op in tekens:

.knop {
  padding: 0.7em 1.4em;
  min-block-size: 2.75rem;   /* geen height */
}

p { max-inline-size: 68ch; }

em rekent met de tekstgrootte van het onderdeel zelf, rem met die van de pagina. Voor ruimte binnen een knop is em handig, voor alles daarbuiten rem.

Open dit onderwerp op een eigen pagina

De fout zit bijna altijd op één van twee plekken. De eerste is een media query die de inhoud verbergt:

/* verbergt de site in liggende stand — nooit doen */
@media (orientation: landscape) {
  .inhoud { display: none; }
  .draai-melding { display: block; }
}

Gebruik orientation gerust om de indeling aan te passen. Gebruik hem nooit om iets te verbergen.

De tweede is het manifest of de app-instellingen:

{
  "orientation": "portrait"
}

De melding weghalen is de eerste stap. De tweede is zorgen dat het er liggend ook goed uitziet. In liggende stand is het scherm laag en breed, en dat is dezelfde situatie als bij inzoomen:

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

.hero { min-block-size: 60vh; }   /* niet: height: 60vh */

Open dit onderwerp op een eigen pagina

Een knop of link moet minstens 24 bij 24 pixels groot zijn. Is hij kleiner, dan moet er minstens 24 pixels ruimte omheen zitten waar geen andere knop staat. Een vingertop is ongeveer een centimeter breed, zo’n 40 pixels, en dus groter dan een sluitkruisje van 16 bij 16.

Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA. Vierentwintig is een ondergrens en geen streefwaarde: voor een vinger is 44 pixels prettiger. Apple en Google houden in hun eigen richtlijnen 44 en 48 aan.

Dit raakt vooral:

• Bezoekers met trillende handen, door parkinson, MS of ouderdom.
• Bezoekers die de aanwijzer met hun ogen of hun hoofd besturen.
• Bezoekers met één werkende hand, die de telefoon vasthouden en bedienen met dezelfde duim.

Open dit onderwerp op een eigen pagina

Hiervoor is geen software nodig die je moet installeren. De browser toont de maat van elk onderdeel.

Eén knop meten:

• Klik met de rechtermuisknop op de knop en kies Inspecteren.
• Beweeg de muis over het onderdeel in de code. De browser tekent het gebied op de pagina en zet de maat erbij, bijvoorbeeld 18 × 18.
• Is een van beide getallen kleiner dan 24, meet dan de ruimte tot de knop ernaast.

Een hele pagina in één keer: plak dit in het tabblad Console. Het zet een rode rand om elke knop en link die te klein is.

document.querySelectorAll('a, button, input, select, summary')
  .forEach(function (el) {
    var r = el.getBoundingClientRect();
    if (r.width < 24 || r.height < 24) {
      el.style.outline = '2px solid red';
      console.log(Math.round(r.width) + '×' + Math.round(r.height), el);
    }
  });

Doe de test ook op een smal scherm. Knoppen die op een breed scherm ruim staan, komen op een telefoon tegen elkaar aan.

Open dit onderwerp op een eigen pagina

Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.

Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers kunnen hierdoor sneller en efficiënter hun weg vinden.

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

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

Genoeg contrast tussen twee kleuren is van belang voor mensen die niet goed kunnen zien. Het helpt om het verschil tussen kleuren beter te zien.

De contrastverhouding voor tekst moet voldoen aan minimaal:

• 4,5:1 voor tekst die kleiner is dan 24px of 18,5px vetgedrukt.
• 3:1 voor tekst die groter is dan 24px of 18,5px vetgedrukt.

Deze contrasteisen gelden ook voor tekst op afbeeldingen.

Open dit onderwerp op een eigen pagina

Zoomen werkt in elke browser, ook als maten in pixels zijn opgeschreven. De instelling voor de standaard tekstgrootte werkt echter alleen met relatieve eenheden — en dat is de instelling die bezoekers één keer aanzetten en daarna vergeten.

/* volgt de instelling van de bezoeker niet */
body { font-size: 16px; }

/* volgt hem wel */
body { font-size: 1rem; }
h2   { font-size: 1.6rem; }

Laat ook maten meegroeien met de tekst. Gebruik een minimumhoogte in plaats van een vaste hoogte, en geef de leesbreedte op in tekens:

.knop {
  padding: 0.7em 1.4em;
  min-block-size: 2.75rem;   /* geen height */
}

p { max-inline-size: 68ch; }

em rekent met de tekstgrootte van het onderdeel zelf, rem met die van de pagina. Voor ruimte binnen een knop is em handig, voor alles daarbuiten rem.

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

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