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 gratis checklist.

Een praktijkvoorbeeld

Ik werd eens 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 was de Pilot Radio website. Deze website is momenteel off-line; Tatjana en Sander concentreren zich momenteel meer op hun toegankelijkheidsblogs.

Website Pilot Radio

Verschillende onderdelen

Voor een toegankelijke website zul je naar de volgende onderdelen moeten kijken:

  • 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 het thema Divi van Elegant Themes en tijdens het bouwen van deze website kwam ik er achter dat Divi de in de mediabibliotheek opgegeven alt-teksten niet altijd overnam! Wel in fotoalbums, maar niet in andere modules. Daar moest ik de alt-teksten nogmaals handmatig onder Attributes in de Advance tab moeten toevoegen. En zelfs dat bleek 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.

Zelfgemaakte podcast abonneerknoppen

Daarnaast kijkt ook Google naar alt-teksten. Zo kunnen mensen dus ook via afbeeldingen op je website terecht komen. Afbeeldingen vormen dus ook een onderdeel van zoekmachine optimalisatie van websites!

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 door de bezoeker 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 alleen 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!

PDF lezen op mobiele telefoon

PDF lezen op mobiele telefoon is vaak lastig

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 of het gebruik van een tabel te voorkomen. Zo kunnen tarieven voor vakantie accommodaties ook prima als regels tekst weergegeven worden.

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.

Een Buro RaDer Tips & tricks over het gebruik van HTML-code 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 sommige 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. Deze Buro RaDer website gebruikt dit lettertype.

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.

Voorbeeld goed en slecht contrast webpagina

Wil je zelf het contrast van kleuren testen? Lees dan snel de Buro RaDer Tips & tricks Online contrast van website testen.

Testen, testen en nog eens testen

Tijdens de ontwikkeling van de website voor Pilot Radio testte ik heel wat af om een toegankelijke website te verkrijgen. 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 checklist toegankelijke website

Zoals ik in de inleiding al schreef, ik maakte een gratis handige checklist waarmee je kunt controleren of jouw website wel goed toegankelijk is. Download nu de checklist toegankelijke website en ga snel aan de slag.

Met regelmaat plaats ik Blogs en korte Tips & tricks. Wil je mijn tips en blogs niet missen? Schrijf je dan in voor mijn nieuwsbrief.

0 reacties

Een reactie versturen

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

Verder lezen

Ontvang waardevolle Tips & tricks over webdesign

Wij bouwen niet alleen goede websites, maar regelmatig publiceert Margriet nuttige Tips & tricks en waardevolle blogs over webdesign.

Wil je deze niet missen? Schrijf je dan snel in.