Succescriterium 2.4.6 Koppen en labels

Niveau AA

Lees de officiële tekst van succescriterium 2.4.6 Koppen en labels

• De koppenstructuur

  Anders dan op een website mag een PDF meerdere H1-koppen hebben: één per hoofdstuk. Alles wat in Word met de stijl Titel of Kop 1 is opgemaakt krijgt die tag.

  De koppen vormen samen een boomstructuur, en die is het best af te lezen aan de inhoudsopgave. De vetgedrukte hoofdregels zijn H1, de regels met één inspringing H2, en zo verder.

  Twee dingen om na te lopen:

  • Sla geen niveau over. Van H1 naar H3 mag niet. Wie van kop naar kop springt, mist dan een niveau en denkt dat er iets ontbreekt.
  • Zoek tekst die eruitziet als een kop maar het niet is. Tekst die in Word alleen vet en groot is gemaakt komt als P-tag door. Dubbelklik op de P-tag en hernoem hem naar het juiste kopniveau.

  De titel op het voorblad is geen kop. Die exporteert als H1 en hoort een P te worden. Zie het artikel over het voorblad.

  Thema’s

  PDF

  Doelgroepen

  Auditeur Documentmaker

  Wie het raakt

  Je bent blind Je ziet slecht

  Hulpmiddelen

  Schermlezer Voorleessoftware

  Open dit onderwerp op een eigen pagina

• Koppen die het onderwerp noemen

  Koppen moeten het onderwerp of doel van de onderliggende tekst beschrijven. Koppen helpen mensen om snel te begrijpen waar een webpagina of document over gaat. Gebruik daarom verschillende kopniveaus om de content goed te structuren.

  Zorg dat elke kop iets zegt over de tekst die eronder staat, zodat de koppen de onderliggende content goed beschrijven. Dit helpt iedereen om een tekst beter te begrijpen, en alle koppen samen horen een goed beeld te geven van de hele content. Een kop moet dus ook altijd content hebben.

  Mensen die gebruik maken van een schermlezer kunnen een lijst van alle koppen gebruiken om over de webpagina te navigeren.

  Thema’s

  Tekst

  Doelgroepen

  Auditeur Documentmaker Redacteur

  Wie het raakt

  Je leest moeilijk Nederlands

  Open dit onderwerp op een eigen pagina

• Labels en instructies

  Zorg voor labels bij invoervelden

  Labels zijn het belangrijkste element voor een toegankelijk formulier. Zorg voor labels bij alle invoervelden of ander formulierelementen zoals selectievakjes, keuzerondjes en keuzelijsten. Een duidelijk label beschrijft precies wat er in het veld ingevuld moet worden, is zichtbaar voor alle bezoekers en staat dichtbij het invoerveld.

  Het label moet in de code worden gekoppeld aan het invoerveld. Zo maak je het invoerveld ook toegankelijk voor bezoekers die gebruik maken van hulptechnologieën. Het label is de naam van het invoerveld. Een label vergroot ook het klikbare gebied waarmee een invoerveld kan worden geselecteerd. Dit is handig voor bijvoorbeeld bezoekers met een motorische beperking.

  Koppel labels in de code aan een invoerveld

  Labels worden geplaatst met het <​label​>-element. Het koppelen van een <​label​>-element aan een formulierelement gebeurt met een for/id-koppeling. Geef hiervoor het <​label​>-element een for-attribuut en het bijbehorende formulierelement een id-attribuut met dezelfde waarde.

  In de code ziet dat er zo uit:

  <label for="veld1">Naam:</label>
  <input type="text" id="veld1">
  
  <label for="veld2">Kies je kleur:</label>
  <select id="veld2">
    <option value="0">Rood</option>
    <option value="1">Groen</option>
    <option value="2">Blauw</option>
  </select>
  
  <input type="checkbox" id="veld3">
  <label for="veld3">Meld mij aan voor de nieuwsbrief</label>

  Er zijn ook manieren om de labels visueel te verbergen. Vraag je dan wel goed af waarom je dat zou willen doen. Het invoerveld verliest dan het grotere klikbare gebied en het wordt misschien minder duidelijk voor bezoekers. Als het label toch visueel wordt verborgen, zorg er dan er wel voor dat er een label beschikbaar is voor hulptechnologieën. Gebruik hiervoor het attribuut aria-label, aria-labelledby of een title-attribuut. Deze zijn niet zichtbaar.

  In de code ziet dat er zo uit:

  <input type="text" aria-label="Naam">

  Let op: Placeholdertekst mag niet als enige manier worden gebruikt om een label toe te voegen aan een invoerveld.

  Groepeer meerdere secties van gerelateerde invoervelden

  Als een formulier meerdere secties van gerelateerde invoervelden heeft dan wordt een <​fieldset​>-element gebruikt om deze te groeperen. Geef het <​fieldset​>-element een label door een <​legend​>-element in het <​fieldset​>-element te plaatsen. Hulptechnologieën gebruiken het <​legend​>-element alsof het een onderdeel is van het label van de elementen in het <​fieldset​>-element.

  Het <​fieldset​>-element is vooral relevant voor het groeperen selectierondjes en keuzevakjes maar kan ook worden gebruikt om andere invoervelden te groeperen.

  In de code ziet dat er zo uit:

  <fieldset>
    <legend>Ben jij al orgaandonor?</legend>
  
    <input type="radio" id="veld1">
    <label for="veld1" value="ja">Ja, ik ben orgaandonor</label>
  
    <input type="radio" id="veld2">
    <label for="veld2" value="nee">Nee, ik ben geen orgaandonor</label>
  </fieldset>

  Zorg voor instructies bij invoervelden

  Instructies geven een extra hint voor de invoer in het invoerveld. De instructies in een formulier moeten aangeven of er verplichte velden zijn en eventueel of er een verplicht invoerformaat is.

  Geef aan dat een invoerveld verplicht is

  Het aangeven van een verplicht invoerveld kan in tekst of bijvoorbeeld met een asteriks (*). Zorg dat deze aanduiding in het <​label​>-element is geplaatst.

  In de code ziet dat er zo uit:

  <label for="veld1">Naam: (verplicht)</label>
  <input type="text" id="veld1">

  Als de instructies niet duidelijk per invoerveld worden benoemd dan hoort voorafgaand aan het eerste invoerveld in tekst worden aangegeven op welke manier de verplichte velden zijn aangeduid.

  In de code ziet dat er zo uit:

  <p>Alle velden met een * zijn verplicht.</p>
  
  <label for="veld1">Naam: *</label>
  <input type="text" id="veld1">
  
  <label for="veld2">Favoriete dier: *</label>
  <input type="text" id="veld2">

  Markeer verplichte velden ook in de code. Gebruik hiervoor bij voorkeur het aria-required-attribuut.

  <p>Alle velden met een * zijn verplicht.</p>
  
  <label for="veld1">Naam: *</label>
  <input type="text" id="veld1" aria-required="true">
  
  <fieldset>
    <legend>Ben jij al orgaandonor? *</legend>
  
    <input type="radio" id="veld2" value="ja" aria-required="true">
    <label for="veld2">Ja, ik ben orgaandonor</label>
  
    <input type="radio" id="veld3" value="nee" aria-required="true">
    <label for="veld3">Nee, ik ben geen orgaandonor</label>
  </fieldset>

  Geef het aan als er een verplicht invoerformaat is verplicht is

  Ook bij verplichte invoerformaten, zoals een postcode of een e-mailadres die moet worden ingevuld, moeten blijken uit de instructies wat de eisen zijn aan de invoer. Dit kan direct in het <​label​>-element.

  In de code ziet dat er zo uit:

  <label for="veld1">Geboortedatum (dd-mm-jjjj):</label>
  <input type="text" id="veld1">

  Maar dit kan ook via het attribuut aria-describedby.

  In de code ziet dat er zo uit:

  <label for="veld1">Geboortedatum:</label>
  <input type="text" id="veld1" aria-describedby="beschrijving">
  <span id="beschrijving">dd-mm-jjjj</span>

  Thema’s

  Formulieren

  Doelgroepen

  Auditeur Ontwikkelaar Redacteur Vormgever

  Wie het raakt

  Je leest moeilijk Nederlands

  Open dit onderwerp op een eigen pagina