UA-2131491-6

Leesvoer - oftewel ons blog

Checklist toegankelijke website

Alles wat je moet weten voor een toegankelijke website

Sta jij er wel eens bij stil hoe toegankelijk je website is? Weet je dat websites van Nederlandse (semi-)overheid verplicht toegankelijk moeten zijn en dat zij bijvoorbeeld een toegankelijkheidsverklaring op hun website moeten hebben? Waarschijnlijk niet. Ook ik stond er niet dagelijks bij stil. Veel meer dan altijd een alt-tekst toevoegen aan afbeeldingen deed ik eigenlijk niet. En dat, terwijl er veel meer bij een toegankelijke website komt kijken. Wat allemaal kun je hieronder lezen. En ja het is een heel verhaal, maar ik maakte een handige checklist.

Een praktijkvoorbeeld

Onlangs werd ik gecontacteerd door Tatjana Wehrmann en Sander Smale van Pilot Radio. Via via hadden ze begrepen dat ik websites bouw. Ze hadden een website voor hun digitale radiostation nodig. Dat leek me een leuke uitdaging, weer eens iets anders dan de websites die ik recent met veel plezier voor accommodaties mocht maken.

Het allerbelangrijkste: toegankelijkheid

De uitdaging bleek iets groter te zijn. Tatjana en Sander zijn namelijk blind/slechtziend. Het was dus uiterst belangrijk dat de website ook via een schermlezer toegankelijk zou zijn. En dat de toegevoegde functionaliteiten ook voor hen zouden werken. Het ging dus een stapje verder dan het toevoegen van alt-teksten aan afbeeldingen. Maar het was een uitdaging die ik graag aannam. Het resultaat is de Pilot Radio website.

Verschillende onderdelen

Toegankelijkheid heeft betrekking op de volgende onderdelen:

  • Afbeeldingen
  • Animatie & verandering
  • Audio & video
  • Formulieren
  • Geo-informatie
  • Navigatie
  • PDF-bestanden
  • Tabellen
  • Techniek & code
  • Tekst
  • Vormgeving

Afbeeldingen

Schermlezers lezen alles voor wat op een website staat. Ook afbeeldingen. Althans, wanneer de alt-tekst is ingevuld. Die alt-tekst hoort namelijk te beschrijven wat op een afbeelding te zien is. Nu werk ik met Divi en tijdens het bouwen van deze website kwam ik er achter dat Divi de in de mediabibliotheek opgegeven alt-teksten niet altijd overneemt! Wel in fotoalbums, maar niet in andere modules. Daar zul je de alt-teksten nogmaals handmatig onder Attributes in de Advance tab moeten toevoegen. En zelfs dat blijkt niet altijd te werken! Vandaar dat ik op de Podcast pagina ook een tekstlink toevoegde om de abonneerknoppen ook voor schermlezers goed leesbaar te maken.

Daarnaast kijkt ook Google naar alt-teksten. Zo kunnen mensen dus ook via afbeeldingen op je website terecht komen.

Animatie & verandering

Animatie op een website kan helpen om ergens de aandacht op te vestigen of om iets goed uit te leggen. Maar flitsende elementen kunnen bij bepaalde mensen ook gezondheidsklachten veroorzaken zoals toevallen. Gebruik deze daarom nooit. Andere animaties moeten altijd handmatig stopgezet kunnen worden. Een slideshow of fotocarrousel is ook een vorm van animatie en hiervoor geldt de eis van het kunnen stopzetten dus ook.

Voor flitsen geldt overigens de Three Flashes or Below Threshold, met andere woorden, niet meer dan 3 flitsen per seconde.

Audio & video

Ook hier geldt dat je altijd alternatieven toe moet voegen voor gebruikers die beelden en/of geluiden niet kunnen zien of horen. Ook geldt dat de audio en/of video niet automatisch begint te spelen en dat bezoekers het fragment altijd moet kunnen stopzetten.

Wat kun je doen:

  • Zorg voor een goed tekstueel alternatief. Dit is te vergelijken met de alt-teksten bij afbeeldingen. Audiodescriptie en ondertiteling is prima te doen voor korte fragmenten. Wanneer je gaat ondertitelen doe je dat niet alleen voor de gesproken tekst, maar beschrijf je ook andere dingen die te horen zijn. Denk aan het overgaan van een telefoon, gelach en wanneer de spreker niet in beeld is, wie de spreker is.
  • Heb je toch een lang onderwerp? Bedenk of een beknopte versie niet een stuk gebruiksvriendelijker zou zijn.

Formulieren

Wist je dat veel mensen niet hun muis, maar hun toetsenbord gebruiken om een formulier in te vullen? Ik ben zo’n persoon. En ik verwacht dan ook dat ik via mijn Tab-toets van invulveld naar invulveld kan gaan en dat ik via mijn spatiebalk iets kan aan- of juist uitvinken. Ook dit is een onderdeel van een toegankelijke website.

Maar ook het goed aangeven van foutmeldingen is belangrijk. Maakt iemand een fout bij het invullen, maak dan met tekst duidelijk waar de fout zit en wat de fout is. Het rood maken van een kader heeft geen zin want de kleurverandering wordt niet door iedereen gezien en ook schermlezers kunnen hier niets mee.

Geo-informatie

Veel websites hebben tegenwoordig een kaart om de plek aan te geven waar het bedrijf zich bevindt. Kaarten zijn over het algemeen niet toegankelijk voor schermlezers, maar je kunt wel een alternatief aanbieden. Een eenvoudige oplossing is om ook je adresgegevens op de pagina op te nemen.

Navigatie

Ik schreef al eens een blog Website navigatie is meer dan alleen het menu. Want ook links, kruimelpaden en call-to-action knoppen zijn onderdeel van de navigatie. Voor wat betreft links zal uit de tekst duidelijk moeten blijken waar de link naar toe gaat. “Klik hier” is dus een voorbeeld van hoe het niet moet. Niet alleen voor websitebezoekers, maar ook voor Google. Want zoekmachines gebruiken de linkteksten om beter te begrijpen waar de pagina naar welke gelinkt wordt, over gaat.

Je hoofdmenu wil je op alle pagina’s hetzelfde hebben. Zo raken bezoekers niet in de war. En houd rekening met het feit dat niet iedereen via de homepage op jouw pagina terechtkomt. Zorg er voor dat men altijd weet waar men zich in de website bevindt.

Wanneer een afbeelding ook een link is, zal uit de alt-tekst moeten blijken waar de bezoeker terecht komt wanneer hij of zij op de afbeelding klikt.

PDF-bestanden

Ik raadde het gebruik van PDF-bestanden op websites eigenlijk altijd al af. Waarom zou je PDF-bestanden gebruiken wanneer je over het algemeen ook alles wel op een webpagina kan plaatsen? Waarom zou je bezoekers van je website weghalen door ze in een programma een PDF te laten openen? Waarom zou je bezoekers langer laten wachten; een PDF-bestand openen duurt vaak langer dan het openen van een webpagina. En denk ook eens aan het feit dat meer dan 50% van de websitebezoekers een website tegenwoordig niet meer op een desktop computer bekijken. Een PDF bekijken op een telefoonscherm is geen pretje!

Mocht je toch een PDF gebruiken dan gelden hier eigenlijk dezelfde eisen voor als voor toegankelijke websites; een goed contrast, alt-teksten bij afbeeldingen, goed gebruik van links, eenvoudig invulbare formulieren, etc.

Tabellen

Tabellen zijn over het algemeen goed toegankelijk door het gebruik van de juiste code voor kolommen en voor rijen. Wel kan het handig zijn om tabellen te voorzien van een bijschrift en van een samenvatting. Op die manier hoeft een bezoeker niet eerst de gehele tabel tot zich proberen te nemen, voordat de bedoeling van de tabel duidelijk is.

Houd er altijd rekening mee dat een tabel ook op het kleine scherm van een mobiele telefoon goed leesbaar moet zijn. Wanneer je te veel kolommen gebruikt is dit zelfs wanneer de tabel responsive is, vaak niet het geval. Probeer dan de tabel anders op te bouwen.

Techniek & code

Een website bestaat uit HTML-code. Zo zal voor een paragraaf de code <p> gebruikt worden en voor een kop een <h1> tot en met <h6>. De H1 code gebruik je maar één keer per pagina en wel voor de titel van de pagina. Zo weten schermlezers en Google waar de pagina over gaat. Voor tussenkopjes gebruik dan de H2 code.

Ik raadde iedereen al aan om regelmatig tussenkopjes te gebruiken. Dit om een webpagina beter leesbaar te maken. Van Tatjana leerde ik dat zij net zoals ziende bezoekers een website scant met behulp van tussenkopjes.

Wil je meer lezen over HTML? En er mee spelen? Ga dan naar de w3schools webpagina over HTML. W3schools is voor mij het naslagwerk wanneer ik wil weten hoe ik iets in HTML kan en moet doen. Want HTML is eigenlijk gewoon een taal, waar net zoals in andere talen, regels voor gelden.

Toevallig verscheen afgelopen dinsdag een Buro RaDer Tips & trick waar je HTML-code gebruikt om superscript en subscript karakters toe te voegen.

Tekst

Teksten op een website hebben een bepaalde structuur; koppen, paragrafen, citaten, opsommingen, etc. Die structuur wordt aangebracht door de HTML-code van de website.

Voor het benadrukken van een tekstgedeelte wordt vaak gebruik gemaakt van vette tekst. Dit werkt prima voor mensen die de website voor zich zien. Maar schermlezers negeren deze code <b>, net zoals de code <i> voor cursieve teksten. Gebruik daarom in plaats van <b> de code <strong> en de code <em> in plaats van <i>.

Kies sowieso een goed leesbaar lettertype. Sinds 2020 is er een speciaal, nieuw lettertype voor mensen met een visuele beperking: Luciole.

Lees meer over het lettertype Luciole in mijn Buro RaDer Tips & tricks Een mooi lettertype voor visueel beperkte mensen.

Vormgeving

Ook hier zijn enkele zaken om rekening mee te houden om een website toegankelijk te maken. Wees bijvoorbeeld consequent. Toon menu-items op alle pagina’s in dezelfde volgorde en op dezelfde plaats. En zorg voor een goed contrast tussen de achtergrond en de tekst. Wanneer je tekst in een foto toont, kies dan een foto waar je de tekst in bijvoorbeeld een stuk blauwe lucht kan tonen.

Testen, testen en nog eens testen

Tijdens de ontwikkeling van de website voor Pilot Radio testte ik heel wat af. Zo wilden Tatjana en Sander kunnen chatten met luisteraars. De door mij geïnstalleerde Live Chat plugin van Tidio bleek voor hen niet te werken. De chatfunctie was zichtbaar, maar de chats zelf niet, omdat deze in een pop-up scherm openden welke niet voor de schermlezer toegankelijk was.

Uiteindelijke installeerde ik de Click to Chat (for WhatsApp) plugin welke probleemloos toegankelijk is.

Hetzelfde probleem van een niet voor schermlezers zichtbaar pop-up scherm geldt voor de Podcast Subscribe Buttons plugin. Uiteindelijk maakte ik zelf abonneerknoppen voor de podcast.

Ervaring van anderen

Tijdens het werken aan deze website was Marrit Postma van Woordprikkels bezig met het toevoegen van een kalenderfunctionaliteit aan haar website. Ook voor Marrit is toegankelijkheid belangrijk en ik weet daarom nu dat de Calendly kalendertool goed toegankelijk is.

Handige Toegankelijke website checklist

Schrijf je in voor mijn nieuwsbrief en ontvang mijn handige Toegankelijke website checklist. Ben je al geabonneerd op mijn nieuwsbrief en je wilt ook de nieuwsbrief ontvangen? Stuur me dan even een mailtje.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *