Wat is het verschil tussen semantiek en…

Semantiek helpt machines (browsers, parsers, zoekrobots) de structuur en betekenis van de inhoud te begrijpen. Toegankelijkheid (a11y) is gericht op het begrijpelijk en bruikbaar maken van inhoud voor mensen met verschillende fysieke of cognitieve beperkingen die gebruik maken van ondersteunende technologieën.

Semantische tags

Het gebruik van semantische HTML-tags zoals <article>, <nav>, <aside>, <footer>, <h1>-<h6>, geeft de elementen op de pagina een betekenis. Bijvoorbeeld:

<article>
  <h2>Artikel titel</h2>
  <p>Artikeltekst...</p>
</article>

Dit helpt browsers om de structuur van het document correct te interpreteren.

Toegankelijkheid (a11y)

Toegankelijkheid omvat vele aspecten:

Semantiek: Correct gebruik van semantische tags maakt al deel uit van toegankelijkheid, omdat het ondersteunende technologieën (schermlezers) helpt de structuur en functie van de elementen te begrijpen.
ARIA-attributen: Extra attributen zoals aria-label, aria-describedby, aria-hidden, role, bieden aanvullende informatie voor ondersteunende technologieën wanneer HTML-semantic niet voldoende is.
```
<button aria-label="Sluit dialoogvenster">
  <img src="close.svg" alt="">
</button>
```
Contrast: Voldoende contrast tussen tekst en achtergrond voor mensen met een visuele beperking.
Toetsenbordnavigatie: Mogelijkheid om door de pagina te navigeren en te interageren met elementen met alleen het toetsenbord.
Alternatieve tekst voor afbeeldingen (alt): Beschrijving van de inhoud van de afbeelding voor gebruikers die deze niet kunnen zien.
```
<img src="cat.jpg" alt="Zwarte kat slaapt op het vensterbankje.">
```
Structuur van koppen: Logische hiërarchie van koppen (<h1> - <h6>) voor gemakkelijke navigatie met schermlezers.

Relatie

Semantiek vormt een belangrijke basis voor toegankelijkheid. Een goed gestructureerde pagina met semantische elementen is veel gemakkelijker toegankelijk te maken. Echter, semantiek alleen is niet voldoende voor volledige toegankelijkheid – vaak zijn aanvullende maatregelen nodig, zoals ARIA-attributen, focusbeheer en het garanderen van voldoende contrast.

Wat is het verschil tussen semantiek en toegankelijkheid (a11y)?