Campus Design System

Appearance

2.4.6 Koppen en labels niveau A ​

Uitleg ​

Het WCAG-criterium 2.4.6 Koppen en labels vereist dat koppen en labels gebruikt worden om de structuur en het doel van de inhoud duidelijk te maken. Dit is belangrijk voor de toegankelijkheid van webpagina's, vooral voor gebruikers die schermlezers gebruiken of toetsenbordnavigatie toepassen. Het doel is om de inhoud van een pagina logisch te structureren, zodat gebruikers snel kunnen begrijpen waar ze zich bevinden en hoe ze efficiënt kunnen navigeren.

Koppen en labels fungeren als signposts die de gebruiker helpen om de inhoud van een pagina te begrijpen, zowel visueel als via assistieve technologieën. Koppen moeten hiërarchisch worden gebruikt (H1, H2, H3, etc.) en labels moeten duidelijk aangeven wat de gebruiker van een formulier of invoerveld kan verwachten.

Wat betekent dit in de praktijk? ​

Wanneer een gebruiker een pagina bezoekt, moet het voor hen duidelijk zijn waar de verschillende secties beginnen en wat hun inhoud is. Dit wordt vaak bereikt door het gebruik van koppen, subkoppen en goed geplaatste labels voor formulieren.

Voor een gebruiker die een schermlezer gebruikt, is het belangrijk dat de koppen en labels op een consistente manier worden gestructureerd, zodat de gebruiker door de pagina kan navigeren zonder steeds de context te verliezen.

Oplossing voor dit probleem ​

  • Gebruik van koppen: Gebruik de juiste HTML-koppen (<h1>, <h2>, <h3>, enz.) om de hiërarchie van de inhoud aan te geven. De koppen moeten in een logische volgorde worden gebruikt, zonder springen van bijvoorbeeld <h1> naar <h3>.
html
<h1>Welkom op onze website</h1>
<h2>Onze Diensten</h2>
<h3>Webdesign</h3>
<h3>Consultancy</h3>

In dit voorbeeld zie je dat de koppen de structuur van de pagina duidelijk weergeven, van de hoofdtitel (H1) naar subsecties (H2 en H3).

  • Gebruik van labels voor formulieren: Zorg ervoor dat elk invoerveld in een formulier een label heeft dat beschrijft wat er van de gebruiker wordt verwacht.
html
<form>
  <label for="name">Naam:</label>
  <input type="text" id="name" name="name" />

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" />

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

In dit voorbeeld hebben de invoervelden voor naam en e-mail duidelijke labels, zodat gebruikers (zowel visueel als met behulp van een schermlezer) precies weten wat er verwacht wordt.

Voorbeeld van het probleem ​

Een veelvoorkomend probleem is dat koppen niet in een logische volgorde worden gebruikt of helemaal ontbreken, waardoor het voor gebruikers moeilijk is om te begrijpen hoe de inhoud is gestructureerd.

html
<h3>Onze Diensten</h3>
<h1>Welkom op onze website</h1>
<h2>Webdesign</h2>
<h2>Consultancy</h2>

In dit voorbeeld staat de hoofdtitel (<h1>) onder de subkoppen (<h3> en <h2>), wat verwarrend is voor zowel gebruikers als schermlezers. De hiërarchie van de koppen moet logisch zijn, van de hoofdtitel naar de subsecties en subonderdelen.

Oplossing voor dit probleem ​

Zorg ervoor dat de koppen in de juiste volgorde worden gebruikt, bijvoorbeeld:

html
<h1>Welkom op onze website</h1>
<h2>Onze Diensten</h2>
<h3>Webdesign</h3>
<h3>Consultancy</h3>

In dit geval is de structuur logisch, en een gebruiker die een schermlezer gebruikt kan gemakkelijk door de inhoud navigeren.

Belangrijke overwegingen ​

  • Logische volgorde van koppen: Zorg ervoor dat de koppen van boven naar beneden een duidelijke structuur volgen. Gebruik geen <h3> zonder eerst een <h2> te gebruiken.
  • Beschrijvende labels: Alle formulierinvoervelden moeten duidelijke en beschrijvende labels hebben die aangeven welke informatie van de gebruiker wordt verwacht.
  • Consistentie: Houd de structuur van de koppen consistent op de gehele website. Dit helpt gebruikers om zich snel aan te passen en effectief te navigeren.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Deze tool helpt bij het controleren of koppen correct worden gebruikt en of de pagina goed gestructureerd is. WAVE Tool.
  • aXe Accessibility Tool: Dit is een andere handige tool om te controleren of koppen en labels correct zijn toegepast. aXe Tool.

Referenties ​