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 er uit zien als een kop:
     • Grotere tekst
     • Vetgedrukte tekst
     • Tekst in een andere kleur
     • Tekst met extra witruimte er omheen
   • Bepaal voor elke visuele kop:
     • Of het content introduceert of structureert
2. Zoek in de code naar kop-elementen en controleer:
   • Of visuele koppen zijn opgemaakt met <h1> tot en met <h6>
   • Of visuele koppen zijn opgemaakt met role="heading" en aria-level-attribuut
   • Of de waarde van het aria-level-attribuut een getal is van 1 tot en met 6
   • Of de volgorde van koppen de betekenis van de pagina niet in de weg staat
3. Zoek in de code naar misbruik van kop-elementen en controleer:
   • Of <h1> tot en met <h6> niet alleen voor styling worden gebruikt
   • Of kop-elementen niet alleen worden gebruikt om de lettergrootte te wijzigen

Test 2: Lijsten

1. Inventariseer de pagina
   • Bepaal welke content er uit ziet als een lijst:
     • Items met opsommingstekens, nummers of letters
     • Items horizontaal naast elkaar
     • Groepen van meer dan 2 gerelateerde items onder of naast elkaar
   • Bepaal voor elke visuele lijst:
     • Of de items verbonden zijn en logisch bij elkaar horen
     • Of de items tekstuele nummering bevatten (1., 2., 3.)
2. Zoek in de code naar lijsten en controleer:
   • Of visuele lijsten zijn opgemaakt met <ul> en <li> (ongeordende lijsten)
   • Of visuele lijsten zijn opgemaakt met <ol> en <li> (geordende lijsten)
   • Of visuele lijsten zijn opgemaakt met <dl>, <dt> en <dd> (definitielijsten)
   • Of visuele lijsten zijn opgemaakt met role="list" en role="listitem"
3. Zoek in de code naar het lijsttype en controleer:
   • Of ongeordende lijsten (<ul>) zijn gebruikt wanneer de volgorde niet uitmaakt
   • Of geordende lijsten (<ol>) zijn gebruikt wanneer de volgorde belangrijk is
   • Of definitielijsten (<dl>) zijn gebruikt voor termen met beschrijvingen
4. Zoek in de code naar misbruik van lijstelementen en controleer:
   • Of lijstelementen niet worden gebruikt voor content die geen lijst is
   • Of lijstelementen niet alleen voor styling worden gebruikt
5. Zoek in de code naar geneste 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 geneste lijsten correct zijn opgebouwd (geneste <ul> of <ol> binnen <li>)

Test 3: Tabellen

1. Inventariseer de pagina
   • Bepaal welke content er uit ziet als een tabel:
     • Kolommen en rijen met gerelateerde data
     • Koppen boven kolommen of naast rijen
   • Bepaal voor elke tabel het tabeltype:
     • Datatabel: bevat gestructureerde data met koppen
     • Presentatietabel: alleen voor visuele positionering

Datatabel

2. Zoek in de code naar tabelelementen en controleer:
   • Of datatabellen zijn opgemaakt met <table>-element
   • Of datatabellen zijn opgemaakt met role="table", role="row", role="columnheader", role="rowheader"
3. Bekijk de tabelstructuur en controleer:
   • Of elke kolom een duidelijke betekenis heeft
   • Of elke rij een duidelijke betekenis heeft
   • Of koppen de inhoud van kolommen en/of rijen beschrijven
   • Of er geen structuurproblemen zijn zoals:
     • Lege rijen of kolommen voor witruimte
     • Verklarende tekst in tabelcellen
     • Wisseling van betekenis halverwege
4. Zoek in de code naar tabelkop-elementen en controleer:
   • Of visuele tabelkoppen zijn opgemaakt met <th>
   • Of visuele tabelkoppen zijn opgemaakt met role="columnheader" of role="rowheader"
   • Of kopcellen niet zijn opgemaakt met <td>
5. Zoek in de code naar het scope-attribuut en controleer:
   • Of het scope-attribuut geen ongeldige waarden heeft
   • Of tabellen met rij- én kolomkoppen het scope-attribuut gebruiken
   • Of scope="col" is gebruikt voor kolomkoppen
   • Of scope="row" is gebruikt voor rijkoppen
   • Of scope="colgroup" of scope="rowgroup" is gebruikt voor gegroepeerde kopcellen

Complexe datatabel

Let op: Deze stappen zijn alleen voor complexe tabellen met:

• Tabelkoppen op meerdere niveaus
• Samengevoegde tabelkoppen
• Meer dan 2 niveaus van koppen

6. Zoek in de code naar headers en id en controleer:
   • Of elke kopcel (<th>) een uniek id heeft
   • Of elke datacel (<td>)een headers-attribuut heeft
   • Of het headers-attribuut verwijst naar alle relevante kop-id‘s

Presentatietabel

Let op: Deze stappen zijn alleen voor presentatietabellen

7. Zoek in de code naar presentatietabellen en controleer:
   • Of role="presentation" of role="none" is toegevoegd aan het <table>-element
   • Of presentatietabellen geen <th>-elementen bevatten
   • Of presentatietabellen geen <caption>-element bevatten
   • Of presentatietabellen geen summary-, headers– of scope-attributen bevatten

Test 4: 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">)
     • Knoppen (<button>, <input type="submit">)
   • Bepaal voor elk formulierelement:
     • Of er een zichtbare beschrijving bij staat
     • Of de beschrijving direct voor of boven het element staat (bij invoervelden en keuzelijsten)
     • Of de beschrijving direct na het element staat (bij keuzerondjes en selectievakjes)
2. Test de koppeling van labels door op de beschrijving te klikken
   • Klik met de muis op de beschrijving van elk formulierelement
   • Controleer of de cursor naar het bijbehorende veld springt:
     • Bij invoervelden: de cursor staat in het veld
     • Bij keuzerondjes en selectievakjes: het element wordt geselecteerd
     • Bij keuzelijsten: de lijst krijgt focus
3. Zoek in de code naar formulierelementen waarvan de kliktest niet werkt en controleer:
   • Of het element een aria-labelledby heeft dat verwijst naar de beschrijving
   • Of het element een aria-label heeft met de beschrijvende tekst
   • Of het element een title-attribuut heeft met de beschrijving
   • Of het element binnen een <label> staat (implicit label)

Groepen van formulierelementen

1. 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 de individuele labels alleen voldoende context geven
     • Of de groepslabel nodig is om het doel van de individuele elementen te begrijpen
2. Zoek in de code naar groepen waar de groepslabel nodig is en controleer:
   • Of de groep binnen een <fieldset> staat met een <legend> als groepslabel
   • Of de groep binnen een element staat met role="group" of role="radiogroup" én:
     • Een aria-labelledby dat verwijst naar de groepslabel, of
     • Een aria-label met de tekst van de groepslabel

Test 5: Overige semantiek

1. Verken 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:
   • Of de visuele informatie ook door de schermlezer wordt aangekondigd
   • Of de visuele relaties ook programmatisch beschikbaar zijn
   • Of er alternatieve tekstuele informatie aanwezig is voor visuele informatie

Belangrijk om te weten

• 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
• Lege tabelkoppen zijn toegestaan

Algemene semantiek

• Informatie die visueel wordt getoond moet in de code beschikbaar zijn of in tekst
• Structuur die visueel wordt getoond moet in de code beschikbaar zijn of in tekst
• Relaties die visueel worden getoond moeten in de code beschikbaar zijn of in tekst
• Semantische opmaak moet correct zijn
• Semantische opmaak moet passend worden gebruikt
• role="presentation" of "none" moeten niet gebruikt zijn op content die semantische informatie bevat

Koppen

• Tekst die er uit ziet als een kop moet zijn opgemaakt met een kop-element
• Tekst die geen kop is moet niet zijn opgemaakt met een kop-element
• De waarde van het aria-level-attribuut moet een getal zijn van 1 tot en met 6
• De volgorde van koppen moet de betekenis van de pagina niet in de weg staan

Lijsten

• Tekst die er uit ziet als een lijst moet zijn opgemaakt met een lijst-element
• Tekst die geen lijst is moet niet zijn opgemaakt met een lijst-element
• Het lijsttype moet passen bij de functie van de lijst (ongeordend, geordend of definitie)
• Lijst-elementen moeten correct zijn gestructureerd

Tabellen

• Tekst die er uit ziet als een tabel moet zijn opgemaakt met een tabel-element
• Tabelkoppen moeten worden opgemaakt met een tabelkop-element.
• Tabelcellen moeten programmatisch zijn gekoppeld aan de bijbehorende koppen
• Presentatietabellen moeten geen <th>, <caption>, summary, headers of scope bevatten​​​​​​​​​​​​​​​​

Formulieren

• Zichtbare labels moeten programmatisch zijn gekoppeld aan hun bijbehorende formulierelement
• Groepen van gerelateerde invoervelden moeten zijn gegroepeerd als de individuele labels onvoldoende context bieden

• 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