De juiste HTML-opmaak gebruiken

Wat betekent dat?

Semantische HTML-opmaak gebruiken betekent de juiste HTML-tags kiezen voor de juiste inhoud, zonder alles te vervangen door algemene div- of span-tags die geen semantische betekenis hebben.

Kortom, je moet HTML-semantiek respecteren, d.w.z. de echte rol en betekenis van elk element op je pagina beschrijven, en niet alleen het visuele uiterlijk.

Terug naar de basisinformatie

Waarom?

Goede native markup is de hoeksteen van toegankelijkheid en biedt veel voordelen. Hierdoor kunnen hulptechnologieën (schermlezers, spraakbrowsers, enz.) de inhoud en de structuur ervan begrijpen.

Een schermlezer weet dat een h1 een hoofdtitel is en een ul een lijst, wat cruciaal is voor navigatie. Het helpt gebruikers om sneller en efficiënter te navigeren, vooral wanneer ze van titel naar titel, van tabel naar tabel of van veld naar veld in een formulier gaan.

Het is een beetje zoals de juiste verkeersborden op de weg zetten: is het makkelijker voor iedereen om zich te oriënteren.

Het bespaart je ook veel onnodige code: HTML biedt al native en toegankelijk gedrag (zoals toetsenbordfocus op een knop) dat je niet opnieuw hoeft te maken in JavaScript.

Bovendien wordt goed gestructureerde inhoud met semantische tags (titels, lijsten, enz.) beter begrepen door zoekmachines, wat de natuurlijke verwijzingen naar je pagina verbetert.

Hoe pak ik het aan?

Voor effectieve semantische HTML-markup kun je beginnen met het toepassen van deze basisprincipes:

Declareert de hoofdtaal (lang-attribuut) : Voeg het lang-attribuut toe aan de html-tag om de hoofdtaal van je inhoud op te geven (bijv. html lang="fr"). Dit is cruciaal voor de juiste uitspraak van teksten door schermlezers. Als je een CMS gebruikt, kun je de taal ook beheren in de Algemene instellingen.
Geef je titels de juiste prioriteit: Gebruik "h1" voor de hoofdtitel van de pagina, "h2" voor ondertitels, enzovoort. Respecteer altijd de logische leesvolgorde en sla nooit titelniveaus over (ga bijvoorbeeld niet zonder reden van een "h1" naar een "h4"). Screenreaders kondigen deze titels automatisch aan, waardoor een snelle, gestructureerde navigatie mogelijk wordt.
Gebruikt HTML5 semantische tags voor de : Structureer de hoofdgebieden van je pagina met "header", "nav", "main, section", "article", "aside" en "footer". Deze tags, ook wel "herkenningspunten" genoemd, helpen ondersteunende technologieën om snel belangrijke inhoudsblokken te identificeren en snelle navigatie per zone mogelijk te maken.
Kies de juiste tag voor elke functie (knop, a, invoer, enz.): Gebruik voor een actieknop bijvoorbeeld altijd knop. Een knop heeft al native toetsenbordgedrag (focus, activering met spatie of enter) en wordt door schermlezers automatisch als knop aangekondigd, in tegenstelling tot een gestileerde
waarvoor JavaScript en complexe ARIA-attributen nodig zijn om dit gedrag te reproduceren.
Gebruikt eigen HTML-attributen (vereist, type, enz.) : Maak maximaal gebruik van de attributen die door HTML worden geleverd. Ze voegen semantiek en gedrag toe zonder complexe JavaScript te vereisen. ARIA-attributen (aria-*) zijn er om native HTML aan te vullen in complexe gevallen waarin de semantiek niet op een andere manier kan worden uitgedrukt, maar geen correcte en semantische HTML-markup vervangen. Onthoud: als je het in HTML kunt doen, doe het dan in HTML.
Behoudt de leesbaarheid, zelfs zonder CSS of JS : Een goed gemarkeerde site in native HTML moet functioneel en begrijpelijk blijven, zelfs als de stijlen (CSS) of scripts (JavaScript) niet geladen worden. Dit is essentieel voor mensen die technische hulpmiddelen gebruiken of laadproblemen hebben.

Tips

N°1.

Maak er een gewoonte van om je HTML-code te valideren met een tool.

N°2.

Gebruik browserextensies om de boomstructuur van je titels ("h1" tot "h6") te bekijken. Dit helpt je ervoor te zorgen dat er geen sprongen in niveau of onlogische volgorde zijn die de navigatie voor schermlezers zouden kunnen verstoren.

N°3.

Navigeer door je pagina met alleen het toetsenbord (Tab, Enter, Spatie, enz.). Zorg ervoor dat alle interactieve elementen bereikt en geactiveerd kunnen worden en dat de volgorde van de tabbladen logisch is. Deze eenvoudige test brengt snel semantische problemen aan het licht voor knoppen, koppelingen en formulieren.

N°4.

Gebruik ARIA-attributen alleen als dat nodig is: Onthoud dat schermlezers automatisch titels, links, tabellen, lijsten, enz. aankondigen als de HTML-opmaak correct is. Je hoeft dus in de meeste gevallen geen ARIA-attributen toe te voegen als de oorspronkelijke opmaak voldoende is. ARIA is een aanvulling, geen vervanging.

N°5.

Gebruik de tag om belangrijke woorden of zinnen te markeren. geeft het semantische belang aan, terwijl puur visueel is (vetgedrukt).

Hulpmiddelen

Validator : Hulpmiddel voor het controleren van HTML-code

Toegankelijke webhelper : Een uitbreiding voor het globaal controleren van structuurfouten

Hoe gebruik ik ARIA-attributen op de juiste manier? (Engels)

Het referentiedocument over HTML-elementen

Een complete gids voor het begrijpen van ARIA-attributen

Tips

N°1.

Maak er een gewoonte van om je HTML-code te valideren met een tool.

N°2.

N°3.

N°4.

N°5.

Gebruik de tag om belangrijke woorden of zinnen te markeren. geeft het semantische belang aan, terwijl puur visueel is (vetgedrukt).