Wat zijn semantische koppen?
Bij semantische koppen is het belangrijk dat de hiërarchie klopt en dat er geen niveaus worden overgeslagen. Na een kop op niveau 1 volgt dus altijd een kop op niveau 2.
Een gedrukt boek zou bijvoorbeeld de volgende koppenstructuur kunnen hebben:
Deel I
Hoofdstuk 1
Hoofdstuk 2
Deel II
Hoofdstuk 1
Paragraaf 1.1
Paragraaf 1.2
Hoofdstuk 2
Hoofdstuk 3
In een digitale publicatie moet deze voorspellende en logische structuur van hiërarchische koppen 'onder water' worden getagd middels koptags.
In de broncode van HTML zou de bovenstaande koppenstructuur er dan zo uitzien:
<!— Start HTML-code: een goed opgebouwde koppenstructuur -->
<h1>Deel I</h1>
<h2>Hoofdstuk 1</h2>
<h2>Hoofdstuk 2</h2>
<h1>Deel II</h1>
<h2>Hoofdstuk 1</h2>
<h3>Paragraaf 1.1</h3>
<h3>Paragraaf 1.2</h3>
<h2>Hoofdstuk 2</h2>
<h2>Hoofdstuk 3</h2>
<!—Einde HTML-code -->
Wat er in publicaties nog wel eens misgaat is dat bepaalde (losse) kaders een ‘vaste’ kop toegewezen krijgen, bijvoorbeeld niveau 3 of <h3>, puur omdat de vormgeving van die kop past bij de betreffende kaders. Door deze keuze te maken is de kans aanwezig dat er een niveau wordt overgeslagen. Of dat het kader onterecht onder een hoger liggende kop komt te vallen. De hiërarchie wordt dan niet op de juiste wijze toegepast, waardoor de software (bijvoorbeeld een schermlezer) deze verkeerd interpreteert en de lezer vervolgens onjuiste informatie aanbiedt.
De WCAG (Web Content Accessibility Guidelines) bieden enkele criteria en richtlijnen WCAG en semantische opmaak voor het toegankelijk maken van content, waaronder ook het creëren van structuur en logica door het gebruik van koppen.
Toegankelijke koppen in een teksteditor
Gebruik je een teksteditor als MS Word of een WYSIWYG-editor voor je website dan kun je semantische koppen toepassen door gebruik te maken van de ingebouwde stijlopties voor o.a. koppen.
Kies de koppen dus niet op basis van vormgeving, maar op basis van hiërarchie zoals hierboven beschreven. De vormgeving van de koppen is achteraf altijd nog aan te passen via stijlen. Op deze manier krijgt iedere kop direct de aangepaste vormgeving, zonder dat je deze individueel hoeft na te lopen.
Doorgaans blijft de koppenstructuur en hiërarchie intact bij exports naar andere formaten zoals EPUB of PDF. In opmaakprogramma’s, zoals InDesign kun je specifiek invoeren naar welk kopniveau of HTML-element je een stijl wilt exporteren.
Toegankelijke koppen in HTML
In HTML-code gebruik je heading-elementen om structuur te geven aan de inhoud. Ook hier pas je een hiërarchische volgorde toe, waarbij de <h1> tag de hoogste en belangrijkste kop is, meestal gebruikt voor titel van een pagina of hoofdstuk. Daarna volgen <h2> tot en met <h6>, die steeds een lager niveau aangeven. <h2> wordt gebruikt voor hoofdsecties, <h3> voor subsecties binnen een <h2>, enzovoort. In HTML (EPUB) kun je maximaal tot 6 niveaus diep gaan.
<!— Start HTML-code: een goed voorbeeld van een opgebouwde koppenstructuur -->
<h1>Hoofdtitel van het document</h1>
<h2>Subtitel 1 </h2>
<h3>Subtitel 1.1</h3>
<p>Inhoud van 1.1</p>
<h2>Subtitel 2</h2>
<h3>Subtitel 2.1</h3>
<p>Inhoud van 2.1</p>
<!—Einde HTML-code -->
Een kop is altijd bedoeld om een specifiek thema of onderwerp in te leiden. Het is dan ook belangrijk dat ieder kopelement slechts één kop vertegenwoordigt. Splits een kop dus niet op in meerdere tags, puur voor visuele opmaak, zoals in het volgende voorbeeld:
<!—Start HTML-code: vermijd dit: -->
<h1>Let op:</h1><h2>Er verandert hier iets!</h2>
<!—Einde HTML-code -->
Om content te verfraaien wordt soms gebruik gemaakt van niet semantisch opgemaakte 'koppen', maar probeer ook dit te voorkomen. Een kop zoals hieronder, draagt niet bij aan de structuur van de inhoud en dus zeker ook niet aan de toegankelijkheid van het product. Vermijd dus ook het volgende:
<!—Start HTML-code: vermijd dit: -->
<span style="font-size: 32px; margin: 21px 0;">Dit is de hoofdtitel</span>
<!—Einde HTML-code -->
Hoe toets ik of de koppen van mijn document toegankelijk zijn
Veel tools die toetsen op toegankelijkheid hebben een functie die de structuur van de content of een publicatie weergeeft. Dit is bijvoorbeeld mogelijk met toegankelijkheidschecker voor EPUB Ace by DAISY. Met deze functie kun je de koppenstructuur van een publicatie inzien. Voor webcontent zijn er verschillende browserextensies beschikbaar waarmee je de koppenstructuur inzichtelijk maakt. Bijvoorbeeld WAVE van WebAIM. Het kan ook helpen om geautomatiseerd een inhoudsopgave of bookmarks aan te maken en te onderzoeken of alle koppen hier juist in voorkomen. Ook kun je handmatig door de code lopen. Is de structuur van het document duidelijk en logisch? Worden de tags op de juiste manier gebruikt?
Als je zelf kundig bent in het gebruiken van een schermlezer, bijvoorbeeld NVDA (Windows) of VoiceOver (macOS/iOS), kun je deze ook gebruiken om te testen. Controleer of de schermlezer de koppen correct benoemt.
Welke methode je ook gebruikt, je zal altijd handmatig (visueel) moeten nakijken of alle koppen terugkomen en of de hiërarchie hiervan klopt.
Waarom en voor wie is het belangrijk?
Vooral in informatieve teksten spelen koppen een grote rol. Ze bieden structuur voor iedere lezer. Ze helpen oriënteren en ze helpen in het overzien waar de tekst over gaat. Bovendien kun je met goede koppen sneller relevante tekst (terug) vinden. Op het moment dat je moeite hebt met lezen, geven de koppen extra ondersteuning.
Als je de koppen niet visueel kunt waarnemen, dan is het belangrijk dat de koppen semantisch zijn opgemaakt. Dan kun je met hulpsoftware gebruik maken van dezelfde voordelen als iemand die de koppen wel ziet. Bovendien kun je ze dan gebruiken om door een pagina te navigeren.
Verder lezen over semantische opmaak
Lees meer over het belang van semantische opmaak in het artikel Wat is semantische opmaak en waarom toepassen. Met semantische opmaak voldoe je aan een aantal WCAG-criteria. Welke dat zijn lees je in artikel WCAG en semantische opmaak. Hoe je specifieke elementen kunt toetsen op toegankelijke semantische opmaak, lees je in deze artikelen:
