Elementen in de (HTML) code

Groepeer formulierelementen die bij elkaar horen. Dit maakt de relatie tussen de onderdelen duidelijk. Ook is het makkelijker op een deel van het formulier te focussen in plaats van op het hele formulier. Doe dit visueel en in code.

Geef interactieve elementen met dezelfde functie of hetzelfde doel óók dezelfde naam als ze op meerdere pagina’s staan. Op deze manier zijn ze makkelijk te identificeren. Geef bijvoorbeeld een link naar een contactpagina niet op de ene pagina de naam “Contact” en op een andere pagina de naam “Over ons”. Verschillende namen kunnen verwarrend zijn en problemen opleveren voor mensen met een cognitieve beperking.

Een canvas-element is niet beschikbaar voor hulptechnologie. Vermijd daarom het gebruik van canvas voor een digitaal toegankelijke website of app. Zo help je mensen met die hulptechnologie nodig hebben om te navigeren door een website of app.

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.