Auditeur

Afbeeldingen waar (voornamelijk) tekst op staat, en waar die tekst bedoeld is om informatie over te dragen, noemen we afbeeldingen van tekst. Voor deze afbeeldingen geldt: Als dezelfde weergave ook met alleen echte tekst kan worden gemaakt, gebruik dan geen afbeelding van tekst maar gebruik echte tekst.

Afbeeldingen van tekst zijn voor sommige mensen niet handig omdat een schermlezer de tekst niet standaard voorleest. Ook kunnen de stijleigenschappen van tekst in een afbeelding niet worden aangepast naar eigen wensen of behoeften van iemand, zoals het vergroten van de lettergrootte of het veranderen van de kleur.

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

Slepen vraagt drie dingen tegelijk: precies raken, ingedrukt houden en tegelijk bewegen. Voor wie beeft, met zijn ogen aanwijst of een schakelaar gebruikt zijn dat drie opgaven achter elkaar. Kan een functie alleen met slepen worden bediend, zorg dan dat die ook met losse klikken of tikken werkt.

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

Waar het opduikt:

• Schuifregelaars voor een prijsbereik of het volume.
• Lijsten die je herschikt door onderdelen te verslepen.
• Kaarten die je moet verschuiven om een ander gebied te zien.
• Een carrousel die alleen met vegen te bedienen is.

Er is een uitzondering als het slepen de handeling zelf is: een handtekening zetten, tekenen, schilderen. Bij twijfel helpt één vraag: is hetzelfde resultaat met knoppen te bereiken? Bij een schuifregelaar wel, bij een handtekening niet.

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

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

Acties die in worden geactiveerd door een apparaat te kantelen of te schudden zijn niet goed toegankelijk voor sommige bezoekers. Bezoekers met een motorische beperking kunnen deze acties bijvoorbeeld onbedoeld uitvoeren. Er zijn ook bezoekers die dit niet, of niet goed, kunnen bedienen omdat het apparaat op een vaste plek is bevestigd aan bijvoorbeeld een rolstoel. Ook het maken van gebaren naar een camera die deze de bewegingen kan interpreteren valt onder bewegingsactivering.

Laat bezoekers daarom de bewegingsactivering uitschakelen of zorg dat acties die kunnen worden geactiveerd met bewegingsactivering ook te activeren zijn met een alternatieve bediening.

Open dit onderwerp op een eigen pagina

Bij formulieren hoort een foutcontrole ingebouwd te zijn. De foutcontrole controleert automatisch of een verplicht onderdeel leeg is gelaten of dat een invoerveld verkeerd is ingevuld. Als er een fout is gevonden, dan moet de foutmelding in tekst worden weergegeven. Deze tekst kan worden aangevuld met andere visuele aanwijzingen, zoals een andere kleur of een icoon.

Benoem in de tekst van de foutmelding de naam van het veld dat verkeerd is ingevuld en benoem precies wat de fout is. Schrijf dus niet:

• Dit veld is verplicht.

Maar schrijf:

• Het veld ‘Telefoonnummer’ mag niet leeg zijn.

In de code kan ook worden aangegeven welk veld verkeerd is ingevuld. Gebruik hiervoor het attribuut aria-invalid. Daarnaast hoort de foutmelding in de code aan het bijbehorende invoerveld te worden gekoppeld. Dit voorkomt verwarring bij bezoekers die gebruik maken van hulptechnologieën. Een foutmelding kan op een aantal manieren worden gekoppeld zoals met een aria-describedby-attribuut.

In de code ziet dat er zo uit:

<label for="veld1">Telefoonnummer:</label>
<input type="text" id="veld1" aria-invalid="true" aria-describedby="fout">
<span id="fout">Het veld &lsquo;Telefoonnummer&rsquo; mag niet leeg zijn.</span>

Open dit onderwerp op een eigen pagina

Als er een fout is gevonden en suggesties voor verbetering zijn bekend, dan moeten deze suggesties aan de bezoeker worden getoond. De suggesties kunnen worden gebruikt om beter te begrijpen wat er precies ingevuld moet worden.

Bij veel invoervelden is bekend in welk formaat het ingevuld moet worden. Zo bestaat in Nederland een telefoonnummer uit 10 cijfers en een postcode uit 4 cijfers en 2 letters. Een goede foutmelding bestaat dan uit de mededeling dat het veld ‘telefoonnummer’ niet juist is ingevuld, en dat een telefoonnummer uit 10 cijfers bestaat.

Schrijf dus niet:

• Dit veld is niet juist ingevuld.

Maar schrijf:

• Geboortedatum is niet juist ingevuld. Gebruik het formaat dd-mm-jjjj.
• Het veld ‘Telefoonnummer’ is niet juist ingevuld. Een telefoonnummer bestaat uit 10 cijfers.

Open dit onderwerp op een eigen pagina

Vaak moeten in formulieren gegevens worden ingevuld die bij veel andere formulieren ook worden gevraagd. Dit geldt voor veelgevraagde gegevens zoals naam, e-mailadres en telefoonnummer.

Het doel van een invoerveld kan worden vastgelegd in de code. Hierdoor begrijpen browsers welke gegevens er worden gevraagd. Een browser kan het formulier dan al (deels) automatisch zelf invullen. Dit is handig voor alle bezoekers, maar voor bezoekers met een motorische beperking is dit nog belangrijker. Het invullen van een formulier kan hen veel tijd kosten.

Gebruik hiervoor het autocomplete-attribuut in de code om het doel van het invoerveld toe te voegen aan het <​input​>-element.

In de code ziet dat er zo uit:

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

<label for="veld2">Geboortedatum:</label>
<input type="text" id="veld2" autocomplete="bday">

Open dit onderwerp op een eigen pagina

Slepen vraagt drie dingen tegelijk: precies raken, ingedrukt houden en tegelijk bewegen. Voor wie beeft, met zijn ogen aanwijst of een schakelaar gebruikt zijn dat drie opgaven achter elkaar. Kan een functie alleen met slepen worden bediend, zorg dan dat die ook met losse klikken of tikken werkt.

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

Waar het opduikt:

• Schuifregelaars voor een prijsbereik of het volume.
• Lijsten die je herschikt door onderdelen te verslepen.
• Kaarten die je moet verschuiven om een ander gebied te zien.
• Een carrousel die alleen met vegen te bedienen is.

Er is een uitzondering als het slepen de handeling zelf is: een handtekening zetten, tekenen, schilderen. Bij twijfel helpt één vraag: is hetzelfde resultaat met knoppen te bereiken? Bij een schuifregelaar wel, bij een handtekening niet.

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

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

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

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

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

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

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

Verwijs in instructies niet alleen naar zintuiglijke eigenschappen van componenten zoals vorm, kleur, omvang, locatie, oriëntatie of geluid. Gebruik daarnaast ook tekst.

Schrijf dus niet:

• Gebruik de ronde knop om je gegevens te verzenden. (vorm)
• Op de dagen met een groen bolletje zijn wij beschikbaar. (kleur)
• Klik op de knop rechts onderaan de pagina om naar de volgende pagina te gaan. (locatie)

Maar zeg wel:

• Gebruik de (ronde, groene) knop (onderaan) met tekst “Verzenden” om je gegevens te in te sturen.

Instructies waarin alleen zintuiglijke eigenschappen worden gebruikt zijn niet door alle bezoekers goed te volgen. Zo kunnen bezoekers die blind of slechtziend zijn vorm, omvang of locatie niet waarnemen. Instructies waarin alleen geluid wordt gebruikt zijn niet, of niet goed, te volgen voor bezoekers die doof of slechthorend zijn.

Open dit onderwerp op een eigen pagina

Koppen moeten het onderwerp of doel van de onderliggende tekst beschrijven. Koppen helpen mensen om snel te begrijpen waar een webpagina of document over gaat. Gebruik daarom verschillende kopniveaus om de content goed te structuren.

Zorg dat elke kop iets zegt over de tekst die eronder staat, zodat de koppen de onderliggende content goed beschrijven. Dit helpt iedereen om een tekst beter te begrijpen, en alle koppen samen horen een goed beeld te geven van de hele content. Een kop moet dus ook altijd content hebben.

Mensen die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de webpagina te navigeren.

Open dit onderwerp op een eigen pagina