Succescriteria bij componenten Heading 1 t/m 6

[MarjonBakker]

Gerelateerd #1375

Verzamelen WCAG-criteria en schrijven van acceptatiecriteria

• h1
• h2
• h3
• h4
• h5
• h6

---

1.3.1 Info en relaties

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 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 onstaat 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:

• Gebruik betekenisvolle opmaak voor tekst, Kopjes
• Gebruik ruimte om relaties te creëren tussen elementen, Relaties binnen typografie

1.4.3 Contrast (minimum)

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:

• Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond
• Geef tekst voldoende kleurcontrast

1.4.4 Herschalen van tekst

Als je de tekst vergroot tot 200% (via browserzoom en via de browserinstellingen voor tekstgrootte) blijft de tekst in zijn geheel zichtbaar.

NL Design System richtlijnen:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn

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 de button 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:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn
• Zorg voor een comfortabele regelafstand

2.4.6 Koppen en labels

De tekst van de kop beschrijft kort en bondig waar de tekst eronder over gaat, als een soort samenvatting.

3.1.2 Taal van onderdelen

Als een koptekst 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 een Engelstalig kopje boven een Engels stukje tekst op een Nederlandstalige pagina, waar wordt uitgelegd waar meer Engelstalige informatie is te vinden.

4.1.1 Naam, rol, waarde

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:

<h2>
    <button>button in heading, wel toegestaan</button>
</h2>

<!-- dit niet doen -->
<button>
    <h2>heading in button, niet toegestaan</h2>
</button>