Je ziet slecht

Het meeste werk aan een toegankelijke PDF gebeurt in Word. Wat daar goed staat komt goed in de PDF terecht; wat ontbreekt moet je later in Acrobat met de hand herstellen, en dat kost een veelvoud van de tijd.

Loop dit na voordat je exporteert:

• Documenttitel. Ga naar Bestand, Info, Eigenschappen en vul de titel in. Die mag afwijken van de bestandsnaam en komt in de PDF terug.
• Stijlen voor koppen. Gebruik Kop 1, Kop 2 en Kop 3 in plaats van tekst vet en groot te maken. De stijl geeft de betekenis; de opmaak doet dat niet.
• Titel en ondertitel op het voorblad. Gebruik daarvoor de stijlen Titel en Ondertitel.
• Alternatieve tekst bij afbeeldingen. Rechtermuisknop, Alternatieve tekst weergeven, en vul in wat de afbeelding overbrengt. Is de afbeelding decoratief, laat het veld dan leeg.
• Een automatische inhoudsopgave. Die bouwt Word uit je koppen, en voorleessoftware gebruikt diezelfde structuur.
• Echte lijsten en echte tabellen. Geen streepjes en geen tabs, maar de lijst- en tabelfunctie van Word.
• Een bijschrift bij elke tabel, en kopcellen die als kopcel zijn gemarkeerd.

Open dit onderwerp op een eigen pagina

Word biedt meerdere manieren om een PDF te maken. Kies Opslaan als en niet Afdrukken naar PDF: afdrukken levert een plaatje van je document op, zonder structuur.

Ga als volgt te werk:

1. Kies bij het bestandstype voor PDF.
2. Klik op Meer opties.
3. Kies bij Optimaliseren voor “Standaard (online publiceren en afdrukken)”.
4. Vink onder Opties voor niet-afdrukbare informatie aan: “Bladwijzers maken met Koppen” en “Labels voor documentstructuur voor toegankelijkheid”.
5. Vink onder PDF-opties “Voldoet aan PDF/A” aan, zodat het lettertype in het document wordt ingesloten.
6. Klik op Opslaan.

Open dit onderwerp op een eigen pagina

Bij het eerste openen staat de PDF op Alleen lezen, omdat er bij de export voor PDF/A is gekozen. Klik op “Bewerken inschakelen” in de blauwe balk bovenaan, bevestig met OK, en sla het document opnieuw op om die instelling te bewaren.

Zet daarna drie zijpanelen klaar. Zonder die panelen is de rest van het werk niet te doen:

• Toegankelijkheidstags. Hier voeg je tags toe en pas je ze aan. Dit is het paneel waar je het meeste werkt.
• Leesvolgorde. Hiermee controleer je in welke volgorde voorleessoftware het document doorloopt.
• Inhoud. Hiermee selecteer je losse onderdelen op de pagina.

Open dit onderwerp op een eigen pagina

Begin in Acrobat altijd bij de documenteigenschappen. Vier instellingen moeten daar goed staan voordat je aan de tags begint.

1. Titel. Controleer of die goed is overgekomen uit Word. Is het veld leeg, vul hem dan hier in.
2. Weergeven bij openen. Zet achter Tonen de waarde “Documenttitel”. De andere optie is “Bestandsnaam”, en die zegt de lezer niets.
3. PDF/UA-naleving. Kies op het tabblad Geavanceerd, onder Toegankelijkheid, de optie “PDF/UA v1”.
4. Taal. Controleer onder Leesopties of de taal klopt. Dit gaat bij export regelmatig mis.

Open dit onderwerp op een eigen pagina

PAC is een gratis programma dat een PDF toetst tegen de PDF/UA-norm en de WCAG. Draai het één keer voordat je begint, zodat je weet wat er te doen staat, en nog een keer als je klaar bent.

Ga als volgt te werk:

1. Open PAC en klik op Document openen.
2. Kies de PDF. Het bestand wordt gescand en de fouten verschijnen.
3. Klik op Gedetailleerde resultaten voor de losse meldingen.

De uitkomst is verdeeld over tabbladen voor PDF/UA, WCAG en kwaliteit. Die overlappen grotendeels: los je iets op voor de WCAG, dan verdwijnt meestal ook de bijbehorende PDF/UA-melding. Dat geldt bijvoorbeeld voor ontbrekende begrenzingsvlakken bij afbeeldingen en voor kopcellen in tabellen.

Open dit onderwerp op een eigen pagina

Na de export uit Word staat het hele document onder één Document-tag. Deel dat op: geef elk hoofdstuk een eigen Part-tag, in het Nederlands “Onderdeel”. Daarmee krijgt het document een structuur die voorleessoftware kan volgen.

Ga als volgt te werk, in het zijpaneel Toegankelijkheidstags:

1. Selecteer het eerste onderdeel van het document.
2. Maak via het menu van de drie bolletjes een nieuwe code aan van het type Onderdeel.
3. Geef die tag een naam ter herkenning, bijvoorbeeld “Voorblad”. De naam heeft geen betekenis voor de toegankelijkheid, maar houdt het overzichtelijk.
4. Sleep alle inhoud van dat onderdeel onder de nieuwe Part-tag. Met Ctrl of Shift selecteer je meerdere tags tegelijk.
5. Klap de tag in en herhaal dit voor het volgende onderdeel.

Elk hoofdstuk begint met een H1-tag. Selecteer die en houd Shift ingedrukt tot net vóór de volgende H1; daarmee heb je alles wat bij dat hoofdstuk hoort in één keer te pakken.

Open dit onderwerp op een eigen pagina

Een onderdeel met een Part-tag is verder onder te verdelen in artikelen, aangeduid met een Art-tag. Doe dat bij elke subkop met een H2.

Ga als volgt te werk:

1. Selecteer de tag boven een H2.
2. Maak via het menu van de drie bolletjes een nieuwe code aan. Het type Artikel staat bovenaan in de lijst.
3. Een naam geven mag, maar is niet nodig.
4. Selecteer de H2 en alles daaronder tot net vóór de volgende H2. De volgende H2 zelf hoort er niet bij.
5. Sleep die selectie in de Art-tag.

Herhaal dit voor elke H2 in het document. Staan er twee H2’s onder dezelfde Part-tag, dan krijgt elk een eigen Art-tag.

Open dit onderwerp op een eigen pagina

Het voorblad levert bij vrijwel elk document dezelfde drie problemen op.

De titel is een H1 geworden. In Word is de stijl Titel gebruikt, en die exporteert als H1. Maar H1 is voor hoofdstuktitels. Dubbelklik op de tag en verander H1 in P.

Er staat een lege P-tag. Die ontstaat door een enter in Word. Los dit in twee stappen op, en niet in één:

1. Klik met de rechtermuisknop op de inhoud eronder en kies “Code wijzigen in artefact”. Daarmee is het voor voorleessoftware onzichtbaar.
2. Klik daarna met de rechtermuisknop op de nu lege P-tag en kies “Code verwijderen”.

Verwijder je de P-tag in één keer, dan blijft de onderliggende lege inhoud gewoon bestaan en kan die alsnog worden voorgelezen.

De afbeelding wordt niet als afbeelding herkend. Controleer via Eigenschappen of er een alternatieve tekst staat, en stel daarna het kenmerkobject in. Zie het artikel over het correct opnemen van een afbeelding in een PDF.

Open dit onderwerp op een eigen pagina

Word exporteert de inhoudsopgave op zichzelf goed: de titel krijgt een H1, de opgave een TOC-tag, elke regel een TOCI-tag en elke verwijzing een Link-tag. Twee dingen ontbreken.

De links hebben geen alternatieve beschrijving. Klik met de rechtermuisknop op een Link-tag, kies Eigenschappen en vul op het tabblad Code een duidelijke beschrijving in. Herhaal dat voor elke link in de inhoudsopgave.

Achter elke link staat een lege Span-tag. Die zijn in één keer weg te halen, maar pas nadat de lege inhoud erin is gemarkeerd:

1. Klik met de rechtermuisknop op de lege inhoud en kies “Code wijzigen in artefact”. Doe dat voor elke lege Span.
2. Vergeet het lege object in de laatste TOCI-tag niet, en de lege paragraaf daaronder.
3. Selecteer daarna de Part-tag van de inhoudsopgave.
4. Kies in het menu van de toegankelijkheidstags de optie “Lege codes verwijderen”.

Open dit onderwerp op een eigen pagina

Anders dan op een website mag een PDF meerdere H1-koppen hebben: één per hoofdstuk. Alles wat in Word met de stijl Titel of Kop 1 is opgemaakt krijgt die tag.

De koppen vormen samen een boomstructuur, en die is het best af te lezen aan de inhoudsopgave. De vetgedrukte hoofdregels zijn H1, de regels met één inspringing H2, en zo verder.

Twee dingen om na te lopen:

• Sla geen niveau over. Van H1 naar H3 mag niet. Wie van kop naar kop springt, mist dan een niveau en denkt dat er iets ontbreekt.
• Zoek tekst die eruitziet als een kop maar het niet is. Tekst die in Word alleen vet en groot is gemaakt komt als P-tag door. Dubbelklik op de P-tag en hernoem hem naar het juiste kopniveau.

Open dit onderwerp op een eigen pagina

Links worden bij de export uit Word vrijwel altijd goed overgenomen. Eén ding komt niet mee: de alternatieve beschrijving. Die vertelt de lezer waar de link naartoe gaat, en die moet je in Acrobat met de hand toevoegen.

Ga als volgt te werk, per link:

1. Zoek de Link-tag op in het zijpaneel Toegankelijkheidstags.
2. Klik erop met de rechtermuisknop en kies Eigenschappen.
3. Vul op het tabblad Code het veld “Alternatieve beschrijving voor koppelingen” in.
4. Klik op Sluiten.

Dit geldt voor alle links in het document, ook die in de inhoudsopgave en in de voetnoten.

Open dit onderwerp op een eigen pagina

Bij afbeeldingen die uit Word komen, en bij SVG-afbeeldingen in het bijzonder, gaan twee dingen mis. De afbeelding wordt niet als afbeelding herkend, en er is geen begrenzingsvak — in het Engels een bounding box. PAC meldt beide.

Controleer eerst de alternatieve tekst. Klik met de rechtermuisknop op de Figure-tag, kies Eigenschappen, en kijk op het tabblad Code bij “Alternatieve tekst voor afbeeldingen”.

Stel daarna in hetzelfde venster het kenmerkobject in, via Kenmerkobject bewerken:

1. Klik op Nieuw item. Er verschijnt een item van het type Woordenboek.
2. Selecteer dat item en klik nogmaals op Nieuw item.
3. Vul bij Sleutel “Placement” in en bij Waarde “Block”. Let op de hoofdletters; zonder hoofdletter werkt het niet.
4. Laat Type waarde op “Naam” staan en klik op OK.

Voeg daarna het begrenzingsvak toe:

1. Selecteer Kenmerkobject 1 en klik weer op Nieuw item.
2. Vul bij Sleutel “BBox” in, met twee hoofdletters B.
3. Kies bij Type waarde de optie “Matrix”. Het waardeveld wordt dan uitgeschakeld.
4. Klik op OK en daarna op Sluiten.

Open dit onderwerp op een eigen pagina

Er zijn twee soorten afbeeldingen in een document. Een informatieve afbeelding draagt informatie over en heeft een alternatieve tekst nodig. Een decoratieve afbeelding draagt niets over en hoort er juist géén te hebben, want dan wordt hij overgeslagen.

Zijn de alternatieve teksten in Word ingevuld, dan komen ze mee in de export. Controleer ze toch: bij een PDF die je van iemand anders krijgt ontbreken ze vaak helemaal.

Ga als volgt te werk, per afbeelding:

1. Zoek de Figure-tag op in het zijpaneel Toegankelijkheidstags.
2. Klik erop met de rechtermuisknop en kies Eigenschappen.
3. Kijk op het tabblad Code bij “Alternatieve tekst voor afbeeldingen”.
4. Vul aan wat ontbreekt en klik op Sluiten.

Open dit onderwerp op een eigen pagina

Lijsten worden vanuit Word correct geëxporteerd, mits je in Word de lijstfunctie hebt gebruikt en geen streepjes of tabs. Controleer de opbouw in het zijpaneel Toegankelijkheidstags.

Elke lijst heeft dezelfde opbouw, of hij nu genummerd is of niet:

• L is de lijst zelf.
• LI is een lijstitem. Hieraan telt voorleessoftware af uit hoeveel onderdelen de lijst bestaat.
• Lbl is het opsommingsteken of het nummer.
• LBody is de inhoud van het lijstitem.

Open dit onderwerp op een eigen pagina

Een tabel toegankelijk maken in Acrobat is het meeste werk van de hele reeks. Het gaat in drie stappen: een beschrijving toevoegen, de kopcellen goed zetten, en de gegevenscellen aan hun kopcel koppelen.

Stap 1: de beschrijving. Ga naar Alle tools, Toegankelijkheid, Leesvolgorde corrigeren. Schuif het venster dat verschijnt aan de kant. Klik met de rechtermuisknop op de tabel, kies “Tabeloverzicht bewerken” en vul een korte beschrijving in van wat er in de tabel staat.

Stap 2: de kopcellen. Klik met de rechtermuisknop op de tabel in het tagpaneel en kies Tabeleditor. Alles wat roze is, is een kopcel. Staan de gegevenscellen in de eerste kolom ook roze, dan klopt dat niet.

1. Selecteer de cel die niet klopt.
2. Klik met de rechtermuisknop en kies “Eigenschappen van de tabelcel”.
3. Zet het Type van “Kopcel” naar “Gegevenscel” en klik op OK.

Stap 3: de koppeling. Open bij elke echte kopcel de celeigenschappen, kies bij Bereik de optie Kolom, en geef de cel een unieke ID — bijvoorbeeld “nummertrein”. Open daarna elke gegevenscel in die kolom, ga naar Kenmerken, klik op het groene plusje en kies het ID van de kopcel erboven.

Open dit onderwerp op een eigen pagina

Voetnoten komen uit Word door als Note-tags met een link ernaartoe. Drie dingen moeten daarna nog gebeuren.

Een alternatieve beschrijving bij de links. Klik met de rechtermuisknop op elke Link-tag, kies Eigenschappen, en vul op het tabblad Code het veld “Alternatieve beschrijving voor koppelingen” in.

Een ID op de Note-tag. Klik met de rechtermuisknop op de Note-tag en kies Eigenschappen. Staat er bij Id bijvoorbeeld “Note 1”, dan is het goed. Is het veld leeg, vul het dan in.

Het voetnootnummer in een eigen Lbl-tag. Dit is het lastigste deel:

1. Klik in het document vlak vóór het voetnootnummer.
2. Houd Shift ingedrukt en druk op de pijl naar rechts. Pakt hij de spatie mee, corrigeer dan met de pijl naar links.
3. Kies in het menu van het tagpaneel “Code maken van selectie”.
4. Selecteer het cijfer, maak een nieuwe code aan van het type Label, en sleep de nummertag daarin.

Open dit onderwerp op een eigen pagina

Citaten die in Word met de stijl Citaat zijn opgemaakt, komen goed door in de PDF. Hier is alleen controle nodig.

Kijk in het zijpaneel Toegankelijkheidstags of het citaat in een BlockQuote-tag staat. Dat is de juiste tag. De naam van degene van wie het citaat is, hoort daaronder als gewone P-tag te staan.

Open dit onderwerp op een eigen pagina

Bladwijzers geven de lezer een tweede manier om een lang document te doorzoeken, naast de inhoudsopgave. Word maakt ze uit de koppenstructuur, mits bij de export “Bladwijzers maken met Koppen” is aangevinkt.

Controleer het resultaat in het zijpaneel Bladwijzers. Je ziet daar dezelfde boomstructuur als in de inhoudsopgave: klik op een bladwijzer en je springt naar die kop, klap hem uit en je ziet de subkoppen eronder.

Ontbreekt er een bladwijzer of moet er een bij, dan is die in dit paneel toe te voegen en te verslepen.

Open dit onderwerp op een eigen pagina

De volgorde waarin de inhoud in de PDF staat, is niet altijd de volgorde waarin hij wordt voorgelezen. Dat hangt af van hoe de PDF de inhoud op de pagina heeft geplaatst, en dat kan willekeurig lijken.

Bij export uit Word gaat dit meestal goed, maar ga daar niet van uit. Open het zijpaneel Volgorde. Je ziet per pagina de blokken met een nummer, en dezelfde nummers staan op de pagina zelf.

De blokken hoeven niet gelijkmatig verdeeld te zijn. Het ene blok is een kop met een alinea, het volgende alleen een kop, het derde drie koppen achter elkaar. Dat is geen fout, zolang de volgorde maar klopt. Let ook op de voetnoten: die horen ná de zin te komen waar ze bij staan.

Een blok verplaatsen doe je door het in het zijpaneel te slepen.

Open dit onderwerp op een eigen pagina

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

Ga als volgt te werk:

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

Open dit onderwerp op een eigen pagina

Draai PAC nog een keer op het afgeronde document en vergelijk de uitkomst met de eerste meting. De meldingen die je onderweg hebt opgelost horen weg te zijn.

Blijven er meldingen staan, loop dan deze vier na. Het zijn de dingen die het vaakst over het hoofd worden gezien:

• Een link zonder alternatieve beschrijving, meestal in de inhoudsopgave of de voetnoten.
• Een afbeelding zonder begrenzingsvak of zonder kenmerkobject.
• Een gegevenscel die nog als kopcel staat, of een kopcel zonder gekoppelde ID’s.
• Een lege tag die nog geen artefact is.

Open dit onderwerp op een eigen pagina

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

Een gewone knop met een click voldoet al aan dit criterium. De browser voert die pas uit als de bezoeker op hetzelfde onderdeel loslaat.

// goed: wegschuiven voordat je loslaat en er gebeurt niets
knop.addEventListener('click', verwijder);

// fout: gaat af zodra de knop wordt geraakt
knop.addEventListener('mousedown', verwijder);
knop.addEventListener('pointerdown', verwijder);
knop.addEventListener('touchstart', verwijder);

Kun je niet om het indrukken heen, geef dan een weg terug. Een melding met “Ongedaan maken” die tien seconden blijft staan is genoeg, en is voor iedereen een verbetering. Zorg wel dat die melding zelf met het toetsenbord bereikbaar is en lang genoeg blijft staan; anders verplaats je het probleem.

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

Wie een wachtwoordbeheerder gebruikt hoeft niets te onthouden en niets over te typen. Daarmee is de eis vervuld, zolang de site die beheerder niet in de weg zit.

Zet daarom het juiste autocomplete-woord op elk veld:

<label for="gebruiker">E-mailadres</label>
<input id="gebruiker" name="gebruiker" type="email"
       autocomplete="username">

<label for="wachtwoord">Wachtwoord</label>
<input id="wachtwoord" name="wachtwoord" type="password"
       autocomplete="current-password">

<label for="code">Code uit je sms</label>
<input id="code" name="code" type="text" inputmode="numeric"
       autocomplete="one-time-code">

De laatste wordt het vaakst vergeten en helpt het meest: met one-time-code biedt de telefoon de code uit de sms zelf aan boven het toetsenbord.

Drie dingen die je niet moet doen:

• Plakken blokkeren. Bedoeld tegen slordigheid, werkt alleen tegen wie het goed doet.
• De code opknippen in losse vakjes. Geen wachtwoordbeheerder komt daar doorheen.
• Het wachtwoordveld hernoemen om beheerders te misleiden.

Open dit onderwerp op een eigen pagina

Een klik bestaat uit twee momenten: het indrukken en het loslaten. Reageert een knop al op het indrukken, dan is een vergissing niet meer terug te nemen. Reageert hij op het loslaten, dan kan de bezoeker zijn vinger of muis nog wegschuiven en gebeurt er niets.

Zorg daarom dat een knop pas reageert bij het loslaten. Kan dat niet, geef dan een manier om de actie ongedaan te maken. Dit criterium staat op niveau A.

Dit maakt verschil voor:

• Bezoekers met trillende handen, die zelden meteen goed raken.
• Bezoekers die de aanwijzer met hun ogen of hun hoofd besturen.
• Bezoekers die slecht zien en pas bij aanraking merken waar ze zitten.
• Bezoekers die hun telefoon bedienen terwijl ze bewegen.

Het gaat vooral om de knoppen waar een vergissing gevolgen heeft: verwijderen, versturen, betalen en opzeggen.

Open dit onderwerp op een eigen pagina

Bij het inloggen mag geen cognitieve test worden opgelegd: geen puzzel, geen code die onthouden en overgetypt moet worden, en geen vraag naar iets wat de bezoeker uit zijn hoofd moet weten. De inlog is de plek waar iedere gebruiker langs moet; wat daar misgaat maakt de rest van de dienst onbereikbaar.

Er zijn twee uitwegen. Er mag een alternatief zijn dat de test niet vraagt, of de test mag gaan over het herkennen van objecten of van een plaatje dat de bezoeker zelf heeft aangeleverd. Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA.

Waar het misgaat:

• Een CAPTCHA met vervormde letters. Dat is puur een test.
• Een code uit een sms die overgetypt moet worden in een venster dat de sms bedekt.
• Zes losse vakjes voor die code, waar geen wachtwoordbeheerder mee overweg kan.
• Een beveiligingsvraag over een eerste huisdier of de meisjesnaam van een moeder.
• Plakken blokkeren in het wachtwoordveld.

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

Deze test duurt vijf minuten en gaat met een eigen account.

Ga als volgt te werk:

• Zet het wachtwoord in een wachtwoordbeheerder.
• Log uit en weer in. Vult de beheerder beide velden?
• Komt er een tweede stap? Is die code te plakken, of wordt hij aangeboden?
• Noteer alles wat met het hoofd of de vingers moest gebeuren.

Waar je op let:

• Losse vakjes voor de code. Probeer te plakken — lukt het?
• Een CAPTCHA in welke vorm dan ook.
• Een beveiligingsvraag.
• Een tijdslimiet die niet gehaald wordt bij langzaam typen.
• Een venster dat de sms bedekt, zodat de code niet te lezen is.

De controle in de code:

document.querySelectorAll('input').forEach(function (el) {
  console.log(el.type, '·', el.autocomplete || 'GEEN AUTOCOMPLETE', '·', el.name);
});

Staat er bij het wachtwoordveld geen current-password en bij het codeveld geen one-time-code, dan is duidelijk waar te beginnen.

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

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

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

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

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

<div class="tweeluik">
  <div class="tekst">…</div>       <!-- eerst lezen, eerst in de code -->
  <figure class="beeld">…</figure>
</div>

.tweeluik { display: grid; grid-template-columns: 1fr 1fr; }

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

Open dit onderwerp op een eigen pagina

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

Ga als volgt te werk:

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

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

Drie plekken waar het vaak misgaat:

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

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

tabindex="1"
tabindex="2"

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

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