Info & relaties
Informatie, structuur en relaties die visueel worden overgebracht moeten programmatisch bepaalbaar zijn. Visuele koppen moeten echte heading-elementen zijn. Visuele lijsten moeten ul/ol gebruiken.
The structure you see — headings, lists, tables — must be built into the code too, so screen readers can announce it, not just sighted users seeing the layout.
WCAG 1.3.1 (Niveau A) vereist dat informatie, structuur en relaties die door presentatie worden overgebracht programmatisch bepaalbaar zijn.
Dit enkele criterium dekt een enorm scala aan fouten: koppen gebruikt voor opmaak, tabellen gebruikt voor lay-out, formuliervelden zonder fieldset/legend-groepering, en elke visuele groepering die geen programmatisch equivalent heeft.
Waarom dit belangrijk is
Dit is een van de breedst toepasbare WCAG-criteria — het omvat koppen, lijsten, tabellen, formuliergroepen en elke visuele relatie. Wanneer structuur alleen visueel is (vetgedrukte tekst die eruitziet als kop maar dat niet is), missen schermlezersgebruikers het volledige organisatiekader van de pagina.
Hoe te detecteren
Open DevTools → tabblad Toegankelijkheid en inspecteer de berekende rollen. Controleer: zijn visuele koppen echte heading-elementen? Gebruiken visuele lijsten ul/ol/li? Gebruiken datatabellen th met scope? Staan gerelateerde formuliervelden in een fieldset met legend?
Hoe op te lossen
<!-- Headings must be real headings --> <div class="big-bold">Features</div> <!-- ✗ --> <h2>Features</h2> <!-- ✓ --> <!-- Lists must be real lists --> <div>• Item one<br>• Item two</div> <!-- ✗ --> <ul><li>Item one</li><li>Item two</li></ul> <!-- ✓ --> <!-- Related form fields need grouping --> <fieldset> <legend>Shipping Address</legend> <label for="street">Street</label> <input id="street" /> </fieldset>