Informatie en relatie

Voorbeelden van visuele en auditieve cues

• Koppen in een groter, vet lettertype.
• Lijstitems met opsommingstekens en eventueel inspringingen.
• Tabellen: Gebruik van rijen en kolommen om gegevens logisch te groeperen.
• Formuliervelden: Groeperen met gedeelde labels om relaties duidelijk te maken, waarbij elk veld een specifiek label heeft.
• Kleurgebruik: Gebruik van kleur om een actief menu-item aan te geven.
• Woorden met speciale status aangeduid door verandering in lettertype, vetgedrukt, cursief of onderstreept.
• Geluidssignalen: Bijvoorbeeld een beltoon om aan te geven dat je mag beginnen met het antwoord op een vraag.

Deze cues moeten programmeerbaar worden vastgelegd of beschikbaar zijn in tekstvorm, zodat alle gebruikers toegang hebben tot dezelfde informatie.

Koppen en hiërarchie

Gebruik HTML-koppen correct

• Gebruik <h1> tot <h6> om de structuur van de pagina logisch op te bouwen.
• Begin met een <h1> voor de hoofdtitel van de pagina.
• Gebruik <h2> tot <h6> voor subsecties in logische volgorde.

Als tekst eruitziet als een kopje, moet dit ook in de HTML een kopje (heading) zijn en geen vetgedrukte tekst. Het kopjesniveau wordt voorgelezen door schermlezers.

Vermijd hiërarchiefouten

Sla geen niveaus over (bijvoorbeeld niet van <h2> naar <h4> zonder een <h3> ertussen).

Lijsten

Gebruik de juiste lijsttypen

• Ongenummerde lijsten: Gebruik <ul>
• Genummerde lijsten: Gebruik <ol>

Staan gegevens in een lijst, gebruik dan ook in de HTML een lijst (<ul> of <ol>) en niet alleen streepjes voor de items. Een schermlezer leest dan voor dat het een lijst is, hoeveel items er zijn en bij welk item de lezer zich bevindt.

Controleer geneste lijsten: 

Zorg ervoor dat geneste lijsten correct zijn opgebouwd met <ul> of <ol> binnen een lijstitem.

Tabellen

Wat is een toegankelijke tabel?

Een toegankelijke tabel is een tabel die iedereen, ook mensen die een schermlezer gebruiken, goed kan begrijpen. Een schermlezer is een hulpmiddel dat teksten en structuren op een webpagina hardop voorleest voor mensen met een visuele beperking. Om dit goed te laten werken, moet een tabel duidelijk aangeven:

1. Waar de koppen staan (bijvoorbeeld dagen van de week).
2. Waar de rijen over gaan (bijvoorbeeld tijdvakken).
3. Wat er in elke cel staat (bijvoorbeeld of iets open of gesloten is).

Hoe werken tabellen met een schermlezer?

Een schermlezer leest een tabel rij voor rij en cel voor cel. Hij vertelt:

• De kolomkop: Bijvoorbeeld "Maandag".
• De rijkop: Bijvoorbeeld "09:00 – 11:00".
• De inhoud van de cel: Bijvoorbeeld "Gesloten".

Dit helpt de gebruiker om te begrijpen hoe alle informatie bij elkaar hoort.

Een voorbeeldtabel

Stel, je hebt deze tabel over openingstijden:

Een schermlezer zou dit zo voorlezen:

• Tijd: 09:00 – 11:00, Maandag: Gesloten.
• Tijd: 09:00 – 11:00, Dinsdag: Open.
• Tijd: 09:00 – 11:00, Woensdag: Open.

Hoe maak je een tabel goed toegankelijk?

Markeer kolom- en rijkoppen met <th> en gebruik scope="col" of scope="row" om aan te geven wat ze beschrijven. ( dit wordt automatisch gedaan)

Als informatie in een tabel staat, moet deze begrijpbaar zijn voor schermlezergebruikers door het gebruik van table headings (<th>). De table heading wordt voorgelezen bij de waarde van een bijbehorende tabelcel.

Voeg optioneel een <caption> toe 

Beschrijf de inhoud van de tabel voor extra context.

Citaten

• Gebruik <blockquote> voor een alinea met een vrijstaand citaat.
• Gebruik voor inline citaten gewone tekst zonder <blockquote>, "Gebruik hiervoor aanhalingstekens."
   

Gebruik van strong en em

• <strong> betekent dat een stukje tekst erg belangrijk is. Dit wordt meestal vetgedrukt weergegeven.
• <em> betekent dat er nadruk op de tekst ligt, alsof je het extra duidelijk wilt maken. Dit wordt vaak schuin (cursief) weergegeven.

Deze speciale codes helpen niet alleen om tekst anders te laten lijken, maar maken ook duidelijk voor hulpmiddelen, zoals schermlezers, dat bepaalde woorden belangrijk zijn of benadrukt moeten worden.