Heading
Community
Koptekst die in de koppenstructuur ingesteld kan worden op het juiste niveau.
Anatomie
Definition of Done
Implementaties
Community Amsterdam
11 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord
Component gebruiken?
Acceptatiecriteria
Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.
Als je implementatie voldoet aan de acceptatiecriteria voor dit component, kun je er vanuit gaan dat je gebruik van dit component voldoet aan WCAG, niveau A en AA, en voor twee succescriteria aan niveau AAA (2.4.13 Focusweergave en 2.5.5 Grootte van het aanwijsgebied uitgebreid).
Toegankelijkheid algemeen
De koptekst maakt duidelijk waar de sectie over gaat
De tekst van de kop beschrijft kort en bondig waar de tekst eronder over gaat, als een soort samenvatting.
Elementen moeten genest zijn volgens de HTML-specificatie
- WCAG
- 4.1.1
Zorg ervoor dat je een heading op de juiste manier nest als je hem wilt gebruiken in combinatie een ander element, zoals een button of een link. Denk erom dat de elementen dan correct worden genest in de HTML. Check je code daarom met een HTML-validator of HTML-linter.
Een voorbeeld is een button met een heading erin:
codevoorbeeld<h2>
<button>button in heading, wel toegestaan</button>
</h2>
<!-- dit niet doen -->
<button>
<h2>heading in button, niet toegestaan</h2>
</button>
Toegankelijkheid visueel ontwerp
De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg
De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:
- 4,5:1 contrast voor normale tekst.
- 3:1 contrast voor grotere letters (vanaf 24 pixels).
- 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).
Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.
NL Design System richtlijnen:
Toegankelijkheid zoom en herschalen
Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar
Als je de tekst vergroot tot 200% (via browserzoom en via de browserinstellingen voor tekstgrootte) blijft de tekst in zijn geheel zichtbaar.
Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
NL Design System richtlijnen:
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar
- WCAG
- 1.4.12 Tekstafstand
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden.
Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
Je moet de afstand kunnen vergroten naar deze waardes:
- Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;
- Afstand tussen alinea's naar ten minste 2 keer de lettergrootte;
- Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
- Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.
Dit is te testen met een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:
<style>
body * {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
body p {
margin-bottom: 2em !important;
}
</style>
NL Design System richtlijnen:
Toegankelijkheid screenreader
Als tekst er uitziet als een kop, moet dit ook in de HTML een kop zijn en geen vet gemaakte tekst
In HTML zijn de juiste elementen voor koppen h1 tot en met h6.
Voor screenreadergebruikers is een goede koppenstructuur een belangrijk navigatiemiddel. Gebruik daarom een heading-element van het juiste niveau met een tekst die de content van de sectie eronder beschrijft. Op die manier ontstaat een duidelijke inhoudsopgave wanneer een gebruiker met hulpsoftware een koppenlijst opvraagt.
Wil je tekst alleen maar vormgeven, bijvoorbeeld groter maken? Gebruik dan CSS in combinatie met bijvoorbeeld een span- of een p-element, geen heading-element.
Sla geen kopniveaus over, dus bijvoorbeeld een h3 na een h1. Screenreadergebruikers kunnen dan het idee krijgen dat ze informatie missen.
Let erop dat je per pagina 1 h1 gebruikt en dat deze aan het begin van de main-content staat. Door niet meer dan 1 h1 te gebruiken, kan een screenreadergebruiker makkelijk naar het begin van de unieke content springen.
NL Design System richtlijnen:
Als de kop in een andere taal is dan de rest van de pagina, dan heeft het lang-attribuut de juiste taalcode
Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.
Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.
Help component verbeteren
We vinden het belangrijk dat de component Heading goed te gebruiken is door iedereen. Help je mee?
- Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
- Draag bij aan de voortang van Heading door te zorgen dat deze aan meer checkpoints van de Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.