Schermvergroting

De regel is kort: zet in de HTML wat eerst gelezen moet worden, en gebruik CSS om te bepalen wáár het staat.

Deze drie eigenschappen verplaatsen het beeld zonder de volgorde te veranderen. Ze zijn alle drie nuttig, en worden pas een probleem zodra ze de leesvolgorde omdraaien:

.blok  { order: -1; }
.kaart { grid-row: 1; }
.zij   { position: absolute; top: 0; }

Let ook op CSS-kolommen. Die lezen van boven naar beneden per kolom, niet van links naar rechts. Dat is precies wat je wilt bij lopende tekst, en precies wat je niet wilt bij een lijst met stappen:

.tekst { columns: 2; }

De veilige gewoonte is om eerst zonder opmaak te bouwen. Lees de pagina van boven naar beneden; klopt het verhaal, dan mag de opmaak erop.

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

De oplossing is een afspraak en geen techniek. Kies één plek voor de hulp en wijk daar niet van af.

Bouw het als één sjabloononderdeel en zet dat op elke pagina neer. Dan kán het niet verspringen, want er is maar één plek waar het vandaan komt:

<!-- in de voettekst, op elke pagina, in deze volgorde -->
<h2>Contact</h2>
<dl>
  <dt>E-mail</dt><dd><a href="mailto:info@voorbeeld.nl">info@voorbeeld.nl</a></dd>
  <dt>Telefoon</dt><dd><a href="tel:+31000000000">000 – 00 00 000</a></dd>
</dl>
<p><a href="/contact/">Bezoek de contactpagina</a></p>

Een chatknop rechtsonder mag, zolang hij op elke pagina rechtsonder staat. Verspringt hij naar linksonder op de bestelpagina omdat daar een knop in de weg zat, dan voldoet de site niet meer.

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 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

Voor deze test is geen schermlezer nodig. Zet de opmaak uit en lees wat er staat.

Plak dit in de console van de browser. Alle stijlen gaan uit en de pagina komt in de volgorde van de code te staan:

document.querySelectorAll('style, link[rel=stylesheet]')
  .forEach(function (el) { el.disabled = true; });

Waar je op let:

• Lees van boven naar beneden. Klopt de volgorde met wat je gewend bent?
• Staan koppen boven de tekst waar ze bij horen?
• Komt bij een kaart eerst de naam en dan de prijs, of andersom?
• Staat een bijschrift onder de juiste afbeelding?
• Komt het menu vóór de inhoud, en de voettekst erna?

De tweede test is het venster versmallen tot 320 pixels. Alles komt dan onder elkaar te staan, in de volgorde van de code. Springt er iets naar een onverwachte plek, dan is de fout gevonden — en meteen ook een afwijking op 1.4.10.

Ververs de pagina om de stijlen terug te krijgen.

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

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

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

In een pdf speelt hetzelfde als op een website, maar met een eigen oorzaak. Een tweekolomsopmaak leest voor het oog van linksboven naar linksonder. Een schermlezer volgt de tagboom. Staat daar de eerste regel links, dan de eerste regel rechts, dan hoort de lezer twee verhalen door elkaar.

Waar dat vandaan komt:

• Tekstvakken in Word. Die belanden vaak achteraan of op een willekeurige plek.
• Kolommen die met tabs zijn gemaakt in plaats van met een kolomindeling.
• Een document dat is afgedrukt naar pdf. Dan is er geen structuur, alleen plaatsing.
• Automatisch taggen in Acrobat, dat bij kolommen vaak misgokt.

In Acrobat zijn er twee panelen die over volgorde gaan. Het tagpaneel is leidend: de volgorde van de tags is de volgorde waarin wordt voorgelezen. Het leesvolgordepaneel onder Toegankelijkheid toont genummerde blokken en is handig om snel te controleren, maar bij twijfel geldt het tagpaneel.

De echte oplossing zit in het bronbestand. Gebruik in Word een echte kolomindeling in plaats van tekstvakken, en zet afbeeldingen in de tekstregel in plaats van zwevend. Dan klopt de volgorde vanzelf.

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

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

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 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

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

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