Toegankelijk bouwen en ontwikkelen

Met opsommingen of lijsten kun je informatie ordenen. Als een opsomming goed opgemaakt is, dan is de opsomming beter bruikbaar voor bijvoorbeeld blinde mensen die een schermlezer gebruiken. Een schermlezer kan aangeven hoe groot een lijst is en maakt het mogelijk een opsomming over te slaan. Ook voor andere mensen zijn opsommingen overzichtelijk en is informatie makkelijker te ‘scannen’.

Een inline frame of iframe is een techniek om andere inhoud in te sluiten op een webpagina. Bijvoorbeeld bij video’s van Youtube of Vimeo die je aan een pagina toevoegt. De inhoud van dit iframe moet ook toegankelijk zijn.

Het is belangrijk dat bezoekers genoeg tijd krijgen om jouw website of app te gebruiken. Tijdslimieten zijn voor veel mensen erg vervelend.

Het instellen van een tijdslimiet zorgt er vaak voor dat mensen niet voldoende tijd hebben om de actie uit te voeren. Vermijd daarom het gebruik van tijdslimieten.

Iedereen gebruikt een 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 en functionaliteiten hetzelfde blijven, los van het apparaat of de persoonlijke instelling van de bezoeker. Bijvoorbeeld bij ingezoomde of mobiele weergave.

Geef elke webpagina of elk scherm een duidelijke paginatitel die het onderwerp of het doel van de pagina beschrijft. Dit helpt bezoekers de inhoud te vinden en zich te oriënteren.

Sommige mensen kunnen niet goed zien. Voor hen is het belangrijk dat ze de tekst op je website of in een app tot 2 keer zo groot kunnen maken zonder hulptechnologie. Zo kan iedereen de inhoud goed lezen en dezelfde functies gebruiken.

Je vervangt een label niet met een placeholdertekst. De placeholdertekst is de tekst die in een invoerveld staat, voordat de bezoeker iets invoert. Deze tekst is vaak een instructie of een voorbeeld van wat de bezoeker in het veld invult.

Houd tijdens het ontwerpproces vanaf het begin rekening met digitale toegankelijkheid. Lees de eisen waar je aan moet voldoen vanuit WCAG en volg een training digitale toegankelijkheid voor ontwerpers. Zo weet je waar je als ontwerper rekening mee moet houden.

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.

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.

Er is een verschil tussen gewone ondertiteling en de ondertiteling speciaal voor doven en slechthorenden. Voor goede digitale toegankelijkheid is de ondertiteling voor doven en slechthorenden belangrijk.

Een interactieve afbeelding is een afbeelding die werkt als een knop of link. Zorg altijd voor een tekstalternatief, zodat ook mensen die blind zijn het doel van de link of knop kunnen achterhalen.

De informatie die een afbeelding geeft, moet toegankelijk zijn voor mensen die de afbeelding niet of slecht kunnen zien. Maak deze informatie toegankelijk met een tekstueel alternatief.

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.

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.

Veel websites en apps hebben een logo dat ook een link is naar de homepage. Zorg voor een goede alternatieve tekst en een duidelijke focusindicator.

Het invullen van online formulieren kan lastig zijn. Daarom moeten online formulieren de mogelijkheid hebben om invoervelden met persoonlijke informatie automatisch te vullen. Denk hierbij aan de naam en het adres van een persoon.

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.

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.

Zorg dat mensen die een toetsenbord gebruiken om te navigeren niet vast komen te zitten in een deel van de website. Dit noemen we een toetsenbordval. Dit gebeurt wanneer iemand bijvoorbeeld niet verder kan navigeren in een formulier of een groep links. Bij apps gebruik je een extern toetsenbord.

Gebruikers moeten kunnen zien welk element van een webpagina of appscherm focus heeft. Dit is belangrijk voor ziende gebruikers die navigeren met het toetsenbord. De focus geeft aan waar de bezoeker zich bevindt en welk element ze op dat moment kunnen activeren.

Op websites en in apps kun je met een toetsenbord of schermlezer door verschillende onderdelen navigeren. De volgorde waarin dat gebeurt, noemen we de focusvolgorde. Het is belangrijk dat deze volgorde logisch is, zodat iedereen de website of app goed kan gebruiken.

De focusvolgorde bepaalt langs welke interactieve elementen je gaat, zoals knoppen, links en formuliervelden. Een schermlezer leest ook koppen, tekst en afbeeldingen voor.

De knop en het menu dat uitklapt moet voor digitale toegankelijkheid aan een groot aantal eisen voldoen. Een digitaal toegankelijk uitklapmenu helpt bezoekers het menu te vinden, bedienen en te begrijpen.

Zorg dat de link niet in een nieuw tabblad opent, maar laat de link openen in hetzelfde tabblad. Het openen van links in een nieuw tabblad is voor veel bezoekers verwarrend.

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

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.

Een statusbericht vertelt je bijvoorbeeld of iets goed of fout ging of hoe ver een bepaald proces is. Gebruikers van hulptechnologie moeten een melding krijgen als een statusbericht verschijnt zonder dat de focus naar het bericht verplaatst wordt.

Een screenreader hoeft niet alle inhoud op een webpagina of scherm voor te lezen. Het kan voor de bezoeker zelfs vervelend zijn om dubbele of onnodige informatie te krijgen.

Accessible Rich Internet Applications (ARIA) is ontwikkeld om ontoegankelijke HTML-code toegankelijker te maken. Deze techniek is bedoeld als het laatste redmiddel. Bijvoorbeeld bij situaties waar je bestaande code niet kan vervangen door HTML-elementen.

Screenreaders lezen de inhoud van een website of app voor aan mensen die moeite hebben om dit zelf te lezen. Hulptechnologie kan schakelen tussen verschillende talen, maar kan de taal niet altijd zelf bepalen. Stel de taal in van de inhoud op je webpagina, daarmee zorg je voor een betere ervaring voor je bezoekers.

Stembediening (Voice Control) helpt mensen met motorische beperkingen. Voor hen is het mogelijk om met stembediening te navigeren door een website of interactieve elementen zoals menu’s, links en knoppen.

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.

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.

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.

Met skiplinks kan een bezoeker een stuk op een website overslaan. Dat is handig voor delen van een website die op elke pagina hetzelfde zijn. Bijvoorbeeld het logo en het menu aan de bovenkant van de pagina.

Als ontwikkelaar ben jij degene die een toegankelijk ontwerp op de juiste manier omzet naar een toegankelijke website of app. Goed opgebouwde code is daarbij heel belangrijk. Die zorgt ervoor dat informatie voor iedereen waarneembaar en bruikbaar is. Lees de eisen waar je aan moet voldoen vanuit WCAG of volg een training digitale toegankelijkheid voor ontwikkelaars. Zo weet je waar je rekening mee moet houden.