1.3.1 Info en relaties

Succescriterium 1.3.1 Info en relaties

Informatie, structuur en relaties overgebracht door presentatie kunnen door software bepaald worden of zijn beschikbaar in tekst.

Info en relaties begrijpen (Engelstalig)

Met vormgeving kun je veel structuur laten zien. Een kop is groot en vet. Een lijst heeft opsommingstekens. Een tabel heeft rijen en kolommen. Die structuur moet ook in de code staan, of in de tekst zelf. Dan blijft de structuur bestaan als de vormgeving wegvalt of verandert.

Schermlezers zijn namelijk afhankelijk van de onderliggende code. Met betekenisvolle (semantische) code leg je vast wat een kop, lijst of tabel is. Mensen die een schermlezer gebruiken kunnen hierdoor gemakkelijk door een pagina navigeren, bijvoorbeeld door van kop naar kop te springen. Ook mensen die de pagina met eigen stijlen aanpassen, behouden zo de structuur.

Hoe pas je dit toe?

Zorg dat informatie, structuur en relaties niet alleen in de vormgeving staan, maar ook in de code of in tekst.
- Maak koppen, lijsten en tabellen op met de knoppen of blokken van je editor. Maak ze niet na met vette tekst, streepjes of spaties.
- Gebruik die opmaak alleen voor content die echt een kop, lijst of tabel is.
- Koppel in formulieren elk zichtbaar label in de code aan zijn formulierelement.
- Verberg geen content met betekenis voor hulptechnologie.

Lees het artikel over info en relaties en semantische HTML

Voor wie is dit belangrijk?

Mensen die een schermlezer gebruiken.
Mensen die blind of slechtziend zijn.

Wie is verantwoordelijk?

Hoe toets je dit?

Benodigdheden

Schermlezer (bijvoorbeeld NVDA of VoiceOver)
headingsMap browser-extensie
Stylus browser-extensie
- In combinatie met mijn CSS-stijlen:

Testprocedure

Test 1: Koppen

Inventariseer de pagina
- Bepaal welke teksten eruitzien als een kop:
  - Grotere tekst
  - Vetgedrukte tekst
  - Tekst in een andere kleur
  - Tekst met extra witruimte eromheen
- Bepaal voor elke visuele kop:
  - Of de tekst de content eronder introduceert of structureert
Zoek in de code naar de visuele koppen en controleer of minstens één van de volgende waar is:
- Of de kop is opgemaakt met <h1> tot en met <h6>
- Of de kop is opgemaakt met role="heading" en een aria-level-attribuut
Zoek in de code naar kop-elementen en controleer:
- Of één visuele kop niet is verdeeld over meerdere kop-elementen
- Of de volgorde van kopniveaus de betekenis van de pagina niet in de weg staat
- Of <h1> tot en met <h6> en role="heading" alleen zijn gebruikt voor tekst die een kop is

Test 2: Lijsten

Inventariseer de pagina
- Bepaal welke content eruitziet als een lijst:
  - Items met opsommingstekens, nummers of letters
  - Items horizontaal naast elkaar
  - Groepen van meerdere gerelateerde items onder of naast elkaar
- Bepaal voor elke visuele lijst:
  - Of de items logisch bij elkaar horen
  - Of de lijst er genummerd, ongenummerd of als termen met een beschrijving uitziet
Zoek in de code naar de visuele lijsten en controleer of minstens één van de volgende waar is:
- Of de lijst is opgemaakt met <ul> of <ol> en <li>
- Of de lijst is opgemaakt met <dl>, <dt> en <dd>
- Of de lijst is opgemaakt met role="list" en role="listitem"
Zoek in de code naar lijst-elementen en controleer:
- Of één visuele lijst niet is verdeeld over meerdere lijst-elementen
- Of het lijsttype past bij de lijst:
  - <ul> voor lijsten met opsommingstekens of zonder tekens
  - <ol> voor genummerde lijsten
  - <dl> voor termen met beschrijvingen
- Of lijst-elementen alleen zijn gebruikt voor content die een lijst is
Zoek in de code naar de opbouw van lijsten en controleer:
- Of <ul> of <ol> alleen <li>, <script> of <template> als directe kinderen bevat
- Of <dl> alleen <dt> met <dd>, <script>, <template> of <div> als directe kinderen bevat
- Of een geneste lijst binnen een <li> staat
- Of elk element met role="listitem" direct binnen een element met role="list" staat

Test 3: Tabellen

Inventariseer de pagina
- Bepaal welke content eruitziet als een tabel:
  - Rijen en kolommen met gerelateerde gegevens
  - Koppen boven kolommen of naast rijen
  - Kolommen die zijn uitgelijnd met spaties of tabs
- Bepaal voor elke tabel het tabeltype:
  - Datatabel: elke gegevenscel heeft een relatie met zijn rij én zijn kolom
  - Presentatietabel: de tabel is alleen gebruikt voor visuele positionering

Datatabel

Zoek in de code naar de datatabellen en controleer of minstens één van de volgende waar is:
- Of de tabel is opgemaakt met <table>, <tr>, <th> en <td>
- Of de tabel is opgemaakt met role="table", role="row", role="columnheader", role="rowheader", role="cell"
Zoek in de code naar de opbouw van de datatabellen en controleer:
- Of één visuele tabel niet is verdeeld over meerdere tabel-elementen
- Of <table> alleen <caption>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, <script> of <template> als directe kinderen bevat
- Of elke <tr> binnen een <table>, <thead>, <tbody> of <tfoot> staat
- Of elke <td> en <th> binnen een <tr> staat
- Of elk element met role="row" binnen een element met role="table" of role="rowgroup" staat
- Of elk element met role="cell", role="columnheader" of role="rowheader" binnen een element met role="row" staat
Zoek in de code naar tabelkoppen en controleer:
- Of elke visuele tabelkop is opgemaakt met <th>, role="columnheader" of role="rowheader"
- Of elke <th> visueel ook een tabelkop is
Zoek in de code naar tabelkoppen en controleer:
- Of elke visuele tabelkop is opgemaakt met <th>, role="columnheader" of role="rowheader"
- Of tabelkoppen niet zijn opgemaakt met <td>
Zoek in de code naar het scope-attribuut en controleer:
- Of scope alleen de waarde row, col, rowgroup of colgroup heeft
- Of tabelkoppen die niet in de eerste rij of de eerste kolom staan een scope-attribuut hebben

Complexe datatabel

Let op: Alleen als de tabel tabelkoppen op meerdere niveaus of samengevoegde tabelkoppen heeft.

Zoek in de code naar de koppeling tussen gegevenscellen en tabelkoppen en controleer of minstens één van de volgende waar is:
- Of elke gegevenscel met meer dan één rij- of kolomkop een headers-attribuut heeft met de id’s van al die tabelkoppen
- Of gegroepeerde tabelkoppen scope="colgroup" of scope="rowgroup" hebben
Zoek in de code naar headers– en id-attributen en controleer:
- Of elke id in een headers-attribuut verwijst naar een tabelkop in dezelfde tabel
- Of elke id uniek is op de pagina

Presentatietabel

Let op: Alleen als de tabel alleen voor visuele positionering is gebruikt.

Zoek in de code naar presentatietabellen en controleer:
- Of de tabel geen <th>– of <caption>-elementen bevat
- Of de tabel geen niet-leeg summary-attribuut en geen headers– of scope-attributen bevat

Test 4: Nadruk

Inventariseer de pagina
- Bepaal welke tekst visuele nadruk krijgt:
  - Vetgedrukte tekst
  - Schuingedrukte (cursieve) tekst
  - Onderstreepte tekst
  - Tekst in een afwijkende kleur of grootte
- Bepaal voor elke benadrukte tekst:
  - Of de nadruk betekenis overbrengt (zoals belang, een waarschuwing of een bijzondere status)
Zoek in de code naar nadruk die betekenis overbrengt en controleer of minstens één van de volgende waar is:
- Of de tekst is opgemaakt met <strong>, <em> of <mark>
- Of de betekenis ook in de tekst zelf staat

Test 5: Formulieren

Labels

Inventariseer de pagina
- Bepaal welke formulierelementen er zijn:
  - Invoervelden (<input>)
  - Tekstgebieden (<textarea>)
  - Keuzelijsten (<select>)
  - Selectievakjes (<input type="checkbox">)
  - Keuzerondjes (<input type="radio">)
  - Schuifregelaars (<input type="range">)
  - Maatwerk formulierelementen
- Bepaal welke formulierelementen een zichtbaar label hebben
- Bepaal welke formulierelementen visueel als verplicht zijn aangegeven (bijvoorbeeld met een sterretje, kleur of icoon)
Test de koppeling door op elk zichtbaar label te klikken en controleer:
- Bij een invoerveld of tekstgebied:
  - Of de cursor in het veld staat
- Bij een keuzerondje of selectievakje:
  - Of het element wordt geselecteerd
- Bij een keuzelijst of schuifregelaar:
  - Of het element de focus krijgt
Zoek in de code naar maatwerk formulierelementen en formulierelementen waarbij de kliktest niet werkt, en controleer of minstens één van de volgende waar is:
- Of het element een aria-labelledby-attribuut heeft dat naar het zichtbare label verwijst
- Of het element een aria-label– of title-attribuut heeft met de tekst van het zichtbare label
Controleer voor formulierelementen die visueel als verplicht zijn aangegeven of minstens één van de volgende waar is:
- Of het label het woord “verplicht” bevat
- Of een tekst bij het formulier uitlegt hoe verplichte velden zijn aangegeven
Zoek in de code naar verplichte formulierelementen die niet slagen op stap 4 en controleer of minstens één van de volgende waar is:
- Of het element een required– of aria-required="true“-attribuut heeft
- Of de toegankelijke naam de aanduiding “verplicht” bevat (bijvoorbeeld via een icoon met tekstalternatief in het label)

Groepen van formulierelementen

Inventariseer de pagina
- Bepaal welke groepen van gerelateerde formulierelementen er zijn:
  - Keuzerondjes met een groepslabel erboven
  - Selectievakjes met een groepslabel erboven
  - Velden die bij elkaar horen (bijvoorbeeld factuuradres en afleveradres)
  - Samengestelde invoer (bijvoorbeeld een datum met dag, maand en jaar)
- Bepaal voor elke groep:
  - Of het groepslabel nodig is om het doel van de losse formulierelementen te begrijpen
Zoek in de code naar groepen waarbij het groepslabel nodig is en controleer of minstens één van de volgende waar is:
- Of de groep in een <fieldset> staat met het groepslabel in een <legend>
- Of de groep in een element met role="group" of role="radiogroup" staat, met een aria-labelledby-attribuut dat naar het groepslabel verwijst of een aria-label-attribuut met de tekst van het groepslabel

Foutmeldingen

Let op: Alleen als het formulier foutmeldingen bij formulierelementen toont.

Inventariseer de pagina
- Bepaal welke formulieren er zijn:
  - Zoekformulieren
  - Contactformulieren
  - Nieuwsbriefinschrijvingen
  - Login- en aanmeldingsformulieren
  - Feedbackformulieren
  - Account-instellingen
  - Bestel- en betaalformulieren
- Bepaal voor elk formulier:
  - Welke velden verplicht zijn
  - Welke velden een verplicht invoerformaat hebben
  - Welke velden een waarde binnen een bereik vereisen
  - Welke velden alleen een beperkte set waarden accepteren
  - Welke velden samen een geldige combinatie moeten vormen
Vul elk formulier in en laat de verplichte velden leeg
- Verlaat elk veld met Tab
- Verstuur het formulier
Verken de pagina
- Bepaal welke foutmeldingen visueel bij een formulierelement staan
- Bepaal voor elke foutmelding:
  - Of de foutmelding het label van het formulierelement noemt
Zoek in de code naar formulierelementen met een foutmelding die het label niet noemt en controleer of minstens één van de volgende waar is:
- Of de foutmelding met een aria-describedby-attribuut aan het formulierelement is gekoppeld
- Of de foutmelding deel is van de toegankelijke naam
Herlaad de pagina
Vul alle verplichte velden in en vul de velden met ongeldige invoer
- Verlaat elk veld met Tab
- Verstuur het formulier
Herhaal stap 10 en 11

Test 6: Oriëntatiepunten

Inventariseer de pagina
- Bepaal welke gebieden er visueel zijn:
  - Een header met logo en navigatie
  - Een of meer navigatieblokken
  - De hoofdcontent
  - Een sidebar
  - Een footer
- Bepaal voor elk visueel gebied:
  - Of de structuur al beschikbaar is via tekst of koppen
Zoek in de code naar de gebieden waarvan de structuur niet via tekst of koppen beschikbaar is en controleer:
- Of de header is opgemaakt met <header> of role="banner"
- Of de footer is opgemaakt met <footer> of role="contentinfo"
- Of de hoofdcontent is opgemaakt met <main> of role="main"
- Of navigatieblokken zijn opgemaakt met <nav> of role="navigation"
- Of de sidebar is opgemaakt met <aside> of role="complementary"
Zoek in de code naar landmark-elementen en controleer:
- Of elk landmark-element past bij de functie van het gebied

Test 7: Overige semantiek

Inventariseer de pagina
- Bepaal welke informatie wordt overgebracht via:
  - Visuele positie
  - Kleur of contrast
  - Vorm of grootte
  - Witruimte tussen elementen
  - Inspringingen
- Bepaal welke relaties tussen elementen visueel zichtbaar zijn
Schakel een schermlezer in
Navigeer met de schermlezer door de hele pagina en controleer voor elke gevonden informatie of relatie of minstens één van de volgende waar is:
- Of de schermlezer de informatie of relatie aankondigt
- Of de informatie of relatie in tekst beschikbaar is
Zoek in de code naar aria-hidden="true" en controleer of minstens één van de volgende waar is:
- Of de verborgen content geen informatie, structuur of relaties overbrengt
- Of de informatie ook elders in de code of in tekst beschikbaar is
Zoek in de code naar role="presentation" en role="none" en controleer:
- Of deze rollen alleen staan op elementen die geen informatie, structuur of relaties overbrengen

Belangrijk om te weten

Informatie die in tekst beschikbaar is, hoeft niet ook in de code te staan
Het overslaan van kopniveaus (bijvoorbeeld h1 naar h3) is geen fout als de hiërarchie logisch blijft
Meerdere h1-elementen is niet per se een fout
Een lege tabelkop is toegestaan, bijvoorbeeld in de cel linksboven

Beoordeling

Algemene semantiek

Voor informatie, structuur en relaties die visueel worden getoond, moet minstens één van de volgende zaken gelden:
- De informatie, structuur of relatie is in de code beschikbaar
- De informatie, structuur of relatie is beschikbaar in tekst
Semantische opmaak moet passen bij de functie van de content
role="presentation" of role="none" moeten niet zijn gebruikt op content die informatie, structuur of relaties overbrengt
Voor content die verborgen is voor hulptechnologie, moet minstens één van de volgende zaken gelden:
- De content brengt geen informatie, structuur of relaties over
- De informatie is ook elders in de code of in tekst beschikbaar

Koppen

Tekst die eruitziet als een kop moet zijn opgemaakt als kop in de code
Een visuele kop moet niet zijn verdeeld over meerdere kop-elementen
Tekst die geen kop is, moet niet zijn opgemaakt als kop in de code
De volgorde van kopniveaus moet de betekenis van de pagina niet in de weg staan

Lijsten

Content die eruitziet als een lijst moet zijn opgemaakt als lijst in de code
Een visuele lijst moet niet zijn verdeeld over meerdere lijst-elementen
Content die geen lijst is, moet niet zijn opgemaakt als lijst in de code
Het lijsttype moet passen bij de functie van de lijst (ongeordende, geordende of definitielijst)
Lijst-elementen moeten correct zijn gestructureerd

Tabellen

Content die eruitziet als een tabel moet zijn opgemaakt als tabel in de code
Een visuele tabel moet niet zijn verdeeld over meerdere tabel-elementen
Visuele tabelkoppen in een datatabel moeten zijn opgemaakt als tabelkop in de code
Content in een datatabel die geen tabelkop is, moet niet zijn opgemaakt als tabelkop in de code
Gegevenscellen in een datatabel moeten in de code zijn gekoppeld aan de bijbehorende tabelkoppen
Tabel-elementen moeten correct zijn gestructureerd
Presentatietabellen moeten geen <th>, <caption>, een niet-leeg summary-attribuut, headers of scope bevatten

Nadruk

Nadruk die betekenis overbrengt moet in de code beschikbaar zijn of in tekst

Formulieren

Zichtbare labels moeten in de code zijn gekoppeld aan hun bijbehorende formulierelement
Een visuele aanduiding van verplichte velden moet in de code staan of in tekst zijn uitgelegd
Groepen van gerelateerde formulierelementen moeten zijn gegroepeerd als de individuele labels onvoldoende context bieden
Een zichtbaar groepslabel moet in de code zijn gekoppeld aan de groep
Voor elke foutmelding die visueel bij een formulierelement staat, moet minstens één van de volgende zaken gelden:
- De foutmelding is in de code gekoppeld aan het formulierelement
- De foutmelding noemt het label van het formulierelement

Oriëntatiepunten

Het landmark-element moet passen bij de functie van het gebied

Bronnen

WCAG 2.2 – Succescriterium 1.3.1 Info en relaties
Page Structure Tutorial | Web Accessibility Initiative (WAI) | W3C (Engelstalig)
Tables Tutorial | Web Accessibility Initiative (WAI) | W3C (Engelstalig)
WebAIM: Headings (Engelstalig)
WebAIM: Semantic Structure: Regions, Headings, and Lists (Engelstalig)
WebAIM: Creating Accessible Tables – Layout Tables (Engelstalig)
WebAIM: Creating Accessible Tables – Data Tables (Engelstalig)
WebAIM: Creating Accessible Forms – Accessible Form Controls (Engelstalig)

Andere richtlijnen

Richtlijnen voor toegankelijkheid van webcontent