From 867aeae2dbe30f6c14550ac293b4be3e7c4375f7 Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Wed, 15 Jan 2025 07:16:08 +0100 Subject: [PATCH 1/2] blog: de A-status voor je website in 9 stappen --- .../2025/20250125-stappen-a-status-website.md | 246 ++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 blog/2025/20250125-stappen-a-status-website.md diff --git a/blog/2025/20250125-stappen-a-status-website.md b/blog/2025/20250125-stappen-a-status-website.md new file mode 100644 index 00000000000..66ad0e8125c --- /dev/null +++ b/blog/2025/20250125-stappen-a-status-website.md @@ -0,0 +1,246 @@ +--- +title: Haal in één keer de A-status voor je website in 9 stappen +slug: 9-stappen-A-status-website +authors: + - name: Rian Rietveld + title: Specialist webtoegankelijkheid NL Design System + url: https://www.linkedin.com/in/rianrietveld/ +tags: [A status, toegankelijkheid, toegankelijkheidsverklaring] +hide_table_of_contents: false +date: 2025-01-15 +--- + +Stappenplan voor de ontwikkeling van een toegankelijk webproject met het NL Design System. We nemen je aan de hand mee in het hele proces van begin tot eind, en vertellen je hoe het NL Design Systeem in combinatie met de richtlijnen voor toegankelijkheid je hierbij kan helpen. + + + +Het doel is om de zogenaamde [A-status voor je website](https://www.digitoegankelijk.nl/toegankelijkheidsverklaring/status) te halen in het [Register van toegankelijkheidsverklaringen](https://www.toegankelijkheidsverklaring.nl/register) voor jouw website. Maar ook om de website gebruiksvriendelijk en voorbereid op de toekomst te bouwen. + +Dus, ook als je de website niet voor een overheidsinstelling ontwikkelt, ook dan is het zinvol om deze stappen te volgen om je bezoekers een toegankelijke en gebruiksvriendelijke website aan te bieden. + +## Stap 1: Van tevoren op orde hebben + +Een goede voorbereiding is het halve werk en voorkomt verrassingen tijdens het proces. + +### Alle neuzen dezelfde kant op + +Wil je de toegankelijkheid waarborgen? Zorg ervoor dat iedereen in het project hiervan weet en het belang ervan inziet. Iedereen is verantwoordelijk voor het eigen werk, wat je oplevert moet goed zijn. + +Iedereen is verantwoordelijk voor de kwaliteit van het project. Voor de snelheid, veiligheid, leesbaarheid, gebruiksvriendelijkheid en ook voor de toegankelijkheid. Al bij de start van het project moeten alle neuzen dezelfde kant op wijzen. + +Iedereen doet mee, van product owners, product- en projectmanagers, ontwerpers, programmeurs, contentmanagers, webschrijvers en iedereen die inhoud aanlevert voor de website. + +Heeft de organisatie een wettelijke verplichting om een toegankelijke website te hebben? Maak dit duidelijk binnen het team en het management. + +### WCAG en NL Design System richtlijnen + +Met de [Web Content Accessibility Guidelines](https://nldesignsystem.nl/wcag) (WCAG) meten we de toegankelijkheid van een website voor bezoekers met een beperking. Leg van te voren vast dat je wilt gaan voldoen aan WCAG, versie 2.2, niveau AA. Dan ben je voor de komende jaren verzekerd dat het project voldoet aan de meest recente richtlijnen voor toegankelijkheid. + +Zijn er uitzonderingen op deze richtlijnen, zoals het gebruik van een navigatiekaart? Leg dit ook van tevoren vast en denk alvast na over toegankelijke alternatieven. + +Het [NL Design System schrijft richtlijnen](https://nldesignsystem.nl/richtlijnen) die uitleggen hoe te voldoen aan WCAG, maar ze gaan ook een stapje verder. Bevindingen uit gebruikersonderzoek zijn ook meegenomen bij onze richtlijnen. + +De combinatie WCAG en de NL Design System richtlijnen helpen je om een toegankelijke en gebruiksvriendelijke website op te leveren die de A-status verdient. + +### Stel je team samen + +Wie gaat de website maken of aanpassen? Komen de teamleden uit de organisatie zelf? Huur je externe krachten in via een leverancier? Of wordt het een combinatie? We noemen deze mensen hier voor het gemak 'het team'. + +Huur je een extern webbureau in, onderzoek dan of ze voldoende kennis en ervaring hebben in het maken van een toegankelijke website. Janita Top schreef hier een goede checklist voor: [Welke vragen stel je aan een webbouwer over toegankelijkheid?](https://janitatop.nl/vragen-webbouwer-toegankelijkheid/) Vraag de leverancier ook hoe het team kennis over toegankelijkheid bijhoudt, welke opleidingen en trainingen ze volgen. + +### Train je team + +Zorg voor goede training van het hele team, inclusief de ontwerpers, programmeurs, contentmanagers en de tekstschrijvers. Ook als eenmaal de website online staat is het belangrijk het team getraind te houden. Contentmanagers komen en gaan. Garandeer dat mensen die content op de website plaatsen vooraf een goede training krijgt. + +We geven je hier een aantal gerenommeerde opleiders: [The Internet Academy](https://www.internetacademy.nl/), [The A11Y Collective](https://www.a11y-collective.com/courses-overview/), [Swink](https://swink.nl/), [Stichting Accessibility](https://www.accessibility.nl/) en [Deque University](https://dequeuniversity.com/). + +### Bereid gebruikersonderzoek voor + +Een belangrijk onderdeel van de ontwikkeling van een toegankelijke website is feedback van gebruikers. We doen allemaal aannames, maar kloppen die ook? Er is maar één manier om dat uit te vinden en dat is door met anderen in gesprek te gaan. + +Het liefst ga je met mensen in gesprek die jouw website waarschijnlijk zullen gebruiken, je doelgroep. Maar je kunt ook laagdrempelig starten door mensen van de straat te plukken of uit je omgeving of organisatie te vragen. + +Zorg er in ieder geval voor dat je ook mensen met een beperking mee laat doen in het onderzoek. We noemen dit ervaringsdeskundigen. + +Denk daarbij aan mensen met een visuele, motorische of cognitieve beperking. Of mensen die laaggeletterd of minder digitaal vaardig zijn. Kortom, een doorsnede van de samenleving. + +Er zijn organisaties die je kunnen helpen met het opzetten en uitvoeren van gebruikersonderzoek. Inclusief het werven van gebruikers, zoals: + +- [Oogvereniging](https://www.oogvereniging.nl/standpunten/ervaringsdeskundigheid/) +- [Stichting Accessibility](https://www.accessibility.nl/hoe-wij-helpen/gebruikersonderzoeken) +- [Valsplat](https://valsplat.nl/services/product-design/ux-test-concept-test) + +### Beschik over een specialist webtoegankelijkheid + +Beschik je over iemand met expertise over webtoegankelijkheid voor begeleiding in het hele project? Het kan nuttig zijn om een specialist webtoegankelijkheid in te huren of intern op te leiden voor consultancy. + +Voor training van het team, als vraagbaak en voor tussentijdse beoordeling van het werk. Dat voorkomt dubbel werk, dus hogere kosten en verrassingen bij de WCAG-audit aan het einde van het traject. + +## Stap 2: Bepaal wat je gaat maken + +Wat is het doel van je website? Wees hierin heel concreet. Wat is essentieel, wat zou leuk zijn maar is niet echt nodig. En zet je ego en persoonlijke voorkeur opzij, denk puur vanuit de gebruiker. + +Bezoek komt op je website met een doel en niet om zich te verbazen over de prachtige animaties en sliders. Hou altijd het doel op de eerste plaats en je hoeft niets steeds het wiel opnieuw uit te vinden. + +Onderzoek welke functionaliteit je nodig hebt en wat je wilt maken. Ook mensen met een beperking moeten je website kunnen gebruiken. Less is more. Als het heel moeilijk te gebruiken is voor mensen met een beperking, is het waarschijnlijk voor iedereen te moeilijk. + +- Welke informatie wil je aanbieden? +- Op welke manieren kan de gebruiker met je communiceren? +- Welke formulieren zijn er nodig, en wat gebeurt er met de gegevens die mensen insturen? +- Bevat de website video en audio? Hoe ga je de ondertiteling en transcriptie regelen? Is hier capaciteit en budget voor? +- Hoe publiceer je digitale documenten? Zijn deze documenten toegankelijk of heb je een alternatief als webtekst? +- Ben je afhankelijk van functionaliteit die wordt geleverd door andere partijen, bijvoorbeeld formulieren of een afsprakensysteem? Zorg er dan voor dat deze partijen kunnen aantonen dat hun product toegankelijk is. + +Onderzoek of er al voorbeelden zijn van wat je wilt gaan maken, is hier al onderzoek naar gedaan? Op [Gebruikersonderzoeken.nl](https://gebruikersonderzoeken.nl/docs/onderzoek-bekijken) staan verschillende onderzoeken, bijvoorbeeld voor ‘Mijn Omgevingen’ en ‘Online Meldingen’. + +Hoewel het werk hier in losse stappen is opgeschreven, is het belangrijk om als team continu met elkaar af te stemmen. + +Daarnaast kunnen teamleden ook 'los' van elkaar e.e.a. uitzoeken. Bijvoorbeeld: de interactie-ontwerper onderzoekt de eerste opzet van de navigatie structuur, de visueel ontwerper maakt typografische keuzes, en de programmeur zoekt alvast goede componenten voor de specifieke functionaliteit. + +## Stap 3: Interactie-ontwerp + +Heb je wat je wilt gaan maken goed op een rij? Dan kun je starten met het interactie-ontwerp. Hoe zorg je ervoor dat de benodigde functionaliteit uit stap 2 samenkomt in een bruikbare website? + +In het interactie ontwerp hebben we het nog niet over huisstijlelementen zoals kleur, typografie of fotografie maar puur over de functionaliteit. + +Werk nauw samen met de visueel ontwerper, de programmeur en de expert toegankelijkheid. Zijn plannen goed en ook toegankelijk te realiseren? Of kunnen er beter andere keuzes worden gemaakt? Goed overleg scheelt in het latere proces heel veel tijd. + +In het interactie-ontwerp neem je op hoe een bezoeker door de website kan navigeren, wanneer je bepaalde informatie aanbiedt en hoe men met jouw organisatie kan communiceren'. Wat komt er in de hoofd- of zijnavigatie? Zijn er verschillende manieren om inhoud te vinden, bijvoorbeeld via de hoofdnavigatie en de zoekoptie? Hoe zijn de tekstpagina's opgebouwd? Hoe zijn de formulieren samengesteld? + +Bij onze [richtlijnen voor formulieren](https://nldesignsystem.nl/richtlijnen/formulieren) is al veel uitgewerkt. Bijvoorbeeld over de plaatsing van labels, invoervelden en knoppen. Hoe je een [meerstappenformulier](https://nldesignsystem.nl/richtlijnen/formulieren/meerdere-stappen/) op kan zetten en hoe [feedback te geven op fouten](https://nldesignsystem.nl/blog/toegankelijke-foutmeldingen-formulieren/). + +Denk na over alternatieven voor ontoegankelijke functionaliteit. Hoe vergroot je een kaart of versleep je een element? Moet je een mobiel schudden voor een refresh? Niet iedereen heeft twee vingers of kan een hand gebruiken. + +Onze [WCAG-pagina's](https://nldesignsystem.nl/wcag) beschrijven wat van belang is bij het interactie ontwerp, zoals onder andere: + +- Maak de inhoud een logisch verhaal als je [van boven naar beneden leest](https://nldesignsystem.nl/wcag/1.3.2). +- Zet de [navigatie op dezelfde plek](https://nldesignsystem.nl/wcag/3.2.3) op elke pagina, en de onderdelen in dezelfde volgorde. +- Zorg ervoor dat componenten die dezelfde functie hebben binnen een website in naamgeving [consistent zijn](https://nldesignsystem.nl/wcag/3.2.4), er hetzelfde uitzien en ook hetzelfde werken. +- Denk na hoe het ontwerp er in [verschillende weergaven](https://nldesignsystem.nl/wcag/1.4.10) en op verschillende apparaten eruitziet. +- De webpagina moet in [landscape- en in portrait weergave](https://nldesignsystem.nl/wcag/1.3.4) goed leesbaar zijn. +- Voorkom vaste groottes van een tekstkader, zorg ervoor dat de [tekst makkelijk vergroot](https://nldesignsystem.nl/wcag/1.4.4) kan worden. +- Besteed zorg aan het [voorkomen](https://nldesignsystem.nl/wcag/3.3.4) en [aanduiden van fouten](https://nldesignsystem.nl/wcag/3.3.3) bij formulieren. +- Reserveer plek voor [foutmeldingen](https://nldesignsystem.nl/wcag/3.3.1) en [descriptions](https://nldesignsystem.nl/wcag/3.3.3) en [statusberichten.](https://nldesignsystem.nl/wcag/4.1.3) +- Denk na over [tijdslimieten](https://nldesignsystem.nl/wcag/2.2.3) bij het invullen van formulieren, hoe geef je die aan. +- Voorkom [onverwacht gedrag](https://nldesignsystem.nl/wcag/3.2.1/), bijvoorbeeld bij filters of formulieren. +- Zorg voor [meerdere manieren](https://nldesignsystem.nl/wcag/2.4.5) om content te vinden, bijvoorbeeld via een hoofdmenu, de zoekfunctie, informatie en links in de footer, een broodkruimelpad of een sitemap. +- Help de gebruiker zo goed als het kan de taak te vervullen op je website. Zorg ervoor dat ze [gemakkelijk om hulp kunnen vragen](https://nldesignsystem.nl/wcag/3.3.5) als ze er niet uitkomen. +- Maak het [makkelijk om veilig in te loggen](https://nldesignsystem.nl/wcag/3.3.8). Voorkom captcha's en rekensommen. Sta copy/paste van een wachtwoord toe, zodat een gebruiker een wachtwoordmanager kan gebruiken. + +De programmeurs kunnen met dit ontwerp eigenlijk al aan de slag, het geeft de grote lijnen aan van de opbouw en functionaliteit van de website. Het NL Design System biedt hiervoor herbruikbare componenten, bij [onze componenten](https://nldesignsystem.nl/componenten/) is al veel functionaliteit uitgewerkt. + +Hoe het er dan precies uitziet kan later, in stap 5, worden toegevoegd nadat het visueel ontwerp is gemaakt. + +### Gebruikerstesten op het interactie-ontwerp + +Voordat de visueel ontwerper aan de slag kan, is het noodzakelijk om het interactie-ontwerp door gebruikers te laten testen. Zijn de aannames van het team juist. Wat is goed en wat kan beter. + +Geef gebruikers een gerichte taak. Bijvoorbeeld: "Er zit een stoeptegel los bij jou in de straat, ga het melden bij je gemeente", "Bestel 6 flessen bronwater, kies een bezorgadres en reken af met iDEAL". Observeer dan welk pad ze nemen, wat lukt en waar ze tegenaan lopen. + +## Stap 4: Visueel ontwerp + +Nu gaat de visueel ontwerper aan de slag en werkt het interactie-ontwerp uit tot een mooie visuele weergave van de website. Dit is de fase waar huisstijlelementen zoals kleur, typografie of fotografie worden bepaald. De look-and-feel, de uitstraling. Toegankelijke websites hoeven zeker niet lelijk en saai te zijn. + +Bij onze richtlijnen voor stijl zijn de onderwerpen [typografie](https://nldesignsystem.nl/richtlijnen/stijl/typografie/), [kleuren](https://nldesignsystem.nl/richtlijnen/stijl/kleuren/), [ruimte](https://nldesignsystem.nl/richtlijnen/stijl/ruimte/) en [iconen](https://nldesignsystem.nl/richtlijnen/stijl/iconen/) uitgewerkt. + +Belangrijk om in het visueel ontwerp aan WCAG te voldoen is onder andere: + +- Zorg voor een voldoende [kleurcontrast tussen tekst en achtergrond](https://nldesignsystem.nl/wcag/1.4.3) zodat je ook je bezoek ouder dan 50 jaar de tekst kan lezen. +- Zorg voor voldoende kleurcontrast tussen de achtergrondkleur en de kleur van componenten die visuele betekenis hebben. Zoals [formulierelementen en iconen](https://nldesignsystem.nl/wcag/1.4.11). +- Geef [geen betekenis aan kleur](https://nldesignsystem.nl/wcag/1.4.1), blinde en kleurenblinde bezoekers kunnen deze betekenis missen. +- Ontwerp naast een stijl voor hover ook een [stijl voor de toetsenbordfocus](https://nldesignsystem.nl/wcag/2.4.13). +- Zorg ervoor dat ook mensen [met dikke vingers een knop kunnen aanklikken](https://nldesignsystem.nl/wcag/2.5.8). + +## Stap 5: Bouw + +Goede betekenisvolle HTML-code is essentieel voor toegankelijkheid. Alleen dan werkt een website echt goed met de verschillende soorten hulpmiddelen. + +Zo kunnen mensen met een beperking een website gebruiken met: + +- alleen een toetsenbord; +- een toetsenbord met een screenreader; +- een toetsenbord met een screenreader en een brailleregel; +- spraakbesturing; +- een aanwijsstok. + +Voor al deze hulpmiddelen geldt: de website moet te bedienen zijn met het toetsenbord. En dat is door het gebruik van goede HTML goed mogelijk. Daarnaast is het belangrijk dat een screenreadergebruiker de informatie goed voorgelezen krijgt. + +Bij de [richtlijnen voor formulieren](https://nldesignsystem.nl/richtlijnen/formulieren) en bij de [WCAG-pagina's](https://nldesignsystem.nl/wcag) staan codevoorbeelden over wat belangrijk is en hoe je wel en niet moet bouwen. + +WCAG-succescriteria voor toetsenbordbediening zijn onder andere: + +- Zorg dat alle functionaliteit met een [toetsenbord te bedienen](https://nldesignsystem.nl/wcag/2.1.1) is. +- Pas op voor een [toetsenbordval](https://nldesignsystem.nl/wcag/2.1.2). +- Maak geen extra [sneltoetsen](https://nldesignsystem.nl/wcag/2.1.4) aan die bestaan uit één letter. +- Zorg voor [een skiplink](https://nldesignsystem.nl/wcag/2.4.1), die het menu overslaat +- Maak de [tabvolgorde logisch](https://nldesignsystem.nl/wcag/2.4.3) en voorspelbaar. +- Zorg ervoor dat een element dat de toetsenbordfocus heeft [niet volledig bedekt is](https://nldesignsystem.nl/wcag/2.4.11) door andere inhoud. +- Zorg dat het goed [zichtbaar is welk element de toetsenbordfocus](https://nldesignsystem.nl/wcag/2.4.13) heeft. + +Er zijn meer WCAG-succescriteria die op de code betrekking hebben. We leggen bij elk WCAG-succescriterium wat belangrijk is en uit hoe hiervoor te testen. En bij de componenten staan acceptatiecriteria waaraan een component moet voldoen om toegankelijk te zijn. + +De beste tijd en manier om te testen is tijdens het bouwen in de browser. Naast je eigen toetsenbord zijn er ook browser tools die helpen. De bekendste is de gratis [axe DevTools](https://www.deque.com/axe/browser-extensions/) voor Chrome, Firefox en Edge. + +### Componenten + +Programmeurs en ontwerpers kunnen gebruikmaken van het NL Design System om een website toegankelijk te bouwen. + +De documentatie bij de [componenten van het NL Design System](https://nldesignsystem.nl/componenten/) beschrijft hoe een component is opgebouwd en aan welke acceptatiecriteria deze moet voldoen. Kijk bijvoorbeeld bij de [component "button](https://nldesignsystem.nl/button)". + +Veel van onze componenten zijn nu (2024) nog in volop ontwikkeling, maar je kunt al meekijken in de keuken.. Samen met [onze community](https://nldesignsystem.nl/community) ontwikkelen we componenten die herbruikbaar, functioneel en toegankelijk zijn en ondersteund worden door gebruikersonderzoek. + +Het doel is om alle componenten volgens het [estafettemodel](https://nldesignsystem.nl/handboek/estafettemodel) stap voor stap in de "Hall of Fame" te krijgen, waarna ze voor iedereen te gebruiken zijn. Zodat jouw team het wiel niet opnieuw hoeft uit te vinden. + +## Stap 6: Inhoud vullen + +Zorg ervoor dat de contentmanagers en webschrijvers een goede training hebben gehad, en dat elke nieuwkomer een training krijgt voordat deze aan de slag gaat. Een website kan volledig goed ontworpen en gebouwd zijn, toegankelijke content is zeker net zo belangrijk + +De contentmanagers moeten het mandaat hebben om plaatsing van ontoegankelijke digitale documenten te weigeren. Ook al staat de burgemeester er persoonlijk op. Alles wat op de website komt, moet toegankelijk zijn. + +WCAG-succescriteria voor de content zijn bijvoorbeeld: + +- Beschrijf met koppen de inhoud die eronder staat, maak de [koppenstructuur betekenisvol](https://nldesignsystem.nl/wcag/2.4.10). Gebruik kopen niet alleen om tekst vet en groot te maken. +- Geef afbeeldingen een [goede alternatieve tekst.](https://nldesignsystem.nl/wcag/1.1.1) +- Voeg je video? Zorg dan voor [ondertiteling](https://nldesignsystem.nl/wcag/1.2.2) zodat dove bezoekers de inhoud ook kunnen volgen +- Schrijf duidelijk, betekenisvolle [linkteksten](https://nldesignsystem.nl/wcag/2.4.4) en vermijdt "klik hier". + +## Stap 7: Eindtest met gebruikers + +Test je website na de bouw en het vullen van de inhoud met gebruikers, ook met gebruikers met een beperking. + +Het is een misverstand dat testen met gebruikers met een beperking hetzelfde is als testen op toegankelijkheid. Je kunt pas testen met deze gebruikers als de site helemaal toegankelijk is en voldoet aan de WCAG richtlijnen. Een blind persoon ziet niet wat ze mist. Een beperking komt niet met een handleiding. Ook deze gebruikers worstelen, net zoals gebruikers zonder beperking, met het web. + +In deze fase testen we of gebruikers met een beperking een opdracht succesvol kunnen afronden van begin tot einde. Zoals een telefoonnummer opzoeken, een melding doen, een klacht indienen of een zwarte wollen trui in de maat M bestellen en afrekenen. + +Pas de website aan naar aanleiding van je bevindingen. + +Heb je gebruikersonderzoek gedaan en wil je dat delen? Overweeg de resultaten te plaatsen gebruikersonderzoeken.nl + +## Stap 8: Toegankelijkheidsverklaring + +Alles af? Gebruikerstesten verwerkt? Inhoud helemaal gevuld. Alle formulieren werken? +Laat dan een officiële [WCAG-EM audit](https://www.digitoegankelijk.nl/toegankelijkheidsverklaring/onderzoek) doen. Liefst door een onafhankelijke partij en niet door je eigen specialist toegankelijkheid. Dit voorkomt het "[Wij van WC-eend](https://nl.wikipedia.org/wiki/Wij_van_Wc-eend_adviseren_Wc-eend)" effect. Deze audit is 3 jaar geldig. + +In Nederland is er een aantal onderzoeksbureaus die officiële audits verzorgen. Verwerk eventuele punten die nog uit de audit komen. + +Overheidsinstellingen kunnen een toegankelijkheidsverklaring aanmaken op het [Register van toegankelijkheidsverklaringen](https://www.toegankelijkheidsverklaring.nl/register). + +Als je dan een mooie toegankelijke website hebt opgeleverd wil je dat natuurlijk aan alle bezoekers vertellen. Dit kan op een speciale pagina op je website "Toegankelijkheid". + +Vermeld hierin : + +- Hoe de website getest is, met een verwijzing naar het WCAG-EM rapport of met een link naar het Register van toegankelijkheidsverklaringen. +- Welke problemen er eventueel nog zijn en wanneer die worden opgelost. +- Hoe bezoekers contact kunnen opnemen als ze een probleem hebben bij het gebruik van de website. + +## Stap 9: Onderhoud + +Een website is nooit af en verandert voortdurend, dit betreft in ieder geval de webteksten. Blijf de toegankelijkheid bewaken. Zorg ervoor dat de contentmanagers en webschrijvers getraind blijven. Want plaatjes zonder alternatieve tekst, onduidelijke links of een verkeerde koppenstructuur sluipen er zo in. Leg een procedure voor onboarding vast, ook op het gebied van toegankelijkheid. + +Laat regelmatig, bijvoorbeeld één keer per jaar, een controle uitvoeren door een specialist webtoegankelijkheid. Is de website nog in orde, is het team nog steeds goed getraind? Is er nieuwe functionaliteit bij gekomen en is deze ook toegankelijk? + +## Tot slot + +Iedereen is verantwoordelijk voor de kwaliteit van het project. Voor de snelheid, veiligheid, leesbaarheid, gebruiksvriendelijkheid en ook voor de toegankelijkheid. + +We maken een website niet voor onszelf maar voor de gebruiker. Als alle gebruikers goed met je website overweg kunnen, dan pas is je doel bereikt. From 640a15c9e1dd874e0e9281de139c49d9d7664244 Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Sat, 8 Feb 2025 08:30:32 +0100 Subject: [PATCH 2/2] docs: Blogpost aanpassingen na review --- .../2025/20250125-stappen-a-status-website.md | 52 ++++++++++--------- 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/blog/2025/20250125-stappen-a-status-website.md b/blog/2025/20250125-stappen-a-status-website.md index 66ad0e8125c..fd0d6c71725 100644 --- a/blog/2025/20250125-stappen-a-status-website.md +++ b/blog/2025/20250125-stappen-a-status-website.md @@ -7,10 +7,10 @@ authors: url: https://www.linkedin.com/in/rianrietveld/ tags: [A status, toegankelijkheid, toegankelijkheidsverklaring] hide_table_of_contents: false -date: 2025-01-15 +date: 2025-02-09 --- -Stappenplan voor de ontwikkeling van een toegankelijk webproject met het NL Design System. We nemen je aan de hand mee in het hele proces van begin tot eind, en vertellen je hoe het NL Design Systeem in combinatie met de richtlijnen voor toegankelijkheid je hierbij kan helpen. +Stappenplan voor de ontwikkeling van een toegankelijk webproject met het NL Design System. We nemen je aan de hand mee in het hele proces van begin tot eind, en vertellen je hoe het NL Design System in combinatie met de richtlijnen voor toegankelijkheid je hierbij kan helpen. @@ -34,7 +34,7 @@ Heeft de organisatie een wettelijke verplichting om een toegankelijke website te ### WCAG en NL Design System richtlijnen -Met de [Web Content Accessibility Guidelines](https://nldesignsystem.nl/wcag) (WCAG) meten we de toegankelijkheid van een website voor bezoekers met een beperking. Leg van te voren vast dat je wilt gaan voldoen aan WCAG, versie 2.2, niveau AA. Dan ben je voor de komende jaren verzekerd dat het project voldoet aan de meest recente richtlijnen voor toegankelijkheid. +Met de [Web Content Accessibility Guidelines](https://nldesignsystem.nl/wcag) (WCAG) meten we de toegankelijkheid van een website voor mensen met een beperking. Leg van tevoren vast dat je wilt gaan voldoen aan WCAG, versie 2.2, niveau AA. Dan ben je voor de komende jaren verzekerd dat het project voldoet aan de meest recente richtlijnen voor toegankelijkheid. Zijn er uitzonderingen op deze richtlijnen, zoals het gebruik van een navigatiekaart? Leg dit ook van tevoren vast en denk alvast na over toegankelijke alternatieven. @@ -50,7 +50,7 @@ Huur je een extern webbureau in, onderzoek dan of ze voldoende kennis en ervarin ### Train je team -Zorg voor goede training van het hele team, inclusief de ontwerpers, programmeurs, contentmanagers en de tekstschrijvers. Ook als eenmaal de website online staat is het belangrijk het team getraind te houden. Contentmanagers komen en gaan. Garandeer dat mensen die content op de website plaatsen vooraf een goede training krijgt. +Zorg voor goede training van het hele team, inclusief de ontwerpers, programmeurs, contentmanagers en de tekstschrijvers. Ook als eenmaal de website online staat is het belangrijk het team getraind te houden. Contentmanagers komen en gaan. Garandeer dat iedereen die content op de website plaatst vooraf een goede training krijgt. We geven je hier een aantal gerenommeerde opleiders: [The Internet Academy](https://www.internetacademy.nl/), [The A11Y Collective](https://www.a11y-collective.com/courses-overview/), [Swink](https://swink.nl/), [Stichting Accessibility](https://www.accessibility.nl/) en [Deque University](https://dequeuniversity.com/). @@ -80,7 +80,7 @@ Voor training van het team, als vraagbaak en voor tussentijdse beoordeling van h Wat is het doel van je website? Wees hierin heel concreet. Wat is essentieel, wat zou leuk zijn maar is niet echt nodig. En zet je ego en persoonlijke voorkeur opzij, denk puur vanuit de gebruiker. -Bezoek komt op je website met een doel en niet om zich te verbazen over de prachtige animaties en sliders. Hou altijd het doel op de eerste plaats en je hoeft niets steeds het wiel opnieuw uit te vinden. +Mensen komen op je website met een doel en niet om zich te verbazen over de prachtige animaties en sliders. Hou altijd het doel op de eerste plaats en je hoeft niets steeds het wiel opnieuw uit te vinden. Onderzoek welke functionaliteit je nodig hebt en wat je wilt maken. Ook mensen met een beperking moeten je website kunnen gebruiken. Less is more. Als het heel moeilijk te gebruiken is voor mensen met een beperking, is het waarschijnlijk voor iedereen te moeilijk. @@ -101,17 +101,17 @@ Daarnaast kunnen teamleden ook 'los' van elkaar e.e.a. uitzoeken. Bijvoorbeeld: Heb je wat je wilt gaan maken goed op een rij? Dan kun je starten met het interactie-ontwerp. Hoe zorg je ervoor dat de benodigde functionaliteit uit stap 2 samenkomt in een bruikbare website? -In het interactie ontwerp hebben we het nog niet over huisstijlelementen zoals kleur, typografie of fotografie maar puur over de functionaliteit. +In het interactie-ontwerp hebben we het nog niet over huisstijlelementen zoals kleur, typografie of fotografie, maar puur over de functionaliteit. -Werk nauw samen met de visueel ontwerper, de programmeur en de expert toegankelijkheid. Zijn plannen goed en ook toegankelijk te realiseren? Of kunnen er beter andere keuzes worden gemaakt? Goed overleg scheelt in het latere proces heel veel tijd. +Werk nauw samen met de visueel ontwerper, de programmeur en de specialist toegankelijkheid. Zijn plannen goed en ook toegankelijk te realiseren? Of kunnen er beter andere keuzes worden gemaakt? Goed overleg scheelt in het latere proces heel veel tijd. -In het interactie-ontwerp neem je op hoe een bezoeker door de website kan navigeren, wanneer je bepaalde informatie aanbiedt en hoe men met jouw organisatie kan communiceren'. Wat komt er in de hoofd- of zijnavigatie? Zijn er verschillende manieren om inhoud te vinden, bijvoorbeeld via de hoofdnavigatie en de zoekoptie? Hoe zijn de tekstpagina's opgebouwd? Hoe zijn de formulieren samengesteld? +In het interactie-ontwerp neem je op hoe gebruikers door de website kunnen navigeren, wanneer je bepaalde informatie aanbiedt en hoe men met jouw organisatie kan communiceren'. Wat komt er in de hoofd- of subnavigatie? Zijn er verschillende manieren om inhoud te vinden, bijvoorbeeld via de hoofdnavigatie en de zoekfunctionaliteit? Hoe zijn de tekstpagina's opgebouwd? Hoe zijn de formulieren samengesteld? Bij onze [richtlijnen voor formulieren](https://nldesignsystem.nl/richtlijnen/formulieren) is al veel uitgewerkt. Bijvoorbeeld over de plaatsing van labels, invoervelden en knoppen. Hoe je een [meerstappenformulier](https://nldesignsystem.nl/richtlijnen/formulieren/meerdere-stappen/) op kan zetten en hoe [feedback te geven op fouten](https://nldesignsystem.nl/blog/toegankelijke-foutmeldingen-formulieren/). Denk na over alternatieven voor ontoegankelijke functionaliteit. Hoe vergroot je een kaart of versleep je een element? Moet je een mobiel schudden voor een refresh? Niet iedereen heeft twee vingers of kan een hand gebruiken. -Onze [WCAG-pagina's](https://nldesignsystem.nl/wcag) beschrijven wat van belang is bij het interactie ontwerp, zoals onder andere: +Onze [WCAG-pagina's](https://nldesignsystem.nl/wcag) beschrijven wat van belang is bij het interactie-ontwerp, zoals onder andere: - Maak de inhoud een logisch verhaal als je [van boven naar beneden leest](https://nldesignsystem.nl/wcag/1.3.2). - Zet de [navigatie op dezelfde plek](https://nldesignsystem.nl/wcag/3.2.3) op elke pagina, en de onderdelen in dezelfde volgorde. @@ -123,7 +123,7 @@ Onze [WCAG-pagina's](https://nldesignsystem.nl/wcag) beschrijven wat van belang - Reserveer plek voor [foutmeldingen](https://nldesignsystem.nl/wcag/3.3.1) en [descriptions](https://nldesignsystem.nl/wcag/3.3.3) en [statusberichten.](https://nldesignsystem.nl/wcag/4.1.3) - Denk na over [tijdslimieten](https://nldesignsystem.nl/wcag/2.2.3) bij het invullen van formulieren, hoe geef je die aan. - Voorkom [onverwacht gedrag](https://nldesignsystem.nl/wcag/3.2.1/), bijvoorbeeld bij filters of formulieren. -- Zorg voor [meerdere manieren](https://nldesignsystem.nl/wcag/2.4.5) om content te vinden, bijvoorbeeld via een hoofdmenu, de zoekfunctie, informatie en links in de footer, een broodkruimelpad of een sitemap. +- Zorg voor [meerdere manieren](https://nldesignsystem.nl/wcag/2.4.5) om content te vinden, bijvoorbeeld via een hoofdnavigatie, de zoekfunctionaliteit, informatie en links in de footer, een broodkruimelpad of een sitemap. - Help de gebruiker zo goed als het kan de taak te vervullen op je website. Zorg ervoor dat ze [gemakkelijk om hulp kunnen vragen](https://nldesignsystem.nl/wcag/3.3.5) als ze er niet uitkomen. - Maak het [makkelijk om veilig in te loggen](https://nldesignsystem.nl/wcag/3.3.8). Voorkom captcha's en rekensommen. Sta copy/paste van een wachtwoord toe, zodat een gebruiker een wachtwoordmanager kan gebruiken. @@ -147,7 +147,7 @@ Belangrijk om in het visueel ontwerp aan WCAG te voldoen is onder andere: - Zorg voor een voldoende [kleurcontrast tussen tekst en achtergrond](https://nldesignsystem.nl/wcag/1.4.3) zodat je ook je bezoek ouder dan 50 jaar de tekst kan lezen. - Zorg voor voldoende kleurcontrast tussen de achtergrondkleur en de kleur van componenten die visuele betekenis hebben. Zoals [formulierelementen en iconen](https://nldesignsystem.nl/wcag/1.4.11). -- Geef [geen betekenis aan kleur](https://nldesignsystem.nl/wcag/1.4.1), blinde en kleurenblinde bezoekers kunnen deze betekenis missen. +- Zorg ervoor dat [kleur niet het enige visuele middel is om informatie over te brengen], blinde en kleurenblinde mensen kunnen deze betekenis missen. - Ontwerp naast een stijl voor hover ook een [stijl voor de toetsenbordfocus](https://nldesignsystem.nl/wcag/2.4.13). - Zorg ervoor dat ook mensen [met dikke vingers een knop kunnen aanklikken](https://nldesignsystem.nl/wcag/2.5.8). @@ -187,13 +187,13 @@ Programmeurs en ontwerpers kunnen gebruikmaken van het NL Design System om een w De documentatie bij de [componenten van het NL Design System](https://nldesignsystem.nl/componenten/) beschrijft hoe een component is opgebouwd en aan welke acceptatiecriteria deze moet voldoen. Kijk bijvoorbeeld bij de [component "button](https://nldesignsystem.nl/button)". -Veel van onze componenten zijn nu (2024) nog in volop ontwikkeling, maar je kunt al meekijken in de keuken.. Samen met [onze community](https://nldesignsystem.nl/community) ontwikkelen we componenten die herbruikbaar, functioneel en toegankelijk zijn en ondersteund worden door gebruikersonderzoek. +Veel van onze componenten zijn nu (2025) nog in volop ontwikkeling, maar je kunt al meekijken in de keuken. Samen met [onze community](https://nldesignsystem.nl/community) ontwikkelen we componenten die herbruikbaar, functioneel en toegankelijk zijn en ondersteund worden door gebruikersonderzoek. -Het doel is om alle componenten volgens het [estafettemodel](https://nldesignsystem.nl/handboek/estafettemodel) stap voor stap in de "Hall of Fame" te krijgen, waarna ze voor iedereen te gebruiken zijn. Zodat jouw team het wiel niet opnieuw hoeft uit te vinden. +Het doel is om alle componenten volgens het [estafettemodel](https://nldesignsystem.nl/handboek/estafettemodel) stap voor stap in de 'Hall of Fame' te krijgen, waarna ze voor iedereen te gebruiken zijn. Zodat jouw team het wiel niet opnieuw hoeft uit te vinden. ## Stap 6: Inhoud vullen -Zorg ervoor dat de contentmanagers en webschrijvers een goede training hebben gehad, en dat elke nieuwkomer een training krijgt voordat deze aan de slag gaat. Een website kan volledig goed ontworpen en gebouwd zijn, toegankelijke content is zeker net zo belangrijk +Zorg ervoor dat de contentmanagers en webschrijvers een goede training hebben gehad, en dat elke nieuwkomer een training krijgt voordat deze aan de slag gaat. Een website kan volledig goed ontworpen en gebouwd zijn, toegankelijke content is zeker net zo belangrijk. De contentmanagers moeten het mandaat hebben om plaatsing van ontoegankelijke digitale documenten te weigeren. Ook al staat de burgemeester er persoonlijk op. Alles wat op de website komt, moet toegankelijk zijn. @@ -201,38 +201,42 @@ WCAG-succescriteria voor de content zijn bijvoorbeeld: - Beschrijf met koppen de inhoud die eronder staat, maak de [koppenstructuur betekenisvol](https://nldesignsystem.nl/wcag/2.4.10). Gebruik kopen niet alleen om tekst vet en groot te maken. - Geef afbeeldingen een [goede alternatieve tekst.](https://nldesignsystem.nl/wcag/1.1.1) -- Voeg je video? Zorg dan voor [ondertiteling](https://nldesignsystem.nl/wcag/1.2.2) zodat dove bezoekers de inhoud ook kunnen volgen -- Schrijf duidelijk, betekenisvolle [linkteksten](https://nldesignsystem.nl/wcag/2.4.4) en vermijdt "klik hier". +- Voeg je video toe? Zorg dan voor [ondertiteling](https://nldesignsystem.nl/wcag/1.2.2) zodat dove en slechthorende bezoekers de inhoud ook kunnen volgen, +- Schrijf duidelijk, betekenisvolle [linkteksten](https://nldesignsystem.nl/wcag/2.4.4) en vermijdt 'klik hier'. ## Stap 7: Eindtest met gebruikers -Test je website na de bouw en het vullen van de inhoud met gebruikers, ook met gebruikers met een beperking. +Is je website gebouwd en gevuld met inhoud? Test dan nogmaals met gebruikers. Betrek mensen met en zonder beperking -Het is een misverstand dat testen met gebruikers met een beperking hetzelfde is als testen op toegankelijkheid. Je kunt pas testen met deze gebruikers als de site helemaal toegankelijk is en voldoet aan de WCAG richtlijnen. Een blind persoon ziet niet wat ze mist. Een beperking komt niet met een handleiding. Ook deze gebruikers worstelen, net zoals gebruikers zonder beperking, met het web. +Het is een misverstand dat testen met gebruikers met een beperking hetzelfde is als testen op toegankelijkheid. Je kunt pas testen met deze gebruikers als de site helemaal toegankelijk is en voldoet aan de WCAG-richtlijnen. Een blind persoon ziet niet wat ze mist. Een beperking komt niet met een handleiding. Ook deze mensen worstelen, net als iedereen, met het web. -In deze fase testen we of gebruikers met een beperking een opdracht succesvol kunnen afronden van begin tot einde. Zoals een telefoonnummer opzoeken, een melding doen, een klacht indienen of een zwarte wollen trui in de maat M bestellen en afrekenen. +In deze fase testen we of men een opdracht van begin tot eind succesvol kan afronden. Denk daarbij aan het opzoeken van een telefoonnummer, een melding doen, een klacht indienen of een zwarte wollen trui in de maat M bestellen én afrekenen. Pas de website aan naar aanleiding van je bevindingen. -Heb je gebruikersonderzoek gedaan en wil je dat delen? Overweeg de resultaten te plaatsen gebruikersonderzoeken.nl +Heb je gebruikersonderzoek gedaan en wil je dat delen? Overweeg de resultaten te plaatsen op [gebruikersonderzoeken.nl](https://gebruikersonderzoeken.nl/) ## Stap 8: Toegankelijkheidsverklaring Alles af? Gebruikerstesten verwerkt? Inhoud helemaal gevuld. Alle formulieren werken? -Laat dan een officiële [WCAG-EM audit](https://www.digitoegankelijk.nl/toegankelijkheidsverklaring/onderzoek) doen. Liefst door een onafhankelijke partij en niet door je eigen specialist toegankelijkheid. Dit voorkomt het "[Wij van WC-eend](https://nl.wikipedia.org/wiki/Wij_van_Wc-eend_adviseren_Wc-eend)" effect. Deze audit is 3 jaar geldig. +Laat dan een officiële [WCAG-EM audit](https://www.digitoegankelijk.nl/toegankelijkheidsverklaring/onderzoek) doen. Liefst door een onafhankelijke partij en niet door je eigen specialist toegankelijkheid. Dit voorkomt het '[Wij van WC-eend](https://nl.wikipedia.org/wiki/Wij_van_Wc-eend_adviseren_Wc-eend)' effect. + +Deze audit is maximaal 3 jaar geldig. Als er grote functionele veranderingen zijn is het aan te raden om eerder een nieuwe audit te laten doen. In Nederland is er een aantal onderzoeksbureaus die officiële audits verzorgen. Verwerk eventuele punten die nog uit de audit komen. Overheidsinstellingen kunnen een toegankelijkheidsverklaring aanmaken op het [Register van toegankelijkheidsverklaringen](https://www.toegankelijkheidsverklaring.nl/register). -Als je dan een mooie toegankelijke website hebt opgeleverd wil je dat natuurlijk aan alle bezoekers vertellen. Dit kan op een speciale pagina op je website "Toegankelijkheid". +Als je dan een mooie toegankelijke website hebt opgeleverd wil je dat natuurlijk aan iedereen vertellen. Dit kan op een speciale pagina op je website 'Toegankelijkheid'. -Vermeld hierin : +Vermeld hierin: - Hoe de website getest is, met een verwijzing naar het WCAG-EM rapport of met een link naar het Register van toegankelijkheidsverklaringen. - Welke problemen er eventueel nog zijn en wanneer die worden opgelost. - Hoe bezoekers contact kunnen opnemen als ze een probleem hebben bij het gebruik van de website. +**Let op**: Zorg ervoor dat de klantenservice (of andere ontvanger van de klacht) ook weet wat te doen als er een melding over de toegankelijkheid van de website binnenkomt. + ## Stap 9: Onderhoud Een website is nooit af en verandert voortdurend, dit betreft in ieder geval de webteksten. Blijf de toegankelijkheid bewaken. Zorg ervoor dat de contentmanagers en webschrijvers getraind blijven. Want plaatjes zonder alternatieve tekst, onduidelijke links of een verkeerde koppenstructuur sluipen er zo in. Leg een procedure voor onboarding vast, ook op het gebied van toegankelijkheid. @@ -243,4 +247,4 @@ Laat regelmatig, bijvoorbeeld één keer per jaar, een controle uitvoeren door e Iedereen is verantwoordelijk voor de kwaliteit van het project. Voor de snelheid, veiligheid, leesbaarheid, gebruiksvriendelijkheid en ook voor de toegankelijkheid. -We maken een website niet voor onszelf maar voor de gebruiker. Als alle gebruikers goed met je website overweg kunnen, dan pas is je doel bereikt. +We maken een website niet voor onszelf maar voor de gebruiker. Als iedereen goed met je website overweg kunnen, dan pas is je doel bereikt.