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 dat belangrijk?
- Mensen die een schermlezer gebruiken.
- Mensen die blind of slechtziend zijn.
Wie is verantwoordelijk?
- Redacteur
- Ontwikkelaar
Bronnen
- WCAG 2.2 – Succescriterium 1.3.1 Info en relaties
- Page Structure (Engelstalig)
- Tables (Engelstalig)