Opmaak pagina

Koppen

Om de toegankelijkheid van een webpagina te verbeteren is het van belang dat de pagina er niet alleen overzichtelijk en gestructureerd uitziet, maar dat dat ook in de code terugkomt.  Uit onderzoek blijkt dat tussenkoppen vaak vet of schuingedrukt zijn. Dit valt visueel wel op, voor mensen die goed kunnen zien. Maar voor blinden of slechtzienden die een scerhmlezer gebruiken, zijn deze opmaakkenmerken niet bruikbaar. Als zij een indruk willen krijgen van de inhoud van de webpagina, kan de schermlezer geen overzicht maken van de content. Het herkent vet- of schuingemaakte woorden niet als tussenkoppen. Een ander nadeel kan zijn dat tekst tussen <strong>  met extra nadruk wordt voorgelezen door voorleessoftware en dat is ook niet de bedoeling.

Gebruik de kopstijlen van HTML: <h1> (kopniveau 1) t/m <h6> (kopniveau 6). Hoe lager het cijfer, hoe belangrijker de kop in de hiërarchie.  Elke pagina moet een  <h1> kopniveau hebben en elke kop daarna minimaal een <h2>. Bij voorkeur worden er geen kopniveaus overgeslagen (dus ga je niet van een <h1> naar een <h4>). Hou er rekening mee dat gebruikers van schermleessoftware op kopniveau kunnen zoeken om een pagina te scannen, dus dat het verwarrend werkt als er ineens een niveau wordt overgeslagen.

Een kop is ook alleen echt een kop wanneer er inhoud onder staat. Een tekst die dikgedrukt en groot op de pagina getoond moet worden zonder inhoud geldt niet als kop, dus moet ook niet met een <h> worden aangegeven. Eventuele opmaak kan gedaan worden in de CSS.

Helderheid en eenvoud

Schrijf duidelijke en eenvoudige zinnen. Vermijd jargon en ingewikkelde zinsconstructies. Dit maakt je tekst toegankelijkher voor mensen met verschillende leesniveaus.

Taalinstellingen

• Zorg ervoor dat de taalinstelling van de pagina in de juiste taal is ingesteld. Gebruikers van voorleessoftware zijn je hier erg dankbaar voor.
• Als je een stukje tekst in een andere taal gebruikt (bijvoorbeeld een Engelse quote op een Nederlandstalige pagina) dan geef je in de teksteditor aan om welke taal het gaat. Zo leest de schermlezer deze tekst in de juiste taal voor.

Lijsten en opsommingen

Soms worden opsommingen gekopieerd vanuit Word of een ander document. Als je de informatie dan in het CMS plakt, bestaat het risico dat de juiste opmaak verloren gaat. Het gevolg: een lijst waarin de streepjes of cijfers onderdeel uitmaken van de tekstregels zelf. Een schermlezer herkent dit niet als opsommingslijst met een specifiek aantal regels. Het is voor een blinde of slechtziende gebruiker dan onduidelijk uit hoeveel items een opsomming bestaat. 

Ook menu-items die vaak naast elkaar bovenaan de pagina staan, kunnen opgemaakt worden als lijst. Schermlezers krijgen zo informatie over het aantal menu-items.

Tabellen

Een tabel bestaat uit rijen, kolommen en cellen met inhoud. Als je geen koppen boven de kolommen of voor de rijen zet, dan ontbreekt de structuur en leest de schermlezer de inhoud op een onlogische manier voor.  

Maak tabellen niet te ingewikkeld. Bedenk goed hoe je data zo duidelijk mogelijk kunt weergeven. Dit kan bijvoorbeeld betekenen dat je een complexe tabel opsplitst in meerdere eenvoudige tabellen. Of misschien is het wel duidelijker om de informatie niet in een tabel, maar in een opsomming te zetten. Markeer de bovenste cellen van de kolommen of de eerste cellen van de rijen als kopcellen. Dan begrijpt de schermlezer de structuur van de tabel en wordt de inhoud op een duidelijke en logische manier voorgelezen.

Voorkom het gebruik van alleen kleur om informatie over te brengen. Denk aan groene tekst die aangeeft dat een datum nog beschikbaar is en rode tekst voor data die niet meer beschikbaar zijn. Zorg altijd voor minstens één andere manier om te onderscheiden wat bepaalde informatie betekent. Zet bijvoorbeeld een groen vinkje bij beschikbare data en een rood kruisje bij data die niet meer beschikbaar zijn. Zo maak je gebruik van kleur én vorm.

Het heeft de voorkeur om geen geneste tabellen te presenteren. Deze zijn lastig te begrijpen. Splits een ingewikkelde tabel bij voorkeur op in meerdere eenvoudigere tabellen.

Gebruik geen tabel voor de opmaak van een pagina!

Knoppen

• Zorg ervoor dat de tekst die op de knop staat, terugkomt in de toegankelijke naam van de knop. Dit is belangrijk voor gebruikers van spraaksoftware. Zorg er ook voor dat de tekst het doel van de actie beschrijft.  Bijvoorbeeld 'Verzend het formulier' of 'Sluit menu'. Gebruikers weten dan wat er gebeurt als ze op de knop drukken.
• Knoppen moeten niet alleen met de muis, maar ook met het toetsenbord bereikbaar zijn. 
• Knoppen moet en met een entertoets óf met de spatiebalk geactiveerd kunnen worden.
• Knoppen moeten voorzien zijn van een duidelijke focusrand rond de knop. Dit kader rond de knop (focusindicator) moet voldoende contrast hebben met de knopkleur én met de achtergrondkleur van de pagina, minimaal 3:1 met de achtergrond.