Succescriterium 1.3.1 Info en relaties
Niveau A
Lees de officiële tekst van succescriterium 1.3.1 Info en relaties
Word-bestand klaarmaken
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.
Een logo in de koptekst of voettekst hoeft geen alternatieve tekst. Die gebieden worden in de PDF als artefact behandeld: decoratie die wordt overgeslagen. Zet het logo daarom op het voorblad, want daar wordt het wel voorgelezen.
Thema’sDoelgroepenWie het raaktHulpmiddelenExporteren naar PDF
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:
- Kies bij het bestandstype voor PDF.
- Klik op Meer opties.
- Kies bij Optimaliseren voor “Standaard (online publiceren en afdrukken)”.
- Vink onder Opties voor niet-afdrukbare informatie aan: “Bladwijzers maken met Koppen” en “Labels voor documentstructuur voor toegankelijkheid”.
- Vink onder PDF-opties “Voldoet aan PDF/A” aan, zodat het lettertype in het document wordt ingesloten.
- Klik op Opslaan.
Door PDF/A staat het bestand op Alleen lezen en kun je het in Acrobat niet meteen bewerken. Dat is geen fout. Klik in Acrobat op de knop “Bewerken inschakelen” in de blauwe balk bovenaan en sla het document opnieuw op.
Thema’sDoelgroepenWie het raaktHulpmiddelenOpenen in Acrobat Pro
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.
Maak vanaf nu regelmatig een kopie van het bestand. De functie Ongedaan maken werkt in Acrobat niet altijd betrouwbaar bij het bewerken van tags. Met een kopie kun je altijd terug naar een eerdere versie.
Thema’sDoelgroepenWie het raaktHulpmiddelenEerste controle in PAC
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:
- Open PAC en klik op Document openen.
- Kies de PDF. Het bestand wordt gescand en de fouten verschijnen.
- 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.
PAC toetst wat een machine kan toetsen. Of een alternatieve tekst klopt, of de leesvolgorde logisch is en of een kop de juiste kop is, moet je zelf beoordelen. Een groene uitslag is dus geen bewijs dat het document toegankelijk is.
Thema’sDoelgroepenWie het raaktHulpmiddelenPart-tags voor de hoofdstukken
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:
- Selecteer het eerste onderdeel van het document.
- Maak via het menu van de drie bolletjes een nieuwe code aan van het type Onderdeel.
- Geef die tag een naam ter herkenning, bijvoorbeeld “Voorblad”. De naam heeft geen betekenis voor de toegankelijkheid, maar houdt het overzichtelijk.
- Sleep alle inhoud van dat onderdeel onder de nieuwe Part-tag. Met Ctrl of Shift selecteer je meerdere tags tegelijk.
- 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.
Sla tussendoor op en maak een kopie. Ongedaan maken werkt bij het slepen van tags niet altijd, en een verkeerd verplaatste tagboom is lastig terug te draaien.
Thema’sDoelgroepenWie het raaktHulpmiddelenArt-tags voor de artikelen
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:
- Selecteer de tag boven een H2.
- Maak via het menu van de drie bolletjes een nieuwe code aan. Het type Artikel staat bovenaan in de lijst.
- Een naam geven mag, maar is niet nodig.
- Selecteer de H2 en alles daaronder tot net vóór de volgende H2. De volgende H2 zelf hoort er niet bij.
- 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.
Acrobat onthoudt het gekozen type van de vorige keer. Controleer bij elke nieuwe tag of er Artikel staat en niet iets anders.
Thema’sDoelgroepenWie het raaktHulpmiddelenLijsten
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.
Ontbreekt de L-tag en staan er losse P-tags, dan is de lijst in Word met de hand gemaakt. Dat is in Acrobat te herstellen, maar het is sneller om het in Word goed te zetten en opnieuw te exporteren.
Thema’sDoelgroepenWie het raaktHulpmiddelenTabellen
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.
- Selecteer de cel die niet klopt.
- Klik met de rechtermuisknop en kies “Eigenschappen van de tabelcel”.
- 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.
Bij grote tabellen is dit veel werk. Dat is precies de reden om je af te vragen of de informatie een tabel moet zijn. Een lijst of een reeks koppen met tekst is vaak beter leesbaar en veel sneller toegankelijk te maken.
Thema’sDoelgroepenWie het raaktHulpmiddelenVoetnoten
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:
- Klik in het document vlak vóór het voetnootnummer.
- Houd Shift ingedrukt en druk op de pijl naar rechts. Pakt hij de spatie mee, corrigeer dan met de pijl naar links.
- Kies in het menu van het tagpaneel “Code maken van selectie”.
- Selecteer het cijfer, maak een nieuwe code aan van het type Label, en sleep de nummertag daarin.
Acrobat maakt van de spatie meestal een eigen tag. Markeer die met “Code wijzigen in artefact”, dan wordt hij niet voorgelezen.
Thema’sDoelgroepenWie het raaktHulpmiddelenCitaten
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.
Is de tekst in Word alleen ingesprongen of cursief gemaakt in plaats van met de stijl Citaat, dan komt het als gewone alinea door. Dat is in Acrobat te herstellen, maar sneller in Word.
Thema’sDoelgroepenWie het raaktHulpmiddelenLaatste controle in PAC
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.
Een groene uitslag in PAC is geen bewijs dat het document toegankelijk is. PAC toetst wat een machine kan toetsen. Of een alternatieve tekst klopt, of de leesvolgorde logisch is en of een kop de juiste kop is, blijft een oordeel van een mens. Lees het document daarom ook een keer voor met voorleessoftware.
Thema’sDoelgroepenWie het raaktHulpmiddelenKoppen als kop-element
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>).Teksten die géén kop zijn, mogen niet worden opgemaakt met een HTML kop-element.
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>In een CMS kan een tekst worden geselecteerd en worden aangegeven dat het een koptekst is. Je kunt hierbij ook het niveau van de kop aangeven. Dit maakt de tekst automatisch op met het juiste HTML-element.
Thema’sDoelgroepenLijsten als lijst-element
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>In een CMS kan een tekst worden geselecteerd en worden aangegeven dat het een lijst is. Je kunt hierbij vaak kiezen voor een opsomming of een genummerde lijst. Dit maakt de tekst automatisch op met het juiste HTML-element.
Thema’sDoelgroepen- een opsomming (
Tabellen als tabel-element
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>In een CMS kan (in veel gevallen) een tabel worden ingevoegd. Bepaal het aantal rijen en kolommen en bepaal nauwkeurig wat de tabelkoppen zijn. Dit maakt de tabel automatisch op met de juiste HTML-elementen.
Thema’sDoelgroepenLabels en instructies
Zorg voor labels bij invoervelden
Labels zijn het belangrijkste element voor een toegankelijk formulier. Zorg voor labels bij alle invoervelden of ander formulierelementen zoals selectievakjes, keuzerondjes en keuzelijsten. Een duidelijk label beschrijft precies wat er in het veld ingevuld moet worden, is zichtbaar voor alle bezoekers en staat dichtbij het invoerveld.
Het label moet in de code worden gekoppeld aan het invoerveld. Zo maak je het invoerveld ook toegankelijk voor bezoekers die gebruik maken van hulptechnologieën. Het label is de naam van het invoerveld. Een label vergroot ook het klikbare gebied waarmee een invoerveld kan worden geselecteerd. Dit is handig voor bijvoorbeeld bezoekers met een motorische beperking.
Koppel labels in de code aan een invoerveld
Labels worden geplaatst met het
<label>-element. Het koppelen van een<label>-element aan een formulierelement gebeurt met eenfor/id-koppeling. Geef hiervoor het<label>-element eenfor-attribuut en het bijbehorende formulierelement eenid-attribuut met dezelfde waarde.In de code ziet dat er zo uit:
<label for="veld1">Naam:</label> <input type="text" id="veld1"> <label for="veld2">Kies je kleur:</label> <select id="veld2"> <option value="0">Rood</option> <option value="1">Groen</option> <option value="2">Blauw</option> </select> <input type="checkbox" id="veld3"> <label for="veld3">Meld mij aan voor de nieuwsbrief</label>Er zijn ook manieren om de labels visueel te verbergen. Vraag je dan wel goed af waarom je dat zou willen doen. Het invoerveld verliest dan het grotere klikbare gebied en het wordt misschien minder duidelijk voor bezoekers. Als het label toch visueel wordt verborgen, zorg er dan er wel voor dat er een label beschikbaar is voor hulptechnologieën. Gebruik hiervoor het attribuut
aria-label,aria-labelledbyof eentitle-attribuut. Deze zijn niet zichtbaar.In de code ziet dat er zo uit:
<input type="text" aria-label="Naam">Let op: Placeholdertekst mag niet als enige manier worden gebruikt om een label toe te voegen aan een invoerveld.
Groepeer meerdere secties van gerelateerde invoervelden
Als een formulier meerdere secties van gerelateerde invoervelden heeft dan wordt een
<fieldset>-element gebruikt om deze te groeperen. Geef het<fieldset>-element een label door een<legend>-element in het<fieldset>-element te plaatsen. Hulptechnologieën gebruiken het<legend>-element alsof het een onderdeel is van het label van de elementen in het<fieldset>-element.Het
<fieldset>-element is vooral relevant voor het groeperen selectierondjes en keuzevakjes maar kan ook worden gebruikt om andere invoervelden te groeperen.In de code ziet dat er zo uit:
<fieldset> <legend>Ben jij al orgaandonor?</legend> <input type="radio" id="veld1"> <label for="veld1" value="ja">Ja, ik ben orgaandonor</label> <input type="radio" id="veld2"> <label for="veld2" value="nee">Nee, ik ben geen orgaandonor</label> </fieldset>Zorg voor instructies bij invoervelden
Instructies geven een extra hint voor de invoer in het invoerveld. De instructies in een formulier moeten aangeven of er verplichte velden zijn en eventueel of er een verplicht invoerformaat is.
Geef aan dat een invoerveld verplicht is
Het aangeven van een verplicht invoerveld kan in tekst of bijvoorbeeld met een asteriks (*). Zorg dat deze aanduiding in het
<label>-element is geplaatst.In de code ziet dat er zo uit:
<label for="veld1">Naam: (verplicht)</label> <input type="text" id="veld1">Als de instructies niet duidelijk per invoerveld worden benoemd dan hoort voorafgaand aan het eerste invoerveld in tekst worden aangegeven op welke manier de verplichte velden zijn aangeduid.
In de code ziet dat er zo uit:
<p>Alle velden met een * zijn verplicht.</p> <label for="veld1">Naam: *</label> <input type="text" id="veld1"> <label for="veld2">Favoriete dier: *</label> <input type="text" id="veld2">Markeer verplichte velden ook in de code. Gebruik hiervoor bij voorkeur het
aria-required-attribuut.<p>Alle velden met een * zijn verplicht.</p> <label for="veld1">Naam: *</label> <input type="text" id="veld1" aria-required="true"> <fieldset> <legend>Ben jij al orgaandonor? *</legend> <input type="radio" id="veld2" value="ja" aria-required="true"> <label for="veld2">Ja, ik ben orgaandonor</label> <input type="radio" id="veld3" value="nee" aria-required="true"> <label for="veld3">Nee, ik ben geen orgaandonor</label> </fieldset>Geef het aan als er een verplicht invoerformaat is verplicht is
Ook bij verplichte invoerformaten, zoals een postcode of een e-mailadres die moet worden ingevuld, moeten blijken uit de instructies wat de eisen zijn aan de invoer. Dit kan direct in het
<label>-element.In de code ziet dat er zo uit:
<label for="veld1">Geboortedatum (dd-mm-jjjj):</label> <input type="text" id="veld1">Maar dit kan ook via het attribuut
aria-describedby.In de code ziet dat er zo uit:
<label for="veld1">Geboortedatum:</label> <input type="text" id="veld1" aria-describedby="beschrijving"> <span id="beschrijving">dd-mm-jjjj</span>Thema’sDoelgroepenWie het raakt