Wat is semantische opmaak en waarom toepassen?

In dit artikel laten we zien dat semantische opmaak toepassen één van de belangrijkste én eenvoudigste manieren is om digitale toegankelijkheid te verbeteren. Maar wat is dat, semantische opmaak?

Content kan worden opgedeeld in:

• Inhoud: de informatie die overgedragen wordt, ofwel de daadwerkelijke inhoudelijke betekenis van tekst, beeld, geluid of functionele elementen.
• Visuele opmaak: de manier waarop informatie vorm heeft, bijvoorbeeld kleur, grootte, vorm, etc. Vaak heeft de visuele opmaak verwantschap met de rol van informatie, zoals een kop of een paragraaf.
• Semantische opmaak: de rol van opmaak overgedragen op een niet-visuele manier die software kan begrijpen. Door semantische opmaak kan software bijvoorbeeld koppen, tabellen en lijsten herkennen en benoemen of aanpassen.

Door gebruik te maken van beschrijvende tags, stijlen, labels of rollen, wordt ‘onder water’ logica en structuur aan de content gegeven. Hierdoor wordt content voor iedereen, met of zonder (visuele) beperking, duidelijk lees- en vindbaar, en kunnen ook hulptechnologieën zoals schermlezers en brailleleesregels de informatie effectief interpreteren.

Structuur en context met semantische opmaak

Stel je voor dat je met een visuele beperking, en afhankelijk van een hulptechnologie zoals een schermlezer, een digitale publicatie wil lezen zonder semantische opmaak. Je schermlezer heeft dan geen idee hoe de hiërarchie in elkaar steekt en zal de tekst lineair zonder enige context gaan (voor)lezen. Met een beetje pech worden er dan hele stukken tekst in verkeerde volgorde gelezen of zelfs overgeslagen. Zonder semantische opmaak is er bovendien vrijwel geen zicht op navigatie. En dus ook niet waar de voor jou belangrijkste informatie staat. 

Bekijk in de video van Digitaal Toegankelijk hoe Charissa met een schermlezer een webpagina laat vorlezen. De tekst van het artikel gaat verder onder de video.

Door het toepassen van semantische opmaak biedt je structuur en context. De inhoud krijgt een voorspelbare volgorde en alle informatie die visueel wordt overgedragen, kan hierdoor óók geïnterpreteerd worden door hulpsoftware. Door gebruik van goede semantische opmaak herkent software dikgedrukte grote tekst als kop. Teksten met inspringingen, nummering of zogeheten bullets worden herkend als lijsten. Een lay-out van rasters met data wordt herkend als tabel en een blok tekst met rand en afwijkende achtergrondkleur wordt herkend als kader. Enzovoorts. Lezers die gebruik maken van een hulptechnologie kunnen de informatie die ze zoeken zo makkelijker vinden. Ook zijn zij beter in staat om zich te kunnen oriënteren in een digitale publicatie of op een pagina. Hulpsoftware maakt gebruik van semantische opmaak om de lezer extra navigatiemogelijkheden te bieden. 

Ook zorgt semantische opmaak ervoor dat de weergave aangepast kan worden zonder informatie te verliezen. Denk bijvoorbeeld aan het vergroten van tekst en (regel)afstanden, de mogelijkheid van inzoomen, en ook het aanpassen van de vormgeving van specifieke elementen (zoals koppen) en van de kleur(weergave).

Betekenis vormgeving vastgelegd in semantische opmaak

Om een semantische opmaak te waarborgen is het dus essentieel om goed gebruik te maken van de beschikbare functionaliteiten in zowel opmaakprogramma's als in HTML. Dit betekent dat je goed nadenkt wanneer je veranderingen in de visuele vormgeving doorvoert en bedenkt waarom je dat doet. Wat is de betekenis achter zo'n verandering? Als je bijvoorbeeld in een teksteditor als MS Word bepaalde tekst vetgedrukt maakt of de kleur wijzigt, bedenk dan goed welk element of welke stijl de betekenis van deze visuele verandering(en) het beste overbrengt. Door het gebruik van stijlen in een teksteditor, zoals koppen en alinea-indelingen, krijgt de inhoud of content een consistente, semantisch verantwoorde opmaak die ook na export naar een PDF behouden blijft.

Hetzelfde geldt voor HTML. Door HTML-elementen zoals koppen, paragrafen en lijsten op een correcte manier te gebruiken, zorgt dit niet alleen voor een juiste visuele weergave, maar het draagt ook bij aan de betekenis en structuur van de inhoud. Bepaalde software, zoals InDesign, maakt het mogelijk om de juiste HTML-elementen toe te wijzen aan stijlen, zodat de semantische structuur behouden blijft bij het exporteren naar formaten zoals HTML of EPUB.

Andere voordelen van semantische opmaak

Naast het aanbrengen van structuur en context heeft het gebruik van semantische opmaak nog meer voordelen. Deze zijn niet specifiek gericht op (digitale) toegankelijkheid, maar minstens zo belangrijk. Door gebruik te maken van semantische opmaak…

• kun je sneller en automatisch een inhoudsopgave maken;
• kun je de content, door alleen een template of CSS aan te passen, eenvoudig op een andere manier vormgeven;
• is het eenvoudiger de content in verschillende formaten (PDF, EPUB, webpagina’s, drukwerk) te publiceren, zonder extra bewerking;
• is de content beter vindbaarheid in zoekmachines (SEO), doordat zoekmachines de structuur en inhoud beter begrijpen, wat kan leiden tot een hogere ranking.

Semantische opmaak toegepast

Naast het toegankelijk maken van (digitale) content, heeft semantische opmaak dus veel voordelen. Het kan zo maar zijn dat je publicaties semantisch al goed in elkaar zitten en op dit onderdeel al toegankelijk zijn. Hoe je specifieke elementen kunt toetsen op toegankelijke semantische opmaak, lees je in deze artikelen:

• Toegankelijke koppen [LINK volgt]
• Toegankelijke lijsten [LINK volgt]
• Toegankelijke Tabellen [LINK volgt]
• Toegankelijke Oriëntatiepunten [LINK volgt]

Met semantische opmaak voldoe je aan een aantal WCAG-criteria. Welke dat zijn lees je in artikel [LINK]WCAG en semantische opmaak[LINK naar betreffende artikel - volgt].