Campus Design System

Appearance

1.3.1 Informatie en Relaties niveau A ​

Uitleg ​

Het criterium 1.3.1 van WCAG 2.2 richt zich op het waarborgen van de betekenisvolle relaties tussen elementen binnen een pagina, zodat gebruikers kunnen begrijpen hoe deze elementen zich tot elkaar verhouden. Dit geldt zowel voor visuele als voor andere representaties van de inhoud, bijvoorbeeld in HTML-structuren, maar ook wanneer inhoud met een hulpmiddel zoals een schermlezer wordt gepresenteerd. Dit criterium vereist dat de informatie die gepresenteerd wordt (zoals tekst, afbeeldingen, knoppen, formulieren) logisch en begrijpelijk is, zodat de gebruiker kan navigeren en de relaties tussen de elementen goed kan interpreteren, ongeacht het hulpmiddel dat ze gebruiken.

Dit houdt in dat de volgorde van elementen in de HTML correct moet zijn en dat visuele groeperingen van inhoud zoals lijsten, kopjes, knoppen en tabellen ook in de HTML gestructureerd moeten zijn. Als deze relaties niet duidelijk zijn, kunnen gebruikers moeite hebben met het begrijpen van de inhoud of de interactie ermee, wat een negatieve invloed heeft op de bruikbaarheid en toegankelijkheid van de site.

Voorbeeld ​

Stel je een formulier voor dat meerdere velden bevat, zoals naam, e-mail en een bericht. In plaats van de velden op willekeurige plaatsen te plaatsen zonder de juiste volgorde of verbanden, is het belangrijk om ze op een logische en goed gestructureerde manier te ordenen, bijvoorbeeld door gebruik te maken van HTML-formulieren die het formulier logisch en betekenisvol voor gebruikers presenteren.

Een ander voorbeeld zou kunnen zijn dat er een tabel is waarin de rijen en kolommen niet goed gelabeld zijn, waardoor het voor een gebruiker die een schermlezer gebruikt moeilijk te begrijpen is welke gegevens met elkaar in verband staan. Het is essentieel om de relaties tussen rijen en kolommen te markeren met de juiste HTML-elementen.

Voorbeeld van implementatie ​

Hier is een voorbeeld van een goed gestructureerd formulier met duidelijke relaties tussen de velden, door middel van het juiste gebruik van HTML en labels:

html
<form>
  <label for="name">Naam:</label>
  <input type="text" id="name" name="name" required />

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Bericht:</label>
  <textarea id="message" name="message" required></textarea>

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

In dit voorbeeld zijn de formulierinvoer-elementen gekoppeld aan de juiste labels via het for-attribuut, waardoor het duidelijk is welke invoervelden bij welk label horen. Dit is cruciaal voor schermlezers, omdat deze de relatie tussen de labels en de velden duidelijk kunnen maken aan de gebruiker.

Alternatieve benaderingen ​

  • Tabellen en formaten: Bij het gebruik van tabellen moet je de kopteksten van de rijen en kolommen correct markeren, zodat een gebruiker van een schermlezer kan begrijpen hoe de gegevens in de tabel zich tot elkaar verhouden.
  • Willekeurige volgorde vermijden: Het is belangrijk om een consistente en logische volgorde te behouden in de opmaak van de pagina. Dit helpt niet alleen bij de toegankelijkheid, maar zorgt er ook voor dat de pagina visueel logisch is voor alle gebruikers.

Belangrijke overwegingen ​

  • Visuele en semantische volgorde: De visuele volgorde van elementen op een pagina moet consistent zijn met de semantische volgorde in de HTML. Dit betekent bijvoorbeeld dat als een lijst visueel eerst wordt weergegeven, dit ook de logische volgorde moet zijn in de HTML-code.
  • Gebruik van ARIA-kenmerken: ARIA-kenmerken (Accessible Rich Internet Applications) kunnen worden gebruikt om de relaties tussen elementen verder te verduidelijken wanneer HTML-elementen niet voldoende zijn om de informatie en relaties over te brengen.
html
<div role="form">
  <label for="search">Zoekopdracht:</label>
  <input type="text" id="search" name="search" />
  <button type="submit">Zoeken</button>
</div>

In dit voorbeeld wordt het role="form" kenmerk gebruikt om het doel van de inhoud te verduidelijken, zodat schermlezers weten dat de gebruiker een formulier aan het invullen is, wat de interactie vergemakkelijkt.

Belangrijkste punten ​

  • Zorg ervoor dat de inhoud van de pagina logisch en betekenisvol is voor alle gebruikers, inclusief diegenen die hulpmiddelen zoals schermlezers gebruiken.
  • Gebruik de juiste HTML-structuur en -elementen om de relaties tussen de inhoud duidelijk te maken.
  • Vermijd willekeurige volgorde van elementen en zorg ervoor dat de visuele volgorde overeenkomt met de logische volgorde in de HTML.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Met WAVE kun je testen of de structuur van de pagina logisch is en of de relaties tussen de elementen goed zijn gedefinieerd. WAVE.
  • Axe Accessibility Checker: Deze tool helpt je te controleren of de HTML correct is gestructureerd en of de relaties tussen elementen begrijpelijk zijn. Axe.

Betekenis voor toegankelijkheid ​

Dit criterium is essentieel voor het waarborgen van de toegankelijkheid van digitale content, vooral voor mensen met een visuele beperking die hulpmiddelen zoals schermlezers gebruiken. Door de juiste relaties te implementeren, krijgen gebruikers een duidelijke en begrijpelijke structuur te zien, die hen helpt de informatie effectief te verwerken en ermee te interageren.

Referenties ​