Documentmaker

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

Afbeeldingen die informatie overdragen noemen we informatieve afbeeldingen. Informatieve afbeeldingen zijn belangrijk voor het begrijpen van een tekst of pagina. Deze afbeeldingen vertellen iets over de inhoud of maken een pagina duidelijker.

Deze afbeeldingen moeten een tekstalternatief hebben dat nauwkeurig beschrijft of uitlegt wat er op de afbeelding te zien is. Beschrijf dit in een korte, duidelijke zin. Vermijd daarmee te algemene termen en probeer specifiek te zijn over wat de afbeelding weergeeft. Deze tekst moet beschrijvend genoeg zijn, zodat het de afbeelding kan vervangen als je die niet kunt zien.

Een tekstalternatief voor een <​​img​>-element wordt gegeven met het alt-attribuut.

In de code ziet dat er zo uit:

<img src="poes.jpg" alt="Witte poes speelt met een rode bal">

Open dit onderwerp op een eigen pagina

Complexe afbeeldingen, zoals infographics, grafieken of diagrammen voegen veel informatie toe aan een tekst of pagina. Ze vertellen iets over de inhoud of maken een pagina duidelijker.

Deze afbeeldingen moeten een tekstalternatief hebben. Omdat er vaak erg veel informatie op de afbeelding staat, is het moeilijk om alles beknopt te beschrijven in een kort tekstalternatief. In dat geval is het nuttig om daarnaast ook een meer uitgebreide beschrijving te geven in de omringende tekst. Een handige manier om de visuele informatie ook in tekst aan te bieden, is bijvoorbeeld door de informatie helemaal uit te schrijven. Als het gaat om een diagram of grafiek, gebruik dan bijvoorbeeld een datatabel.

In de code ziet dat er zo uit:

<img src="grafiek.jpg" alt="Verkoopcijfers zijn in 2021 met 18% gestegen">
<div>
  <p>De groei van maandelijkse verkopen in 2021 tegen 2020 verliep als volgt:</p>
  <ul>
    <li>Januari: +22%</li>
    <li>...

Je kunt ook een link bij de afbeelding plaatsen die verwijst naar een andere pagina met een uitgebreide beschrijving van de informatie op de afbeelding. Zet deze link direct voor of direct na de afbeelding.

Open dit onderwerp op een eigen pagina

Afbeeldingen die puur decoratief zijn voegen geen informatie toe. Ze maken een pagina aantrekkelijker, maar zijn niet echt nodig om een tekst of pagina te begrijpen. Mensen die gebruik maken van schermlezers, hebben eigenlijk niets aan deze plaatjes. Zorg daarom dat decoratieve afbeeldingen worden verborgen voor schermlezers.

Decoratieve afbeeldingen kunnen het best met CSS worden geplaatst.

In de code ziet dat er zo uit:

<div class="line"></div>

.line {
 background-image: url("horizontale-lijn.jpg");
}

Als het niet mogelijk is om een decoratieve afbeelding met CSS te plaatsen, dan moet het alt-attribuut in het <​img​>-element worden leeg gelaten. Het alt-attribuut moet wel aanwezig zijn maar het heeft dan geen tekst.

In de code ziet dat er zo uit:

<img src="horizontale-lijn.jpg" alt="">

Open dit onderwerp op een eigen pagina

Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.

Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.

Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. Dit kan bijvoorbeeld door het verbergen van een deel van de linktekst met CSS.

In de code zit dat er zo uit:

<a href="info.html">Lees meer <span class="sr-only"> over digitale toegankelijkheid</span></a>

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

De linktekst kan eventueel in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

In de code ziet dat er zo uit:

<a href="info.html" aria-label="Lees meer over digitale toegankelijkheid">Lees meer</a>

<a href="info.html" title="Lees meer over digitale toegankelijkheid">Lees meer</a>

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

Hyperlinks, ook wel bladwijzers genoemd, maken het eenvoudig om snel naar specifieke onderdelen binnen een PDF te navigeren. Dit is vooral handig in uitgebreide documenten met veel pagina’s, waar het anders lastig kan zijn om relevante informatie terug te vinden. Bladwijzers bieden een gebruiksvriendelijke manier om met één klik naar een bepaald hoofdstuk, subhoofdstuk of bijlage te springen. Hoe ga je te werk om bladwijzers toe te voegen?

Voorbereiding van het document

Zorg er eerst voor dat je document goed gestructureerd is voordat je bladwijzers toevoegt. Het is belangrijk dat de PDF voorzien is van toegankelijkheidstags, zodat bijvoorbeeld schermlezers het document kunnen voorlezen en de inhoud gestructureerd is. Tags zoals koppen (h1, h2, h3, enz.) helpen om de hiërarchie van het document duidelijk weer te geven.

Het bladwijzerspaneel openen

De meeste PDF-programma’s, zoals Adobe Acrobat, hebben aan de rechterkant van het scherm een bladwijzerspaneel. Door hierop te klikken, kun je dit paneel openen.

Een bladwijzer toevoegen

Navigeer naar de pagina of sectie van het document waarvoor je een bladwijzer wilt maken. Selecteer de gewenste tekst met de selectietool. Vervolgens kun je in het bladwijzerspaneel op de knop ‘Bladwijzer toevoegen’ klikken of gebruik maken van de sneltoets Ctrl + B. De nieuwe bladwijzer verschijnt dan in het paneel, met de geselecteerde tekst als naam.

Bladwijzers een naam geven

Je kunt de naam van een bladwijzer aanpassen door erop te dubbelklikken in het paneel. Kies een duidelijke en beschrijvende naam die de inhoud goed samenvat. Dit maakt het voor lezers gemakkelijker om de juiste bladwijzer te vinden. Voorbeelden van namen zijn: “Hoofdstuk 1 – Inleiding”, “Inhoudsopgave” of “2.1.1. Onderwerp”.

Bladwijzers ordenen

Om de structuur van het document verder te verbeteren, kun je bladwijzers rangschikken op verschillende niveaus. In het bladwijzerspaneel kun je bladwijzers onder elkaar slepen, bijvoorbeeld om subhoofdstukken onder een hoofdstuk te groeperen. Dit maakt het document overzichtelijker en gebruiksvriendelijker, zodat lezers de inhoud sneller kunnen doorgronden.

Open dit onderwerp op een eigen pagina

Het aanpassen van de documenttaal in een PDF is een eenvoudig proces. Dit kan gedaan worden via de documenteigenschappen. Volg deze stappen om de documenttaal in te stellen:

1. Open het document in Adobe Acrobat PRO.
2. Klik op Bestand > Documenteigenschappen om het documenteigenschappen-paneel te openen.
3. Selecteer het tabblad ‘Geavanceerd’.
4. Helemaal onderaan zie je het vakje ‘Taal’ staan. Kies uit de keuzelijst de juiste taal.
5. Klik onderaan het documenteigenschappen-paneel op de ‘OK’-knop om de instellingen op te slaan.

Open dit onderwerp op een eigen pagina

Het aanpassen van de titel in een PDF is een eenvoudig proces. Dit kan gedaan worden via de documenteigenschappen. Volg deze stappen om de titel in te stellen:

1. Open het document in Adobe Acrobat PRO.
2. Klik op Bestand > Documenteigenschappen om het documenteigenschappen-paneel te openen.
3. Selecteer het tabblad ‘Beschrijving’.
4. Helemaal bovenaan zie je het invoerveld ‘Titel’ staan. Vul hier een beschrijvende titel in.
5. Klik onderaan het documenteigenschappen-paneel op de ‘OK’-knop om de instellingen op te slaan.

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

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

Voorleessoftware kan tekst omzetten in spraak. Als de taal niet, of op een verkeerde manier, is aangegeven in de code, dan kan de voorleessoftware de tekst niet duidelijk voorlezen.

Als een zin of paragraaf in de content in een andere taal dan de standaard taal is geschreven, dan moet dit worden aangegeven in de code. Zo kan software de taal van de webpagina bepalen. Deze verplichting geldt alleen voor zinnen en paragrafen, dus niet voor losse woorden.

Een taalwissel voor onderdelen van een webpagina wordt ingesteld met het lang-attribuut in het element die een andere taal heeft dan de hoofdtaal van de website. Het lang-attribuut kan worden gebruikt op blok-elementen (<​​div​>, <​​p​>, <​​table​>, enz.) maar ook op inline-elementen (<​​span​>, <​​a​>, <​​strong​>, enz.).

In de code ziet dat er zo uit:

<p lang="en">The quick brown fox jumps over the lazy dog.</p>

<p lang="en">In Dutch we say <span lang="nl">Pa's wijze lynx bezag vroom het fikse aquaduct</span>.</p>

Elke taal heeft zijn eigen code. Voor Nederlands is dat ‘nl‘ (lang="nl"), voor Engels ‘en‘ (lang="en"), en voor Duits ‘de‘ (lang="de").

Open dit onderwerp op een eigen pagina

Geef elke link een beschrijvende linktekst die het doel van de link uitlegt. Linkteksten zoals ‘lees meer’ of ‘klik hier’ zijn niet duidelijk genoeg. Daarom is het belangrijk om linkteksten te gebruiken die zelf aangeven waar de link naartoe leidt. Zo is gemakkelijk het verschil te zien tussen verschillende links op dezelfde pagina.

Schermlezers kunnen een overzicht van alle links presenteren. Zo kan snel worden genavigeerd naar de inhoud.

Als het echt niet anders kan, dan mag ook nog de context van de link worden gebruikt om het doel van de link te beschrijven. Bijvoorbeeld dezelfde zin, paragraaf of in dezelfde tabelcel. Dit kan bijvoorbeeld door het verbergen van een deel van de linktekst met CSS.

In de code zit dat er zo uit:

<a href="info.html">Lees meer <span class="sr-only"> over digitale toegankelijkheid</span></a>

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

De linktekst kan eventueel in de code ook worden uitgebreid met het aria-label-attribuut of met het title-attribuut.

In de code ziet dat er zo uit:

<a href="info.html" aria-label="Lees meer over digitale toegankelijkheid">Lees meer</a>

<a href="info.html" title="Lees meer over digitale toegankelijkheid">Lees meer</a>

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

Koppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een grotere lettergrootte, vetgedrukte tekst, of een andere kleur tekst. Deze betekenis moet ook in de code worden toegevoegd, zodat het ook door software te begrijpen is. Zorg daarom dat alle tekst die er uit ziet als een kop en ook de functie heeft van een kop wordt opgemaakt met een kop-element.

Zorg voor een passend kopniveau. Alle koppen samen moeten een goed beeld geven van de inhoud van de webpagina.

Bezoekers die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de pagina te navigeren. Zij kunnen eventueel ook gelijk springen naar de volgende kop.

Zorg dat koppen worden opgemaakt met een HTML kop-element (<​h1> t/m <​h6>).

Zorg ook dat de volgorde van de koppen en tussenkoppen logisch is. Een paar vuistregels zijn:

• De eerste kop op de pagina hoort een kop van het eerste niveau te zijn.
• Na een kop van het eerste niveau hoort een kop van het tweede niveau te volgen.
• Na een kop van het tweede niveau hoort opnieuw een kop van het tweede niveau volgen óf een kop van het derde niveau.
• Kopniveaus horen niet te worden overgeslagen.

<h1>Kop van het eerste niveau</h1>
<h2>Tussenkop van het tweede niveau</h2>
<p>...</p>
<h2>Tussenkop van het tweede niveau</h2>
<p>...</p>

<h2>Tussenkop van het tweede niveau</h2>
<p>...</p>
<h3>Tussenkop van het derde niveau</h3>
<p>...</p>

Open dit onderwerp op een eigen pagina

Lijsten zijn vaak te herkennen aan een opsommingsteken of een nummer voor het lijstonderdeel. Mensen die de tekst kunnen zien, herkennen hieraan meteen wat de lijsten zijn maar dit soort vormgeving moet niet de enige manier zijn waarop dit wordt overgebracht.

De betekenis moet ook in de code worden toegevoegd zodat het ook door software te begrijpen is. Zorg daarom dat alle tekst die er uit ziet als een lijst en ook de functie heeft van een lijst wordt opgemaakt met een passend lijst-element.

Er zijn verschillende soorten lijsten:

• een opsomming (<ul>)
• een genummerde lijst (<ol>)
• en een lijst met beschrijvingen (<dl>).

Opsomming

Onderdelen in een opsomming worden voorafgegaan door een opsommingsteken zoals een bolletje of een streepje. Gebruik opsommingen als de volgorde van de onderdelen in de lijst niet belangrijk is.

In de code ziet dat er zo uit:

<ul>
  <li>Eerste onderdeel van een opsomming</li>
  <li>Tweede onderdeel van een opsomming</li>
  ...
</ul>

Genummerde lijst

Onderdelen in een genummerde lijst worden voorafgegaan door een nummer. Gebruik genummerde lijsten als de volgorde van onderdelen in de lijst wél belangrijk is.

In de code ziet dat er zo uit:

<ol>
  <li>Eerste onderdeel van een genummerde lijst</li>
  <li>Tweede onderdeel van een genummerde lijst</li>
  ...
</ol>

Lijst met beschrijvingen

Gebruik een lijst met beschrijvingen bij lijsten die bestaan uit een naam, term of begrip met een beschrijving die daar bij hoort. Gebruik deze lijsten bijvoorbeeld voor een verklarende woordenlijst. Binnen een lijst met beschrijvingen wordt het <​dt​>-element gebruikt om een term aan te geven en wordt het <​dd​>-element om de beschrijving aan te geven.

In de code ziet dat er zo uit:

<dl>
  <dt>conformiteit</dt>
  <dd>voldoen aan alle eisen van een gegeven standaard, richtlijn of specificatie</dd>
  <dt>content (webcontent)</dt>
  <dd>informatie en zintuiglijke ervaring die aan de gebruiker doorgegeven wordt door middel van een user agent, met inbegrip van code of opmaak die de structuur, presentatie en interacties van de content definieert</dd>
</dl>

Open dit onderwerp op een eigen pagina

Tabellen bestaan uit rijen en kolommen. Tabelkoppen zijn vaak te herkennen aan een afwijkende opmaak, zoals een andere achtergrond of vetgedrukte tekst. Individuele cellen worden vaak onderscheiden door een rand of een wisselende rijkleur. Mensen die de tabel kunnen zien, kunnen deze relaties vaak snel herkennen maar dit soort vormgeving moet niet de enige manier zijn waarop de structuur en relaties worden overgebracht.

De betekenis moet ook in de code worden toegevoegd zodat het ook door software te begrijpen is. Dit is handig voor mensen die gebruik maken van hulptechnologieën. Zorg daarom dat alle tabellen worden opgemaakt met een tabel-element en dat tabelkoppen worden opgemaakt met een tabelkop-element. Hiermee wordt dan vastgelegd welke cellen koppen zijn en in welke cellen gegevens staan en wat de onderlinge relaties tussen de cellen zijn.

In de code ziet dat er zo uit:

<table>
  <tr>
    <th>Kop van de eerste kolom</th>
    <th>Kop van de tweede kolom</th>
    <th>Kop van de derde kolom</th>
  </tr>
  <tr>
    <td>Gegevens in de eerste kolom</td>
    <td>Gegevens in de tweede kolom</td>
    <td>Gegevens in de derde kolom</td>
  </tr>
  ...
</table>

Geef de tabel ook een korte beschrijving. Deze beschrijving wordt in de code vastgelegd met een <​caption​>-element. Een goede beschrijving helpt bezoekers om een tabel te vinden en te begrijpen waar de tabel over gaat.

In de code ziet dat er zo uit:

<table>
  <caption>Beschrijving van de tabel</caption>
  <tr>
    <th>Kop van de eerste kolom</th>
    ...
</table>

Open dit onderwerp op een eigen pagina