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)

• Schermlezer (bijvoorbeeld NVDA of VoiceOver)
• headingsMap browser-extensie
• Stylus browser-extensie
  • In combinatie met mijn CSS-stijlen:
    • Controleer koppen
    • Controleer lijsten
    • Controleer tabellen
    • Controleer tekst

Test 1: Koppen

1. Inventariseer de pagina
   • Bepaal welke teksten eruitzien als een kop:
     • Grotere tekst
     • Vetgedrukte tekst
     • Tekst in een andere kleur
     • Tekst met extra witruimte er omheen
   • Bepaal voor elke visuele kop:
     • Of de tekst de content eronder introduceert of structureert
2. 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 aria-level-attribuut
3. 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

1. Inventariseer de pagina
   • Bepaal welke content eruitziet als een lijst:
     • Items met opsommingstekens, nummers of letters
     • Items horizontaal naast elkaar
     • Groepen van drie of meer 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
2. 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"
3. 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
4. Zoek in de code naar de opbouw van lijsten en controleer:
   • Of <ul> of <ol> alleen <li>, <script> of <template> als directe kinderen bevatten
   • Of <dl> alleen <dt> met <dd>, <script>, <template> of <div> als directe kinderen bevatten
   • 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

1. 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

2. 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"
3. Zoek in de code naar de tabelstructuur en controleer:
   • Of één visuele tabel niet is verdeeld over meerdere tabel-elementen
4. Zoek in de code naar kopcellen en controleer:
   • Of elke visuele tabelkop is opgemaakt met <th>, role="columnheader" of role="rowheader"
   • Of elke <th> ook visueel ook daadwerkelijk een tabelkop is
   • Of kopcellen niet zijn opgemaakt met <td>
5. Zoek in de code naar het scope-attribuut en controleer:
   • Of scope alleen de waarde row, col, rowgroup of colgroup heeft
   • Of kopcellen die niet in de eerste rij of de eerste kolom staan een scope-attribuut hebben

Complexe datatabel

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

6. Zoek in de code naar de koppeling tussen gegevenscellen en kopcellen 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 kopcellen
   • Of gegroepeerde kopcellen scope="colgroup" of scope="rowgroup" hebben
7. Zoek in de code naar headers– en id-attributen en controleer:
   • Of elke id in een headers-attribuut verwijst naar een kopcel in dezelfde tabel
   • Of elke id uniek is op de pagina

Presentatietabel

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

8. 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

1. 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)
2. 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

1. Inventariseer de pagina
   • Bepaal welke formulierelementen er zijn:
     • Invoervelden (<input>)
     • Tekstvakken (<textarea>)
     • Keuzelijsten (<select>)
     • Keuzerondjes (<input type="radio">)
     • Selectievakjes (<input type="checkbox">)
   • Bepaal welke formulierelementen een zichtbaar label hebben
   • Bepaal welke formulierelementen visueel als verplicht zijn aangegeven, bijvoorbeeld met een sterretje, kleur of icoon
2. Test de koppeling door op elk zichtbaar label te klikken en controleer:
   • Of het bijbehorende formulierelement reageert:
     • Invoerveld of tekstgebied: de cursor staat in het veld
     • Keuzerondje of selectievakje: het element wordt geselecteerd
     • Keuzelijst: de keuzelijst krijgt focus
3. Zoek in de code naar 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
4. Zoek in de code naar verplichte formulierelementen en controleer of minstens één van de volgende waar is:
   • Of de aanduiding “verplicht” in de toegankelijke naam staat, bijvoorbeeld via een icoon met tekstalternatief in het label
   • Of het element een required– of aria-required="true"-attribuut heeft
   • Of een tekst bij het formulier uitlegt hoe verplichte velden zijn aangegeven

Groepen van formulierelementen

5. Inventariseer de pagina op groepen van gerelateerde formulierelementen
   • Bepaal welke groepen er visueel zijn:
     • Keuzerondjes met een groepslabel erboven
     • Selectievakjes met een groepslabel erboven
     • Velden die bij elkaar horen (bijvoorbeeld factuuradres en afleveradres)
     • Samengestelde invoer (bijvoorbeeld datum met dag/maand/jaar)
   • Bepaal voor elke groep:
     • Of het groepslabel nodig is om het doel van de individuele elementen te begrijpen
6. 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 groepslabel in een <legend>
   • Of de groep in een element met role="group" of role="radiogroup" staat, met een aria-labelledby dat verwijst naar de groepslabel of een aria-label met de tekst van het groepslabel

Test 6: Oriëntatiepunten

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

Test 7: Overige semantiek

1. 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
2. Schakel een schermlezer in
3. 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
4. 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
5. 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

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 "none" moeten niet gebruikt zijn op content die informatie, structuur of relaties overbrengt
• Content die informatie, structuur of relaties overbrengt moet niet verborgen zijn voor hulptechnologie

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 kopniveau’s 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 (ongeordend, geordend of definitie)
• 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 moeten zijn opgemaakt als tabelkop in de code
• Gegevenscellen moeten in de code zijn gekoppeld aan de bijbehorende tabelkoppen
• Tabel-elementen moeten correct zijn gestructureerd
• Presentatietabellen moeten geen <th>, <caption>, summary, headers of scope bevatten​​​​​​​​​​​​​​​​

Nadruk

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

Formulieren

• Zichtbare labels moeten programmatisch 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 invoervelden moeten zijn gegroepeerd als de individuele labels onvoldoende context bieden
• Een zichtbaar groepslabel moet programmatisch gekoppeld zijn aan de groep

Oriëntatiepunten

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

• Principe 1: Waarneembaar
  • Richtlijn 1.1 Tekstalternatieven
  • Richtlijn 1.2 Op tijd gebaseerde media
  • Richtlijn 1.3 Aanpasbaar
  • Richtlijn 1.4 Onderscheidbaar
• Principe 2: Bedienbaar
  • Richtlijn 2.1 Toetsenbordtoegankelijk
  • Richtlijn 2.2 Genoeg tijd
  • Richtlijn 2.3 Toevallen en fysieke reacties
  • Richtlijn 2.4 Navigeerbaar
  • Richtlijn 2.5 Input modaliteiten
• Principe 3: Begrijpelijk
  • Richtlijn 3.1 Leesbaar
  • Richtlijn 3.2 Voorspelbaar
  • Richtlijn 3.3 Assistentie bij invoer
• Principe 4: Robuust
  • Richtlijn 4.1 Compatibel