WCAG en semantische opmaak
De belangrijkste WCAG-richtlijnen voor semantische opmaak
Semantische opmaak heeft veel invloed op toegankelijkheid. Het speelt dan ook een belangrijke rol bij het voldoen aan de WCAG-richtlijnen (Web Content Accessibility Guidelines). Met strikte en goede semantische opmaak voorkom je direct veel issues. Hoe semantische opmaak zich verhoudt tot de WCAG is in dit artikel uitgelegd.
Door semantische opmaak op de juiste manier te gebruiken wordt er informatie geboden aan hulptechnologieën over structuur en relaties binnen bepaalde content.
Software herkent bijvoorbeeld koppen en standaardtekst waar specifieke functies aan zijn gekoppeld, maar ook cellen van tabellen, waarna deze in relatie kan worden gebracht met een bepaalde kolom of rij in de tabel. Het helpt bij het geven van structuur en betekenis aan content, waardoor deze voorspelbaar en logisch wordt. Dit zorgt voor een goede leesvolgorde en is belangrijk bij het navigeren. Bovendien zorgt semantische opmaak ervoor dat, zodra de informatie op een aangepast scherm (groter of kleiner) wordt aangeboden, dat de elementen mee-schalen en goed blijven uitlijnen. Deze eigenschappen van toegankelijke publicaties zijn allemaal beschreven in de WCAG en bovendien verplicht volgens de Europese Toegankelijkheidsakte. Meer details over waarom semantische opmaak belangrijk is, lees je in artikel Wat is semantische opmaak en waarom toepassen?
De WCAG (Web Content Accessibility Guidelines) bieden criteria en richtlijnen voor het toegankelijk maken van (digitale) content en publicaties. Welke belangrijke succescriteria betrekking hebben op semantische opmaak hebben we voor je op een rij gezet.
Aanpasbaar maken van inhoud
Onder principe Waarneembaar, richtlijn Aanpasbaar vallen twee criteria waarbij semantische opmaak in publicaties een grote rol speelt. Door semantische opmaak kan een lezer kiezen (aanpassen) in welke vorm de content gepresenteerd wordt. Bijvoorbeeld in een eenvoudiger lay-out, in spraak of braille. De criteria zijn:
- Criterium 1.3.1 Info en relaties (niveau A): Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.
- Criterium 1.3.2 Betekenisvolle volgorde (niveau A): Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een correcte leesvolgorde door software bepaald worden.
Door inhoud (paragrafen, lijsten, tabellen, koppen, kaders) semantische opmaak mee te geven, presenteer je de inhoud op een voor software begrijpelijke wijze. Dit doe je bijvoorbeeld door ‘onder water’ inhoud te taggen. Bijvoorbeeld met de juiste HTML-tags (zoals <ul>, <table>, <h1>, etc.) in EPUB. Hierdoor weet software wat een kop is en hoe deze gepresenteerd moet worden aan de lezer.
Semantische opmaak zorgt er ook voor dat software weet in welke volgorde elementen gepresenteerd moeten worden. Bijvoorbeeld: door tabellen semantisch als tabellen op te maken, benadert hulpsoftware deze inhoud op specifieke wijze. De inhoud wordt dan van links naar rechts, rij voor rij voorgelezen. Zoals een gebruiker van een schermlezer verwacht. De lezer kan dan met sneltoetsen navigeren door de tabel, en meer informatie oproepen over de cel waar het zich bevindt. Zoals informatie over de kolom en rij waar de cel staat. Wordt de tabel semantisch niet of verkeerd opgemaakt, dan kan het zijn dat de inhoud kolom voor kolom gepresenteerd wordt. Door schermlezers, maar ook bij vereenvoudigde opmaak of vergrote weergave.
Onderscheidbare inhoud
Onder principe Waarneembaar, richtlijn Onderscheidbaar vallen ook een aantal criteria, waarbij semantische opmaak een rol speelt. Met deze richtlijn wordt geborgd dat de inhoud van een publicatie of website goed onderscheidbaar is. Bijvoorbeeld door goed kleurgebruik. De lezer moet de inhoud kunnen aanpassen om de onderscheidbaarheid te verbeteren als de oorspronkelijke inhoud onvoldoende waarneembaar is voor de lezer. En daar speelt semantische opmaak een rol. Het gaat hierbij o.a. over de volgende criteria:
- Criterium 1.4.4 Herschalen van tekst (niveau AA): Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit.
- Criterium 1.4.10 Reflow (niveau AA): Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:
- Content die verticaal scrollbaar is en een breedte heeft van 320 CSS-pixels.
- Content die horizontaal scrollbaar is en een breedte heeft van 256 CSS-pixels.
- Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen. - Criterium 1.4.12 Tekstafstand (niveau AA): Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:
- Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;
- Afstand tussen alinea’s naar ten minste 2 keer de lettergrootte;
- Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
- Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.
Samenvattend, deze criteria borgen dat een publicatie gelezen kan worden op verschillende schermformaten, dat een lezer kan inzoomen en aanpassingen kan doen aan tekstweergave. Hierdoor wordt de inhoud beter onderscheidbaar ten opzichte van de achtergrond voor de lezer. Door goede semantische opmaak zorg je ervoor dat er geen inhoud verloren gaat. Bijvoorbeeld doordat het ‘buiten beeld’ valt of doordat het gaat overlappen met andere inhoud. Met de juiste tagging van de inhoud, kan de software goed anticiperen op de aangepaste weergave.
Met goede semantische opmaak voldoe je ook aan criterium 1.4.5 Afbeeldingen van tekst (niveau AA). Een afbeelding van tekst is immers niet naar wens onderscheidbaar te maken door de lezer. Meer informatie over dit criterium vind je in artikel WCAG-criterium 1.4.5: Vermijd beeld van tekst.
Bedienbare inhoud
Door te voldoen aan principe Bedienbaar, richtlijn Toetsenbordtoegankelijk zorg je ervoor dat je publicatie te bedienen is met alleen een toetsenbord. Voor digitale publicaties is voornamelijk het volgende criterium relevant:
- Criterium 2.1.1 Toetsenbord (niveau A): Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.
Het gaat hier met name over ‘functionaliteiten’. Daarmee is het strikt niet direct van toepassing op digitale publicaties. Hulpsoftware maakt echter gebruik van semantische opmaak in de navigatie. Met schermleessoftware worden de mogelijkheden om via toetsenbord te navigeren uitgebreid. Zo kan een lezer door een publicatie scannen met de H-toets. Daarmee wordt van kop naar kop genavigeerd. Ook kan een lezer direct naar een lijst, tabel of media ‘springen’. Voorwaarde is dan wel dat de inhoud semantisch juist is opgemaakt zodat de hulpsoftware de koppen, lijsten, tabellen en media kan herkennen.
Semantische opmaak toepassen en toetsen
Semantische opmaak gaat over veel elementen zoals koppen, tabellen en lijsten. In dit thema richten we ons vooral op elementen die relevant zijn voor digitale publicaties. Wil je weten hoe je semantisch opmaakt. Of wil je toetsen of je publicaties voldoen? Lees dan meer over semantische opmaak in de praktijk of lees over specifieke onderdelen in de volgende artikelen:

Live Q&A met onze expert
Even sparren met een expert. Of tussen de bedrijven door een praktische vraag stellen. Dat kan! Vraag een live Q&A-sessie aan. Krijg snel en deskundig antwoord op jouw vraag. Online. Geheel vrijblijvend.
Rondje van het Huis.