Je bent blind

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

Met een muis is deze fout nauwelijks te vinden: je klikt, kiest en bent klaar. Met het toetsenbord komt hij meteen boven.

Ga als volgt te werk:

• Tab naar een keuzelijst.
• Ga met de pijltoetsen omlaag door de opties, alsof je aan het kijken bent.
• Gebeurt er iets? Dan is dat de fout.
• Doe hetzelfde met vinkjes en keuzerondjes: spatie erop en kijken of de pagina blijft staan.

Vergeet de tekstvelden niet. Vul een veld in en druk op Tab om verder te gaan. Verandert er dan iets aan de pagina — een blok dat verschijnt, een sprong naar boven — dan valt dat ook onder dit criterium.

In de code is het ook op te zoeken:

document.querySelectorAll('[onchange], select, input[type=checkbox], input[type=radio]')
  .forEach(function (el) {
    if (el.getAttribute('onchange')) console.warn('onchange:', el);
  });

Zoek in de bronbestanden daarnaast naar form.submit() en addEventListener('change'. Niet elke treffer is fout, maar het zijn wel de plekken om te kijken.

Open dit onderwerp op een eigen pagina

Onderdelen die hetzelfde doen horen overal dezelfde naam te krijgen. Dat geldt voor de zichtbare tekst en voor het alternatief van een pictogram. Heet dezelfde knop op de ene pagina “Zoeken”, op de andere “Zoek”, en staat er elders alleen een vergrootglas zonder tekst, dan is dat voor wie kijkt één ding en voor wie luistert drie.

Waar het vaak misgaat:

• Een pictogram zonder tekst, met per pagina een ander alternatief: “zoeken”, “zoek”, “vergrootglas”.
• Downloadlinks: “Download pdf”, “Pdf downloaden”, “Bekijk het rapport” — voor hetzelfde bestand.
• De knop die een formulier verstuurt: “Versturen”, “Verzenden”, “Aanvragen”, “Ok”.
• Een sluitkruisje dat de ene keer “Sluiten” heet en de andere keer “Annuleren”.

Dit telt het zwaarst bij spraakbediening. Wie zijn computer met zijn stem bedient zegt “klik Zoeken”. Heet de knop op die pagina “Zoek”, dan gebeurt er niets.

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

Het bedienen van een onderdeel mag niet vanzelf de context veranderen: geen nieuwe pagina, geen ander venster en geen verplaatste focus. Tenzij vooraf is aangekondigd dat dat gebeurt. Een keuzelijst die zichzelf verstuurt verandert de pagina terwijl de bezoeker nog aan het kiezen is — wie met de pijltjestoetsen door een lijst met landen gaat, is al weg bij de tweede optie.

De drie klassiekers:

• Een keuzelijst die verstuurt. Van land, taal of sortering.
• Een veld dat de focus doorzet. Vier vakjes voor een pincode, en na elk cijfer springt de focus door. Bij een typefout is er geen weg terug.
• Een vinkje dat de pagina herlaadt, bijvoorbeeld een filter dat meteen zoekt.

Wie kijkt, ziet dat de pagina verandert. Wie luistert, hoort een schermlezer opnieuw beginnen zonder te weten waarom. Wie langzaam bedient, raakt in de knel omdat het gebeurt vóór hij klaar is.

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

Dit is geen technisch probleem. Het ontstaat doordat verschillende mensen op verschillende momenten een knop een naam geven. De oplossing is een afspraak.

Maak een lijst met de tien tot twintig onderdelen die overal terugkomen, en spreek per stuk één naam af:

Zoeken            (niet: Zoek, Vind, Search)
Versturen         (niet: Verzenden, Ok, Aanvragen)
Sluiten           (niet: Annuleren, Terug, X)
Download pdf      (niet: Pdf downloaden, Bekijk pdf)
Neem contact op   (niet: Contact, Mail ons)

Een pictogram zonder tekst heeft een naam nodig die niet zichtbaar is. Gebruik overal dezelfde:

<button aria-label="Zoeken">
  <svg aria-hidden="true">…</svg>
</button>

Staat er wel tekst naast het pictogram, dan is die tekst de naam. Zet het pictogram dan op aria-hidden, anders wordt de naam twee keer voorgelezen.

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

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

Haal de namen op met dit script in de console:

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

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

Waar je op let:

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

Open dit onderwerp op een eigen pagina

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 één oplossing die altijd werkt en die in twee minuten is gebouwd: zet er een knop naast.

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

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

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

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

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

Open dit onderwerp op een eigen pagina

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