Semantische opmaak in de praktijk

Toepassen van stijlen en code

Zonder (visuele) beperking is het soms al een uitdaging om bepaalde informatie te vinden of lezen. Maar we ‘kijken’ letterlijk even rond en vinden dan meestal toch wel de juiste knop of content die we nodig hebben. Stel je je nu voor dat je geen of nauwelijks zicht hebt en deels afhankelijk bent van bijvoorbeeld een schermlezer. Deze schermlezer ‘leest’ content aan de hand van de structuur en logica die ‘achter de schermen’ is toegepast. Ontbreekt die structuur, dan is de kans aanwezig dat bepaalde essentiële informatie over de content overgeslagen wordt. Door niet alleen te focussen op visuele presentatie, helpt semantische opmaak om relaties te leggen en structuren te begrijpen.

Het toepassen van semantische opmaak is niet ingewikkeld. Als je op een juiste manier gebruik maakt van de functionaliteiten binnen een opmaakprogramma en je programmeert of codeert volgens de standaard (bv. de Web Standards van W3C), dan pas je semantische opmaak eigenlijk al goed toe. Gebruik opmaakprogramma’s en programmeertalen dus zoals ontwikkelaars deze bedoeld hebben. Een paar simpele voorbeelden zijn:

  • Het gebruik van stijlen in MS Word om koppen toe te voegen aan een document.
  • In InDesign de mogelijkheid gebruiken om bij de export naar EPUB HTML-elementen te koppelen aan stijlen.  
  • Gebruik HTML-elementen waar ze voor bedoeld zijn, dus transformeer elementen functioneel en visueel niet om naar elementen met een andere rol met behulp van CSS en scripting.    

Stijlen, tags, labels en rollen

Bij het gebruik van semantische opmaak is het belangrijk dat je altijd de meest passende tag, rol of stijl voor de inhoud markeert. In teksteditors als MS Word kun je gebruik maken van stijlen, zoals koppen en alinea-indeling. Je kiest zelf welk element of welke stijl de betekenis van een visuele verandering het beste weergeeft. Bij het gebruik van HTML is dat eigenlijk net zo. In dit artikel ligt de focus vooral op het gebruik van HTML.

Betekenis van de inhoud

Voor wat betreft opmaak en styling worden vaak de HTML-tags <div> en <span> gebruikt. Deze tags zeggen echter niets over de betekenis van de inhoud, dus een schermlezer zal daar gewoon overheen lezen. Om dit te voorkomen, en daarmee digitale content zo toegankelijk mogelijk te maken, is het belangrijk om zoveel mogelijk semantische tags toe te passen. In die tags wordt de functionaliteit al duidelijk aangegeven. Gebruik bijvoorbeeld de <nav> tag voor een menu. Door het gebruik van koppen, zoals <h1>, <h2> en <h3>, breng je structuur en logica aan, waardoor de inhoud begrijpelijker wordt voor de lezer, maar ook eventuele hulptechnologieën. Door juist gebruik van semantische opmaak ontsluit je bovendien diverse, in hulpsoftware ingebouwde, navigatie- en zoekmogelijkheden.

Direct aan de slag

Wil je meer weten over het belang van semantische opmaak? Lees dan het artikel Wat is semantische opmaak en waarom toepassen. Wil je direct aan de slag? Met de volgende artikelen zet je de eerste stappen in toegankelijke semantische opmaak:

Met semantische opmaak voldoe je aan een aantal WCAG-criteria. Welke dat zijn lees je in artikel WCAG en semantische opmaak

Onze experts helpen je verder met toegankelijk publiceren

Bewustwording toegankelijk publiceren
In deze bewustwordingssessie leren medewerkers van uitgeverijen waarom digitale toegankelijkheid essentieel is, voor wie het bedoeld is en hoe mensen met verschillende leesbeperkingen toegang krijgen tot content. Zet de eerste stap met deze introductie in brontoegankelijk publiceren. Kom verder!
Trainingen Toegankelijk Publiceren
De experts van Dedicon delen graag hun kennis over het toegankelijk maken van tekst en beeld. Zo geven we workshops, webinars en trainingen. Over de toepassing van onze producten en diensten, maar ook hoe je zelf ervoor kunt zorgen dat teksten en beelden toegankelijk worden voor mensen met een beperking. Op maat, praktijkgericht en direct toepasbaar.
Advies op maat
Dedicon ondersteunt uitgevers met maatwerk in toegankelijk publiceren. Of dat nu gaat om een verdiepende training, een werksessie in huis, co-creatie of advies op maat. Geen vraag is ons vreemd! Kom verder!
Abonneer je op onze nieuwsbrief (nieuw venster)