Semantische markup

Wat is semantische markup?

Semantische markup betekent dat je HTML-elementen gebruikt die de betekenis van je content beschrijven, niet alleen het uiterlijk. Een <h2> vertelt dat iets een kop is. Een <nav> vertelt dat het een navigatieblok is. Een <button> vertelt dat iets klikbaar is.

In de praktijk gaat het vaak mis. Veel websites gebruiken generieke elementen zoals <div> en <span> voor alles, en voegen dan CSS toe om het er goed uit te laten zien. Visueel maakt dat geen verschil. Maar voor hulpsoftware maakt het alle verschil.

Waarom het ertoe doet

WCAG succescriterium 1.3.1 (Informatie en relaties) vraagt dat informatie en relaties die visueel worden overgebracht, ook programmatisch bepaalbaar zijn. Dat betekent: als je iets visueel duidelijk maakt, door grootte, positie, kleur of lay-out, dan moet diezelfde informatie ook in de code zitten.

De W3C-toelichting zegt het zo:

Informatie en relaties die door opmaak visueel of auditief worden overgebracht, moeten behouden blijven wanneer het presentatieformaat verandert.

Een schermlezer leest geen CSS. Die leest de HTML-structuur. Als een kop geen <h2> is maar een <div class="heading">, dan weet de schermlezer niet dat het een kop is. De gebruiker kan er niet naartoe navigeren en de structuur van je pagina is onzichtbaar.

Programmatisch bepaalbaar: wat betekent dat?

De W3C definieert dit als: door software vast te stellen op basis van data die door de auteur is aangeleverd. Hulpsoftware moet de structuur kunnen uitlezen uit de HTML, zonder te hoeven “kijken” naar het visuele resultaat.

Er zijn twee situaties:

1. De technologie biedt semantische elementen. Gebruik ze. HTML heeft koppen, lijsten, tabellen, landmarks, formulierlabels.
2. De technologie biedt geen semantisch element. Beschrijf de relatie in tekst. Bijvoorbeeld: “Alle verplichte velden zijn gemarkeerd met een asterisk (*).”

De basis: gebruik het juiste element

Gebruik het HTML-element dat het beste beschrijft wat de content is, niet hoe het eruit moet zien.

<div> en <span> zijn niet semantisch. Gebruik ze alleen voor layout of styling, nooit als vervanging voor een semantisch element.

<div class="btn" onclick="submitForm()">Verstuur</div>

<button type="submit">Verstuur</button>

De gevolgen van niet-semantische markup

Als je geen semantische HTML gebruikt, breken er meerdere dingen tegelijk:

• Schermlezers kunnen de structuur niet interpreteren
• Toetsenbordgebruikers kunnen niet navigeren naar interactieve elementen
• Spraakbesturing kan elementen niet herkennen (“klik op Verstuur” werkt alleen als er een herkenbare knop is)
• Zoekmachines begrijpen de structuur minder goed
• Leesmodussen en aangepaste stylesheets verliezen de hierarchie

WCAG-succescriteria

Semantische markup raakt meerdere succescriteria. De belangrijkste:

Verdieping

Elk type semantisch element heeft eigen regels en valkuilen. In de volgende hoofdstukken behandelen we ze apart:

• Paginatitel: het <title>-element en waarom het de eerste indruk bepaalt
• Taal: het lang-attribuut en de impact op uitspraak
• Koppen: hierarchie, niveaus overslaan, en veelgemaakte fouten
• Landmarks: <nav>, <main>, <header>, <footer> en hun ARIA-equivalenten
• Lijsten: <ul>, <ol>, <dl> en wanneer je ze (niet) gebruikt
• Tabellen: wanneer een tabel een tabel is, en wanneer niet
• iFrames: toegankelijke ingebedde content
• Markup-validiteit: waarom valide HTML ertoe doet

Verder lezen

• Wat betekent WCAG 1.3.1?: de achtergrond van dit criterium
• Kopniveaus: wanneer een overgeslagen kopniveau een probleem is
• Tabellen: wanneer een tabel geen tabel is

Quiz