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.

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

Mensen die blind zijn, gebruiken vaak een schermlezer: 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.

Zo doe je het

Stap 1, 2, 5 en 8 gaan over wat je zelf op de website zet: afbeeldingen, video’s en tekst. De andere stappen zijn vooral werk voor je webbouwer, maar je kunt ze wel nalopen.

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. Een schema krijgt een korte alt-tekst, en de stappen erin zet je er ook als genummerde lijst onder. De Alt-tekst hulp stelt een paar vragen en zet zo een alt-tekst met je op.
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, zodat een schermlezer van kop naar kop kan springen. De Structuurcheck toont welke koppen er 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, en dat scheelt typen en onthouden.
5. Gebruik niet alleen kleur (1.4.1, A). “Verplichte velden zijn rood” werkt niet voor wie kleurenblind is, dus 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). De Kleurenbril rekent de verhouding voor twee kleuren uit.
7. Laat tekst groter maken (1.4.4, AA). Bij 200% vergroting werkt alles nog. En op een scherm van 1280 pixels breed kun je inzoomen tot 400% zonder 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, want sommige mensen hebben hun tablet vast op hun rolstoel, in één stand.

Let op

• Controleer per plek of een alt-tekst klopt. 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.
• Kijk automatische ondertitels na. Er staan vaak fouten in. Ontbreekt op één plek het woord “niet”, dan staat er het tegenovergestelde van wat er gezegd wordt. Gebruik ze dus als begin en verbeter ze zelf.
• Zet informatie liever op een webpagina dan in een pdf. De eisen van WCAG kun je ook toepassen op documenten, maar een pdf toegankelijk maken is voor veel organisaties lastig. Moet het toch een document zijn, lees dan Toegankelijke documenten maken.

Meer weten

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