Toegankelijk ontwerpen en vormgeven

Hoe ontwerp je een website of app digitaal toegankelijk? Hoe zorg je voor het juiste kleurcontrast? Hoe zorg je dat alle inhoud altijd leesbaar is voor bezoekers? Waar houd je rekening mee als het gaat om video's, geluiden en animaties? Hoe ga je om met webformulieren, grafieken en infographics?

Informatie in deze categorie

Tekstopmaak

Voor slechtzienden en kleurenblinden moet er voldoende contrast zijn tussen tekst, iconen, interactieve elementen en de achtergrond. In WCAG staan de eisen waaraan dit contrast moet voldoen. Houd hier rekening mee bij het kiezen van huisstijlkleuren, het ontwerpen van een website, app of het maken van een Word-template.

Lees verder over "Kleurcontrast"

Structuur & layout

Iedereen gebruikt zijn computer, tablet of smartphone op hun eigen manier. Veel mensen passen de instellingen van hun apparaat of software aan, zodat de instellingen zijn afgestemd op wat zij fijn vinden. Zorg dat de inhoud op ieder apparaat en met iedere instelling niet wegvalt en dat alles kan worden bediend. Bijvoorbeeld bij ingezoomde of mobiele weergave.

Lees verder over "Inhoud leesbaar houden bij inzoomen"

Om sneller, effectiever en onderbouwd te ontwerpen en bouwen, kun je gebruik maken van het NL Design System.

Lees verder over "NL Design System: samenwerken aan toegankelijke online dienstverlening"

Gebruik HTML-element op de juiste manier. Hiermee is informatie niet alleen visueel duidelijk, maar is ook de structuur van de inhoud duidelijk voor browsers, zoekmachines en hulptechnologie√ęn.

Lees verder over "Gebruik betekenisvolle HTML-elementen"

Gebruik standaard elementen. Vermijd het zelf maken van interactieve elementen als er een standaard digitaal toegankelijke optie bestaat. Bijvoorbeeld als HTML-element. Standaard elementen hebben standaardfunctionaliteiten en voorspelbaar gedrag. Hier kunnen makers van hulpsoftware en -apparatuur weer gebruik van maken.

Gebruik HTML-elementen op de juiste manier als goede basis voor digitale toegankelijkheid. Moet je toch een element zelf bouwen? Zorg dan dat dit element digitaal toegankelijk is.

Lees verder over "Standaard HTML of zelfgebouwde interactieve elementen"
Meer over Structuur & layout

Gebruik van kleuren

We raden af om een contrastknop te gebruiken. Als de kleurencombinaties op een website onvoldoende contrast hebben, kan een contrastknop zorgen voor een versie van de website met toegankelijke kleurcombinaties. Maar deze knop lost het probleem niet altijd op of zorgt zelfs voor nieuwe problemen.

Lees verder over "Gebruik van een contrastknop op een website"

Volgens de WCAG-eisen mag je nooit alleen kleur gebruiken om informatie over te brengen. Dit is niet toegankelijk voor mensen die kleur of kleurnuances niet kunnen waarnemen. Gebruik naast kleur altijd andere elementen om iets duidelijk te maken.

Lees verder over "Kleur gebruiken om informatie over te brengen"

Kleurgebruik is een essentieel onderdeel van een huisstijl. Hoe deze kleuren gebruikt worden, bepaalt mede de toegankelijkheid van je producten. Toegankelijk kleurgebruik gaat altijd om toegankelijke kleurcombinaties. Een kleur zelf is niet toegankelijk of ontoegankelijk.

Kies bij het ontwerpen van een huisstijl bewust voor toegankelijke kleurcombinaties.

Lees verder over "Toegankelijke huisstijlkleuren"

Afbeeldingen en grafieken

Diagrammen, grafieken en infographics tonen veel informatie op een mooie en duidelijke manier. Maar ze moeten wel digitaal toegankelijk zijn. Dan zijn ze ook goed te zien voor mensen die bijvoorbeeld slechtziend of kleurenblind zijn.

Lees verder over "Kleurgebruik in diagrammen, grafieken en infographics"

Video, geluid en animaties

Teksten en informatieve afbeeldingen in video’s zijn niet toegankelijk voor mensen met een visuele beperking. Om de video¬†toegankelijk te maken moet deze informatie ook in geluid aanwezig zijn.

Lees verder over "Tekst en afbeeldingen in een video toegankelijk maken"

De automatische ondertiteling van YouTube voldoet in de meeste gevallen niet aan de WCAG-eisen. De eis is dat er goede ondertiteling is voor doven en slechthorenden.

Lees verder over "Automatische ondertiteling van YouTube"

Webformulieren

Een bezoeker kan fouten maken in een webformulier. Met een automatische controle kun je de bezoeker vertellen wat er fout gaat en hoe het opgelost kan worden.

Lees verder over "Foutmeldingen in webformulieren"

Labels zijn de namen of instructies van invoervelden in een formulier. Labels moeten beschrijvend zijn en gekoppeld aan het invoerveld. Als je blind bent en een screenreader gebruikt, weet je door het label welke informatie je per veld moet invullen of aangeven. Vul je een formulier met spraakbediening in? Dan kun je labels uitspreken om elk veld in te vullen.

Lees verder over "Toegankelijke labels voor invoervelden in een webformulier"
Heb je gevonden wat je zocht?

Fijn dat je het antwoord op je vraag hebt kunnen vinden. Heb je een idee over hoe we onze kennisbank kunnen verbeteren?

Informatie over de verwerking van uw persoonsgegevens

Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.

Akkoordverklaring (verplicht)



Waar was je naar op zoek?

Informatie over de verwerking van uw persoonsgegevens

Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.

Akkoordverklaring (verplicht)