07 | Digitale Toegankelijkheid

De afgelopen jaren heb ik mij verdiept in digitale toegankelijkheid. Een aantal van mijn klanten hebben een officiële audit van hun WordPress website laten doen. In veel gevallen was dit nog lang niet in orde maar op veel punten wel makkelijk aan te passen.

In dit artikel vertel ik welke punten het meeste voorkomen en hoe je het kan aanpassen. Wat verder naar onderen staat een video zodat je ook een beeld kan krijgen wat ik allemaal vertel.

Geschatte leestijd: 13 minuten

Wat is digitale toegankelijkheid

Digitale toegankelijkheid houdt in “dat digitale diensten en producten zo zijn gebouwd en ingericht dat iedereen ze in principe kan gebruiken – ook mensen met een functiebeperking”. “Opgeteld hebben meer dan 2,3 miljoen zelfstandig thuiswonende Nederlanders met een beperking er baat bij als een website of mobiele applicatie rekening houdt met digitale toegankelijkheid.” – bron: rijksoverheid.nl

Om te beginnen alvast een aantal feiten:

• WordPress voldoet nog niet aan de ATAG 2.0, maar ze doen hun best om daar te komen.
• Het meerendeel van Nederlandse overheids websites voldoet niet aan de richtlijnen. Download de nulmeting uit 2019 op de website van de tweede kamer>>
• Als eindgebruiker ben je soms afhankelijk van wat developers voor je bouwen (skiplink, contrast, lettergrootte). Maar hiermee verleg je niet je verantwoordelijkheid.
• In veel gevallen heb je een thema waarbij je zelf heel wat kan aanpassen.

[embedyt] https://www.youtube.com/watch?v=FX2byuMZP08[/embedyt]

Met een toegankelijke website neem je de verantwoordelijkheid om je website toegankelijk te maken voor iedereen. Ongeacht of men nu een beperking heeft of niet.

Wil je hier meer over wil leren en je steentje wil bijdragen, dan is dit een moment om aan te haken. Er is veel informatie beschikbaar op de website week van de toegankelijkheid.nl en tips over wat je zelf kan doen. Dat is dit jaar van 3-7 oktober 2023.

Toegankelijkheid gaat boven ontwerp

Een website gaat over informeren, en vormgeving zou daaraan ondergeschikt moeten zijn. Dit hoeft je niet te weerhouden om een visueel aantrekkelijke website neer te zetten. Het kan in sommige gevallen wel betekenen dat je net een andere kleur moet kiezen, of dat knoppen iets groter in beeld moeten komen. Of dat je niet een heel fancy formulier kan tonen met inline teksten. Denk ook aan mensen die kleurenblind zijn, dyslexie of gezichtsproblemen hebben. Of wat als je niet zo’n vaste hand hebt en je moet op een klein knopje klikken. Voorbeelden te over.

Meest voorkomende fouten/verbeterpunten:

1. Paginastructuur (opbouw van de tekst). HTML structuur van de tekst (indeling met H1, H2, H3 kopjes en paragrafen)
2. Menu gebruik met muis en toetsenbord toegankelijk. Website te doorlopen met gebruik van de TAB toets (skiplink voor het menu zetten)
3. Pdf’s en andere kantoorbestanden toegankelijk maken
4. Formulieren (opbouw, hulpteksten etc.)
5. Helderheid en Kleurcontrast (leesbaarheid)
6. Aria label, o.a. op zoekfunctie, skiplink om het menu over te slaan (bijvoorbeeld)
7. Alt teksten alleen op plaatjes die iets toevoegen aan de context anders leeg laten
8. Video’s met ondertiteling aanbieden
9. Linkjes moeten duidelijk in context zijn, dus weten waar je naar toe gaat door titel mee te geven
10. Social media iconen voorzien van titel en alt tekst
11. Begrijpelijke en eenvoudige teksten. Korte zinnen, makkelijk te begrijpen.

Start met je website te scannen op PageSpeed Insights. Deze geeft binnen een paar minuten feedback op onder andere toegankelijkheid. En installeer de plugin WP Tota11y. Deze plugin toont aan de frontend alle probleemgebieden.

Het structureren van je website zie je ook terug in een goede menu opbouw en een logische plek voor knoppen en contactinformatie en de call-to-action. De layout van je pagina is daarom ook belangrijk, zorg dan mensen snel kunnen vinden wat ze zoeken.

Sommige menu’s bevatten zoveel menu items, en dan ook nog onderverdelingen dat je door het bomen het bos niet meer ziet. Versimpel je menu en de keuzes die je bezoeker moet maken.

Muis en toetsenbord toegankelijk

Bezoekers die niet met de muis kunnen navigeren, bedienen het web meestal door te navigeren met het toetsenbord. Zij doen dit met de tab toets. Door tab en shift + tab te gebruiken kan men naar de volgende of vorige link of knop op de pagina gaan. Je wilt snel kunnen skippen naar een volgend blok ipv eerst door een hele rij menu items te moeten tabben. In het Yootheme thema zijn sinds juni 2023 skiplinks ingebouwd. Probeer het zelf door je cursor achter je url te zetten. En begin met tabben. Kom je een skiplink tegen? Ga eens naar een volgende pagina op deze manier, moet je eerst weer alle menu items bij langs of kun je het menu skippen?

Meer lezen over skip-links in WordPress

Pdf’s en andere kantoorbestanden toegankelijk maken

Van veel pdf’s kan je afvragen of het ook niet als tekst op je website kan. Een pdf is vrij lastig te lezen op een mobiel en geeft soms gedoe met downloaden en terugvinden. Maar heb je documenten die je echt als document wil plaatsen op je website dan moeten deze toegankelijk zijn. Een document moet aan de zelfde eisen voldoen als een website. Dus ook hier letten op structuur, leesbaarheid, contrast, alt teksten, duidelijke linkjes etc.

Lees op de website van digitale overheid hun tips>>

Formulieren

Soms zie je van die supermooie formulieren met voorbeeldteksten in de velden. Zodra je gaat typen verdwijnt deze tekst, en vaak ook nog in heel lichtgrijs op wit, niet heel handig, wel mooi. Ik begrijp dat dit vaak een discussiepunt is. Deze manier van vormgeven is mooier en het formulier heeft minder ruimte nodig waardoor je ook nog meer info er onder kan laten zien.

Maar, als je het helemaal volgens de richtlijnen wil doen, dan moet de label tekst gekoppeld zijn aan het veld zodat deze opgelezen kan worden met een screenreader. Ook moet de instructies en foutmeldingen duidelijk in beeld komen. Hoe vaak heb je zelf al gehad dat je een heel formulier hebt ingevuld en deze niet verzonden wordt? Vaak staat dat ergens buiten beeld dat je iets vergeten bent in te vullen.

Meer informatie over toegankelijke formulieren >>

Helderheid en kleurcontrast

Heb je bewust nagedacht over de kleuren en de kleurvlakken die je gebruikt? Voor kleurenblinden is het van belang dat er genoeg helderheid en contrast is tussen de tekst en de ondergrond.

Lichtgrijs op grijs is bijvoorbeeld niet aan te raden. Een simpele test is je pagina eens om te zetten naar grijswaarden. En check je website op verschillende schermen, is de tekst dan op alle schermen goed te lezen?  Hier lees je meer over kleuren in webpagina’s >>

Zorg dat het contrast tussen de tekst en de achtergrond groot genoeg is. En dat het lettertype zelf ook groot genoeg is. Voor de meest gangbare lettertypen is dit tussen de 14- en 18-punts.

Vooral het kleurcontrast op veel websites kan beter. De tool WP tota11y geeft precies aan of het contrast in orde is. Soms moet er een keuze gemaakt worden, mooi versus leesbaarheid. Ik merk dat ik dit zelf ook een lastige vind omdat je dan niet altijd de hele huisstijl kan doorvoeren. Maar je kan je dan ook afvragen of in het ontwerpen van de huisstijl al niet had moeten worden nagedacht over kleurgebruik. Ik weet dat een aantal ontwerpers ook altijd het ontwerp omzetten naar zwart wit om te checken of het kleurcontrast klopt.

Zoekfunctie

Zorg voor een duidelijk toegankelijke zoekfunctie. Voor heel veel mensen is een fijne manier om iets te vinden op een website. Ik merk dat ik deze heel vaak gebruik omdat het stukken sneller gaat dan een menu te doorzoeken. Zorg dat er een arialabel op de functie staat die zoekfunctie heeft. Gebruik bij voorkeur Nederlandse tekst.

Gebruik ALT-teksten bij je afbeeldingen

Geef je afbeeldingen een omschrijving mee, zodat een screenreader deze kan oplezen. Maar, alleen als het plaatje ondersteunend is en meerwaarde geeft aan de tekst. Is dit niet het geval, laat dan het veld leeg.

Teksten op een afbeelding en quotes die in de laag zitten in plaats van echte tekst, kan men niet laten op lezen.

Vroeger toen je nog sites maakte zonder onderhoudssysteem, werd er in de meta omschrijving in de html een lijst van woorden gezet. Hiermee werd de vindbaarheid verbeterd. Maar die tijden zijn allang voorbij. Helaas gebeurd dit nu ook nog steeds, doe dit niet! Zet geen zoekwoorden in het Alt veld. En ook niet bij tags.

Ondertitel video en audio

Video en podcasts worden steeds populairder. Deze zijn helaas voor blinden, slechtzienden en dove mensen niet toegankelijk. Probeer daarom de uitgeschreven tekst mee te leveren. Gebruik je YouTube-filmpjes op je website? Je kunt gemakkelijk een ondertiteling toevoegen via ‘captions’. Ik zou de automatische vertaling niet gebruiken, die is wel hilarisch maar brengt je boodschap niet zo goed over. Meer lezen over  eisen voor video en audio

Wettelijke verplichting

Vanaf september 2020 zijn alle overheidsinstanties verplicht om voor hun websites en apps een toegankelijkheidsverklaring op te stellen en te publiceren. Voor andere ondernemingen is het nog niet verplicht, maar daar hoef je natuurlijk niet op te wachten, je kan nu al wat doen. Er komt steeds meer informatie en mogelijkheden voor handen om zelf een steentje bij te dragen.

Budget vrijmaken voor aanpassingen

Het kost veel tijd om een template helemaal aan te passen naar de eisen van toegankelijkheid. En daarnaast om een bestaande website na te lopen en aan te passen. Je kan het beter direct goed doen en bijhouden. Je redacteuren goed inlichten ipv het met terugwerkende kracht te moeten aanpassen. Ik heb dit nu voor een aantal sites gedaan en er gaat echt veel tijd in zitten. Beter voorkomen dus.

Ga je nog starten met een nieuwe dan is het goed om voor een template te kiezen die voldoet aan de basisrichtlijnen. Of jouw vormgever te vragen rekening te houden met contrast, grote van letters, leesbaarheid. Voor ons is het nog niet verplicht maar in het kader van een inclusieve samenleving is het een goed streven om hier tijd en budget voor in te ruimen.

Via deze link kom je op een overzicht van templates die voldoen aan de basisrichtlijnen

WordPress is zich er van bewust dat er aanpassingen gedaan moeten worden en voer dit langzaam aan door. Een aantal zaken worden in de thema’s opgelost. YOOtheme is hier nu ook mee begonnen, lees het hier op hun website.

Bewustwording, wat kan je zelf doen

Ik raad je aan om te beginnen met de blogs van Toegankelijk Zwolle deze zijn eenvoudig te volgen en geven goed weer wat jij zelf zou kunnen doen.

Daarnaast is het mogelijk om je website te laten screenen. Er zijn een aantal handige tools om zelf te testen of je website in orde is. Je kan een extensie toevoegen aan je browser. Hiermee kan je zelf eens horen hoe je website klinkt. Voor Chrome heb je de volgende extensies:

• WCAG Accessibility Audit Developer UI
• axe – Web Accessibility Testing
• WCAG Color contrast checker
• ChromeVox Classic Extension (screen reader)

Daarnaast kan je de Voice over (vaak ingebouwd in je computer) eens aanzetten op je website en beluisteren hoe deze door je website gaat. Dan merk je ook gauw genoeg of de volgorde klopt waarin je door je website tabt. Of de alt teksten kloppen en of er informatie mist.

Of je zou je een extensie aan kunnen zetten in je chrome browser. Zoek dan op de term Read Aloud. Als je een Chromebook hebt gebruik je ChromeVox, een ingebouwde lezer.

Plugins voor WordPress

Er is een gratis plugin Userway. Deze plugin verstoorde echter ook veel andere functies en werd tijdens een officiële audit afgeraden. En zou ik om die reden niet meer gebruiken. Zeker als je een Audit krijgt zou ik hem uitzetten.

WP Tota11y

Momenteel gebruik ik WP Tota11y. Deze plugin is meer een tool om alle probleemgebieden te laten zien. Zodat je die een voor een kan aanpassen. Deze gebruik ik momenteel veel en is ook voor jou heel praktisch.

Toegankelijk Zwolle

In Zwolle hebben we Toegankelijk Zwolle, waar bijna veertig vrijwilligers voor werken. Waarvan het meerendeel ervaringsdeskundigen zich inzetten voor een toegankelijke en inclusieve samenleving. Dit is een groep van bijna veertig vrijwilligers, het meerendeel ervaringsdeskundigen. Zij adviseren vooral op gebouwen en buitengebieden. Maar kortgeleden hebben ze ook een aantal websites van horeca gelegenheden getest. Lees hier hun bevindingen en waar zij op hebben gelet >>

Zelf een audit laten uitvoeren?

Dat kan o.a. bij de volgende bedrijven:

• Naar de website van Technobility.nl
• Naar de website van stichting Accessibility

A11y Collective

Het a11y Collective (uitspreken als Ellie) heeft een aantal trainingen online staan, waarvan er momenteel een aantal gratis te volgen zijn. Voor webdesigners en webdevelopers zeker interessant. Maar ook voor jou als opdrachtgever voor een nieuwe website. Zodat je weet wat er aangepast moet en kan worden.

De 11 staat voor de 11 letters die tussen de a en y zitten.

Meer lezen over richtlijnen en eisen

Meer informatie over web toegankelijkheid kan je vinden op:

• https://www.rijksoverheid.nl/toegankelijkheid
• https://www.digitoegankelijk.nl/
• https://www.accessibility.nl/over-toegankelijkheid/wat-is-digitale-toegankelijkheid
• https://weekvandetoegankelijkheid.nl/
• https://www.digitoegankelijk.nl/
• https://www.w3.org/WAI/tutorials/
• https://www.w3.org/Translations/WCAG20-nl/

De week van de toegankelijkheid is dit jaar van 2 t/m 7 oktober 2023 . In deze week is er extra aandacht voor digitale toegankelijkheid.