Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 4.1.1 Parsen

Vervallen

Let op: De werkgroep die WCAG maakt heeft 4.1.1 de afgelopen jaren besproken en vastgesteld dat dit criterium tegenwoordig niet meer relevant is, omdat browsers en hulptechnologieën intussen zijn verbeterd (zie de WCAG FAQ). Het criterium is misschien in jouw situatie niet meer van toepassing. In WCAG-versie 2.2 is het helemaal verwijderd. In versie 2.1 is een opmerking toegevoegd dat content in HTML of XML automatisch aan het criterium voldoet. Zie ook: Wat is verplicht?.

Uitleg

De 'markup' van pagina's, denk aan bijvoorbeeld HTML-code, moet voldoen aan bepaalde technische voorwaarden. Zo wordt de samenwerking tussen webpagina's, browsers en hulptechnologieën minder foutgevoelig.

Er zijn 4 voorwaarden gedefinieerd.

1. Elementen zijn volgens hun specificaties afgesloten

Denk hier bijvoorbeeld aan headings, divs, spans en andere elementen die een sluittag vereisen. Een <div> moet afsluiten met een </div>.

2. Elementen zijn genest volgens hun specificaties

Verkeerd nesten van elementen kan voorkomen bij interactieve elementen: een button die een tweede button bevat. Of bij het verkeerd combineren van elementen: een label die een link bevat. Daarnaast moeten bijvoorbeeld lists en definition lists goed opgebouwd zijn.

Silvestar Bistrović beschrijft een aantal Common nesting issues in HTML.

3. Elementen bevatten geen dubbele attributen

Gebruik een attribuut maximaal één keer. Vermijd bijvoorbeeld meerdere class-attributen:

<!-- Foute code, niet gebruiken -->
<h1 class="heading" class="x-large">Contact</h1>

In het geval van het class-attribuut scheid je meerdere waarden met een spatie:

<h1 class="heading x-large">Contact</h1>

4. Alle ID's zijn uniek, behalve waar de specificatie deze eigenschappen toelaat

Dit is voor formulieren belangrijk. Labels en formuliervelden zijn via een ID aan elkaar gekoppeld. Komt een ID meerdere keren voor op een pagina, dan kan het verkeerde label bij een formulierveld worden voorgelezen.

In code:

<label for="kleur">Wat is je lievelingskleur?</label> <input type="text" id="kleur" name="lievelingskleur" />

Bij de richtlijnen over labels staat hoe deze for/id relatie werkt.

Een ander probleem is het toevoegen van twee keer hetzelfde formulier met hetzelfde formulier-ID, de foutafhandeling staat dan misschien bij het verkeerde formulier.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

Hoe te testen

Voor developers:

Veelgemaakte fouten

Fout: dubbele ID's doordat een formulier meerdere keren wordt gebruikt.

Met sommige formulierenplugins kun je hetzelfde formulier meerdere keren toevoegen op een pagina. Let in dit geval op dat de plugin wel unieke ID's toevoegt aan de velden en het formulier. Dat kan er, naast problemen bij de for/id relaties, ook voor zorgen dat validatiescripts op de verkeerde plek worden uitgevoerd.

Een formulier dat vaak twee keer wordt toegevoegd, is een aanmeldformulier voor de nieuwsbrief. Wil je toch hetzelfde formulier meerdere keren op een pagina, maak dan verschillende formulieren aan.

W3C referenties WCAG-versie 2.1

Belangrijk: De richtlijnen van NL Design System zijn niet verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.