Semantische HTML

Semantische HTML is HTML waarbij elk element wordt gekozen op basis van zijn betekenis, niet alleen zijn uiterlijk. Een <button> is bedoeld voor acties. Een <nav> omhult navigatie. Een <table> bevat tabellarische gegevens. Een <div> gebruiken die eruitziet als een knop voor een actie is een semantische fout — ook al is het visuele resultaat identiek.

De overgrote meerderheid van toegankelijkheidsfouten is terug te voeren op verlaten semantiek. Bijna elk hulptechnologie-probleem heeft dezelfde oorzaak: een generiek element dat de taak uitvoert waarvoor een semantisch element is ontworpen.

Waarom schermlezers dit belangrijk vinden

Schermlezers stellen HTML aan de gebruiker voor via hun toegankelijkheidsstructuur — een interne representatie opgebouwd vanuit de DOM die elk element koppelt aan een rol, naam, toestand en eigenschappen. De toegankelijkheidsstructuur is wat de gebruiker daadwerkelijk hoort.

Een native <button> verschijnt in de toegankelijkheidsstructuur als button "Verzenden". Een <div> die eruitziet als een knop, verschijnt als generic — wat betekent dat de schermlezer niets nuttigs aankondigt en de gebruiker geen manier heeft om te ontdekken dat de div interactief is.

Dezelfde logica geldt voor:

• Koppen (<h1>–<h6>) — schermlezers laten gebruikers tussen koppen springen om een pagina door te bladeren. <div class="heading"> verschijnt niet in de kopenlijst.
• Lijsten (<ul>, <ol>, <li>) — schermlezers kondigen „lijst, 5 items“ aan voor het voorlezen. <div>s die lijstitems nadoen, niet.
• Formulieren — <input> met een gekoppeld <label> leest „E-mail, tekstvak.“ Een aangepast invoerveld van divs en contenteditable leest niets.
• Tabellen — <table> met <th>-rij/kolomkoppen laat gebruikers cel voor cel door datatabellen navigeren met aangekondigde koopcontext. CSS-grids van divs niet.

Het vervangingspatroon

De oplossing heeft bijna altijd dezelfde vorm:

• <div onclick="..."> → <button> (of <a href> voor navigatie).
• <span class="link"> → <a href>.
• <div role="heading"> → <h1> t/m <h6>.
• Aangepaste dropdowns → <select> waar het ontwerp dat toelaat, of een getest ARIA-comboboxpatroon waar dat niet het geval is.
• Tabs opgebouwd uit gestylede <div>s → tabpatroon uit de ARIA Authoring Practices Guide.

Wanneer ARIA te gebruiken

De eerste regel van ARIA is: gebruik geen ARIA als een native element de taak kan uitvoeren. ARIA-rollen, -toestanden en -eigenschappen zijn een patch voor gevallen waarin native HTML het widget dat men bouwt niet kan beschrijven (boomstructuren, meervoudige comboboxen, bepaalde modale patronen). Ze zijn geen vervanging voor het gebruik van <button>.

Een pragmatische audit

De snelste manier om semantisch verval in een codebase te detecteren: zoek op onclick bij div en span. Elke overeenkomst is een potentiële fout. De op een na snelste: zoek op role=-attributen. ARIA is prima in beperkte contexten, maar intensief ARIA-gebruik signaleert vaak dat native elementen werden overgeslagen om stylingreden die dat eigenlijk niet vereisten.