Niek Derksen naar home van niekderksen.nl

Over digitale toegankelijkheid

1.3.1 Info en relaties

Categorieën: Tekst
Tags: Ontwikkelaar, Redacteur
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)

Als je een website maakt, is het belangrijk dat de indeling en opmaak niet alleen voor bezoekers, maar ook voor computers begrijpelijk zijn. Wat je met vormgeving laat zien, moet ook in de code van je website duidelijk zijn. Denk hierbij bijvoorbeeld aan koppen, lijsten, tabellen en andere elementen die betekenis overbrengen.

Schermlezers zijn namelijk afhankelijk van de onderliggende code. Door betekenisvolle (semantische) code te gebruiken, leg je de informatie, structuur en relaties van elementen vast. Mensen die een schermlezer gebruiken kunnen hierdoor gemakkelijk door een pagina navigeren, bijvoorbeeld door van kop naar kop te springen.

Hoe pas je dit toe?

Zorg dat informatie, structuur en relaties in de content niet alleen in de vormgeving maar ook in de code is vastgelegd.

Lees het artikel over info en relaties en semantische HTML

Koppen

  • Zorg dat koppen worden opgemaakt met het HTML-element <h[x]> (<h1> tot en met <h6>).

Lijsten

  • Zorg dat ongeordende lijsten worden opgemaakt met het HTML-element <ul>.
  • Zorg dat genummerde lijsten worden opgemaakt met het HTML-element <ol>.
  • Zorg dat definitielijsten worden opgemaakt met het HTML-element <dl>.

Tabellen

  • Zorg dat tabellen worden opgemaakt met het HTML-element <table>.
  • Zorg dat alle cellen met gegevens in een datatabel worden opgemaakt met het HTML-element <td>.
  • Zorg dat cellen die een tabelkop zijn in een datatabel worden opgemaakt met het HTML-element <th>.

Teksten

  • Zorg dat citaten in een tekst worden opgemaakt met het HTML-element <q>.
  • Zorg dat citaten worden opgemaakt met het HTML-element <blockquote>.
  • Zorg dat codeblokken worden opgemaakt met het HTML-element <pre>.
  • Zorg dat codes in een tekst worden opgemaakt met het HTML-element <code>.

Voor wie is dit belangrijk?

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

Wie is verantwoordelijk?

  • Redacteur
  • Ontwikkelaar

Hoe toets je dit?

Benodigdheden
Testprocedure

Test 1: Koppen

  1. Inventariseer de pagina
    • Bepaal welke teksten de functie hebben van een kop:
      • Grotere tekst
      • Vetgedrukte tekst
      • Tekst in een andere kleur
      • Tekst met extra witruimte er omheen
  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 hiërarchie 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 onder elkaar (met of zonder inspringing)
  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

Test 3: Tabellen

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

Datatabel

  1. 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"
  2. 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
  3. 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>
  4. Zoek in de code naar het scope-attribuut en controleer:
    • Of tabellen met rij- én kolomkoppen het scope-attribuut gebruiken
    • Of scope="col" is gebruikt voor kolomkoppen
    • Of scope="row" is gebruikt voor rijkoppen
Complexe datatabel

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

  • Tabelkoppen op meerdere niveaus
  • Samengevoegde tabelkoppen
  • Meer dan 2 niveaus van koppen
  1. Zoek in de code naar headers en id en controleer:
    • Of elke kopcel een uniek id heeft
    • Of elke datacel een headers-attribuut heeft
    • Of het headers-attribuut verwijst naar alle relevante kop-id‘s
  2. Zoek in de code naar scope in complexe tabellen en controleer:
    • Of het scope-attribuut niet samen wordt gebruikt met headers met id

Presentatietabel

Let op: Deze stappen zijn alleen voor presentatietabellen

  1. Zoek in de code naar presentatietabellen en controleer:
    • Of presentatietabellen geen <th>-elementen bevatten
    • Of presentatietabellen geen <caption>-element bevatten
    • Of presentatietabellen geen summary-, headers– of scope-attributen bevatten

Test 4: Algemene semantiek

  1. Verken de pagina met een schermlezer
    • Start de schermlezer
    • Navigeer door de hele pagina
    • Bepaal welke informatie alleen visueel beschikbaar is
    • Bepaal welke relaties tussen elementen bestaan
  2. Inventariseer de visuele informatie en relaties
    • Bepaal welke informatie wordt overgebracht via:
      • Visuele positie
      • Kleur of contrast
      • Vorm of grootte
      • Witruimte tussen elementen
      • Inspringingen
  3. Controleer of visuele informatie ook in de code beschikbaar is:
    • Of de informatie beschikbaar is met de schermlezer uitgeschakeld
    • Of er alternatieve tekstuele informatie aanwezig is

Belangrijk om te weten

  • Het overslaan van kopniveaus (bijvoorbeeld h1 naar h3) is geen fout als de hiërarchie logisch blijft
Beoordeling
  • 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 volgorde van koppen moet de betekenis van de pagina niet in de weg staan
  • 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
  • Lijsten moeten juist genest zijn
  • Tekst die er uit ziet als een tabel moet zijn opgemaakt met een tabel-element
  • Tabelkoppen moeten worden opgemaakt met <th>
  • Tabelcellen moet programmatisch zijn gekoppeld aan de bijbehorende koppen
  • Presentatietabellen mogen geen <th>, <caption>, summary, headers of scope bevatten​​​​​​​​​​​​​​​​

Bronnen

Andere richtlijnen

Laatst gewijzigd op