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 laat je veel structuur zien. Een kop is groot en vet. Een lijst heeft opsommingstekens. Een tabel heeft rijen en kolommen. En een label staat naast het veld waar het bij hoort. Die structuur en die relaties moeten ook in de code staan, of in de tekst zelf. Dan blijven ze bestaan als de vormgeving wegvalt of verandert.

Schermlezers zijn namelijk afhankelijk van de onderliggende code. Met betekenisvolle (semantische) code leg je vast welk onderdeel een kop, lijst of tabel is, en welk label bij welk veld hoort. Mensen die een schermlezer gebruiken kunnen dan makkelijk door een pagina navigeren, door bijvoorbeeld van kop naar kop te springen. Ook mensen die de pagina met eigen kleuren en lettertypen bekijken, houden zo de structuur.

Hoe pas je dit toe?

Maak koppen, lijsten en tabellen op als echte kop, lijst of tabel. Maak ze niet na met vette tekst, streepjes of spaties.
Gebruik die opmaak alleen voor content die echt een kop, lijst of tabel is.
Geef in een tabel aan welke rij of kolom de tabelkoppen bevat.
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
- Of elk <li> binnen een <ul> of <ol> staat
- Of elke <dt> en <dd> binnen een <dl> 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> en <td>
- Of de tabel is opgemaakt met role="table", role="row" en 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>, role="columnheader" en role="rowheader" visueel ook een tabelkop is
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 waarnaar een headers-attribuut verwijst 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 grootte of een ander lettertype
  - Gemarkeerde tekst (met een achtergrondkleur)
- Bepaal voor elke benadrukte tekst:
  - Of de nadruk betekenis overbrengt (bijvoorbeeld 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
Zoek in de code naar formulierelementen die visueel als verplicht zijn aangegeven en controleer of minstens één van de volgende waar is:
- Of het element een required– of aria-required="true"-attribuut heeft
- Of het element een aria-describedby-attribuut heeft dat verwijst naar de aanduiding
- Of de toegankelijke naam de aanduiding bevat (bijvoorbeeld het woord “verplicht”, of een sterretje of 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 de groep in een element met role="group" of role="radiogroup" staat met een aria-label-attribuut met de tekst van het groepslabel

Foutmeldingen

Laat in elk formulier 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 visueel bij het formulierelement staat en 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 in elk formulier alle verplichte velden in, met ongeldige invoer waar dat kan (zie 3.3.1 Foutidentificatie)
- Verlaat elk veld met Tab
- Verstuur het formulier
Herhaal stap 8 en 9

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
  - Vorm of grootte
  - Witruimte tussen elementen
  - Inspringingen
- Bepaal welke relaties tussen elementen visueel zichtbaar zijn
- Bepaal welke toestanden visueel worden getoond (bijvoorbeeld uitgeschakeld of het huidige item in een reeks)
Schakel een schermlezer in
Navigeer met de schermlezer door de hele pagina en controleer voor elke gevonden informatie, relatie of toestand of minstens één van de volgende waar is:
- Of de schermlezer de informatie, relatie of toestand aankondigt
- Of de informatie, relatie of toestand 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 van <h1> naar <h3>) is geen fout als de hiërarchie logisch blijft.
Meerdere <h1>-elementen zijn niet per se een fout.
Een lege tabelkop is toegestaan, bijvoorbeeld in de cel linksboven.
Niet elke opsomming heeft lijstopmaak nodig. Een opsomming in een lopende zin, gescheiden door komma’s, is geen fout.
Een <header> of <footer> binnen <article>, <aside>, <main>, <nav> of <section> is geen landmark.
Informatie die alleen via kleur wordt overgebracht, valt onder 1.4.1 Gebruik van kleur.
Een formulierelement zonder zichtbaar label valt onder 3.3.2 Labels of instructies.
De uitleg van een aanduiding voor verplichte velden (bijvoorbeeld “Velden met een * zijn verplicht”) valt onder 3.3.2 Labels of instructies.

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-attribuut 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
Voor formulierelementen die visueel als verplicht zijn aangegeven, moet minstens één van de volgende zaken gelden:
- Het formulierelement heeft een required– of aria-required="true"-attribuut
- De toegankelijke naam bevat de aanduiding
- De toegankelijke beschrijving bevat de aanduiding
Voor een groep formulierelementen met een zichtbaar groepslabel dat nodig is om de losse formulierelementen te begrijpen, moet het groepslabel in de code aan de groep zijn gekoppeld
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

Oriëntatiepunten moeten 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