Campus Design System

Appearance

1.3.2 Structurele Gegevens niveau A ​

Uitleg ​

Het criterium 1.3.2 van WCAG 2.2 gaat over het toegankelijk maken van gestructureerde gegevens zoals tabellen, lijsten en formulieren. Het zorgt ervoor dat de structuur van gegevens duidelijk en begrijpelijk is voor alle gebruikers, ook voor degenen die hulpmiddelen zoals schermlezers gebruiken. Dit criterium vereist dat gestructureerde gegevens op een logische manier worden gepresenteerd, zodat gebruikers gemakkelijk de relaties tussen verschillende gegevens kunnen begrijpen.

Dit houdt in dat bij het gebruik van tabellen de kopteksten voor de rijen en kolommen correct moeten worden gedefinieerd, en dat formuliervelden correct gekoppeld moeten zijn aan labels. Het doel is om de gegevens op een manier aan te bieden die zowel visueel als semantisch begrijpelijk is, ongeacht het hulpmiddel dat de gebruiker gebruikt.

Voorbeeld ​

Stel je voor dat je een tabel hebt waarin de naam, leeftijd en het adres van verschillende mensen worden weergegeven. Als de kolommen niet goed gelabeld zijn, kan een gebruiker die een schermlezer gebruikt niet begrijpen welke gegevens in welke kolom staan. Om ervoor te zorgen dat deze tabel voldoet aan 1.3.2, moeten de kolommen goed worden gelabeld en moet de structuur van de tabel logisch zijn.

Voorbeeld van implementatie ​

Een voorbeeld van een goed gestructureerde tabel:

html
<table>
  <caption>
    Persoonlijke Gegevens
  </caption>
  <thead>
    <tr>
      <th>Naam</th>
      <th>Leeftijd</th>
      <th>Adres</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jan Jansen</td>
      <td>34</td>
      <td>Steenstraat 12, Brugge</td>
    </tr>
    <tr>
      <td>Pieter Pietersen</td>
      <td>28</td>
      <td>Marktplein 4, Antwerpen</td>
    </tr>
  </tbody>
</table>

In dit voorbeeld wordt de tabel voorzien van een caption die de inhoud beschrijft, en wordt de tabelkop (thead) gebruikt om de kolomnamen te definiëren. Dit maakt de informatie duidelijk en begrijpelijk voor gebruikers van schermlezers, die de kolomnamen kunnen horen in plaats van verwarring over de data in de kolommen.

Alternatieve benaderingen ​

  • Formulieren: Bij het gebruik van formulieren moeten alle invoervelden duidelijk worden gelabeld en op een logische volgorde staan. Hierdoor wordt het gemakkelijker voor gebruikers om het formulier in te vullen, zelfs als ze een schermlezer gebruiken.
html
<form>
  <label for="first-name">Voornaam:</label>
  <input type="text" id="first-name" name="first-name" />

  <label for="last-name">Achternaam:</label>
  <input type="text" id="last-name" name="last-name" />

  <button type="submit">Verzenden</button>
</form>

In dit voorbeeld worden de label-elementen gebruikt om de velden duidelijk te verbinden met de bijbehorende invoervelden. Dit maakt het voor een gebruiker met een schermlezer gemakkelijker om te begrijpen welk veld waarvoor bedoeld is.

  • Lijsten: Wanneer je lijsten gebruikt, moet je ervoor zorgen dat de items op een logische en betekenisvolle manier worden gepresenteerd.
html
<ul>
  <li>Appels</li>
  <li>Peren</li>
  <li>Bananen</li>
</ul>

Dit voorbeeld maakt gebruik van een ongestructureerde lijst (ul), waarin de items (li) correct worden gepresenteerd. Dit helpt schermlezergebruikers om de inhoud goed te begrijpen.

Belangrijke overwegingen ​

  • Toegankelijke tabellen: Bij tabellen moet de koptekst (th) van de rijen en kolommen altijd goed worden gedefinieerd, zodat de informatie voor gebruikers van hulpmiddelen duidelijk is. Ook moet je het juiste gebruik van HTML-elementen zoals thead, tbody en tfoot overwegen als de tabel complex is.
  • Formulieren: De volgorde van formulierinvoervelden moet logisch zijn, en elk invoerveld moet een duidelijk label hebben.
  • Lijsten en gegevensstructuren: Bij het gebruiken van lijsten moet je ervoor zorgen dat de structuur correct en logisch is, en dat deze duidelijk wordt gepresenteerd.

Belangrijkste punten ​

  • Zorg ervoor dat de gegevens die je op je website weergeeft (zoals in tabellen, formulieren en lijsten) goed gestructureerd en logisch gepresenteerd worden.
  • Gebruik altijd th voor tabelkoppen en label voor formulierinvoervelden.
  • De volgorde van de gegevens moet logisch zijn, zodat gebruikers het gemakkelijk kunnen begrijpen.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Met WAVE kun je testen of de tabellen en formulieren goed gestructureerd zijn voor toegankelijkheid. WAVE.
  • Axe Accessibility Checker: Deze tool helpt bij het controleren van de toegankelijkheid van je gestructureerde gegevens en zorgt ervoor dat ze correct zijn gemarkeerd. Axe.
  • HTML Validator: Een HTML-validator kan helpen bij het controleren van de semantische structuur van tabellen, formulieren en lijsten. HTML Validator.

Betekenis voor toegankelijkheid ​

Dit criterium is essentieel voor het toegankelijk maken van gestructureerde gegevens. Door gestructureerde gegevens op een correcte en logische manier te presenteren, krijgen alle gebruikers, ongeacht hun beperkingen of technologie, toegang tot begrijpelijke en bruikbare informatie.

Referenties ​