Waarneembaar: niemand mist informatie

Wat is het

Waarneembaar is het eerste van de vier principes van WCAG. Informatie moet zo op je website staan dat iedereen hem kan waarnemen. Wie een afbeelding niet ziet, krijgt een tekst. Wie een video niet hoort, leest ondertitels. Wie slecht ziet, kan de tekst groter maken.

Het heeft vier richtlijnen: tekst bij beeld (1.1), video en geluid (1.2), een aanpasbare opbouw (1.3) en inhoud die goed te onderscheiden is (1.4). Daaronder vallen 20 succescriteria op niveau A en AA: eisen waarop je een website kunt testen. Hieronder staan de belangrijkste, met hun nummer in WCAG 2.2.

Waarom het ertoe doet

Niet iedereen ziet of hoort goed. Soms voor altijd, soms even: in de felle zon of in een drukke trein. Mensen die blind zijn, gebruiken vaak een schermlezer. Dat is software die de pagina voorleest. Bij een afbeelding leest die de tekst voor die jij erbij hebt gezet.

Sommige mensen die slecht zien, zoomen flink in of gebruiken een vergrootprogramma. Past de tekst zich aan de breedte van het scherm aan, dan lezen ze gewoon van boven naar beneden. Zo niet, dan moeten ze bij elke regel heen en weer schuiven en raken ze makkelijk de draad kwijt. Voor je cliënt kan dat het verschil zijn tussen zelf lezen en laten voorlezen.

Zo doe je het

1. Geef elke afbeelding een tekstalternatief (1.1.1, niveau A). Deze alt-tekst zegt wat de afbeelding betekent, niet precies hoe hij eruitziet. Bij een foto van de ingang van het wijkteam: “Ingang met blauwe deur naast de bibliotheek”. Woorden als “afbeelding van” zijn niet nodig, want dat zegt een schermlezer al. Is een afbeelding alleen versiering? Laat de alt-tekst dan leeg. Twijfel je, dan helpt de Alt-tekst hulp.
2. Ondertitel video’s (1.2.2, A). Zend je live uit, zoals een webinar voor mantelzorgers? Zorg dan voor live ondertitels (1.2.4, AA). Wat in een opgenomen video alleen in beeld te zien is, beschrijf je met een extra gesproken tekst (1.2.5, AA). Heb je alleen geluid, zoals een podcast? Zet er dan een uitgeschreven tekst bij (1.2.1, A).
3. Bouw de structuur in de code (1.3.1, A). Gebruik echte koppen en lijsten, niet alleen dikke letters. Een schermlezer kan dan van kop naar kop springen. Met de Structuurcheck zie je welke koppen er echt in de code staan.
4. Laat de browser helpen bij formulieren (1.3.5, AA). Geef velden als naam, e-mailadres en telefoonnummer een vaste code. De browser kan ze dan zelf invullen. Dat scheelt typen en onthouden.
5. Gebruik niet alleen kleur (1.4.1, A). “Verplichte velden zijn rood” werkt niet voor wie kleurenblind is. Zet er ook een woord of teken bij. Hetzelfde geldt voor een aanwijzing die alleen op vorm of plek leunt, zoals “klik op het rondje rechts” (1.3.3, A). Met de Kleurenbril zie je ongeveer hoe iemand die kleurenblind is je pagina ziet.
6. Zorg voor genoeg contrast (1.4.3, AA). Contrast is het verschil in licht en donker tussen tekst en achtergrond. Gewone tekst heeft minstens 4,5:1. Grote tekst (18 punt, of 14 punt vet) minstens 3:1. Dat geldt ook voor de voorbeeldtekst in een leeg invulveld. De rand van een invulveld en iconen die iets betekenen, hebben minstens 3:1 (1.4.11, AA). Met de Contrastcheck meet je het zelf.
7. Laat tekst groter maken (1.4.4, AA). Bij 200% vergroting werkt alles nog. En wie op een scherm van 1280 pixels breed inzoomt tot 400%, hoeft niet zijwaarts te scrollen (1.4.10, AA). Zet iemand zelf meer ruimte tussen regels, letters en woorden, dan valt er geen tekst weg (1.4.12, AA).
8. Zet tekst niet in een plaatje (1.4.5, AA). Bij een ingescande folder kan niemand de letters, de regelafstand of de kleuren aanpassen. Een logo mag wel.
9. Laat de pagina meedraaien (1.3.4, AA). Een pagina werkt rechtop en dwars, op een telefoon en op een tablet. Sommige mensen hebben hun tablet vast op hun rolstoel, in één stand.

Zo ziet het eruit in de praktijk

Een wijkteam zet een nieuwe pagina online over hulp bij geldzaken. Er staat een ingescande folder op, een schema met drie gekleurde stappen en een uitlegvideo met automatische ondertitels. Een ambulant hulpverlener stuurt de link naar een cliënt die slecht ziet. Die belt terug: de folder wordt wazig als ze inzoomt, en het schema snapt ze niet.

Twee collega’s lopen de pagina samen na. De tekst uit de folder zetten ze als gewone tekst op de pagina. Het schema krijgt een korte alt-tekst, en de drie stappen staan er nu ook onder als genummerde lijst. Met de Kleurenbril zien ze dat twee stappen voor iemand die kleurenblind is bijna dezelfde kleur hebben, dus elke stap krijgt ook een nummer. De Contrastcheck laat zien dat de lichtgrijze tekst op de groene balk te zwak is. En in de ondertitels ontbreekt op één plek het woord “niet”, waardoor er het tegenovergestelde staat van wat er gezegd wordt. Dat verbeteren ze met de hand.

Wat zeg je tegen de collega die het schema maakte? Bijvoorbeeld: “Het schema is duidelijk als je het goed kunt zien. Zet de stappen er ook als tekst onder, dan komt het bij iedereen aan.” En tegen de cliënt: “Dank je dat je belde. Door jou is de pagina nu beter te lezen.”

Let op

• Een alt-tekst hangt af van de plek. Dezelfde foto kan op de ene pagina informatie geven en op de andere alleen versiering zijn. Een testprogramma ziet of een alt-tekst ontbreekt, niet of hij klopt.
• Automatische ondertitels zijn niet genoeg, tenzij je hebt gecontroleerd dat ze helemaal kloppen. Er staan vaak fouten in. Gebruik ze als begin en verbeter ze zelf.
• Denk ook aan pdf’s. De eisen van WCAG kun je ook toepassen op documenten. Maar een pdf toegankelijk maken is voor veel organisaties lastig. Zet informatie daarom liever op een gewone webpagina.

Meer weten

• De andere principes: bedienbaar, begrijpelijk en robuust.
• Je website toegankelijk maken: de stappen voor je organisatie.
• Checklist toegankelijke website