Opvallend (on)toegankelijk: digitale toegankelijkheid en duurzaamheid

Vandaag is een bijzondere dag: het is nog steeds Week van de Toegankelijkheid, én het is de Dag van de Duurzaamheid. Veel mensen zullen bij duurzaamheid eerder associaties hebben met minder autorijden of minder vlees eten, maar toch zijn ook digitale toegankelijkheid en duurzaamheid verrassend veel met elkaar verbonden. En dan heb ik het niet over de snacks die je tijdens het werken aan je website of app naast je op je bureau hebt liggen 😉. Een toegankelijke website is namelijk ook duurzamer. De verbindende factor: robuust bouwen.

WCAG principe 4 – Robuust

Het vierde WCAG principe stelt dat websites robuust moeten zijn. Dat betekent dat de techniek achter de website zo gebouwd moet zijn dat zoveel mogelijk apparaten, browsers en hulptechnologieën de website goed kunnen interpreteren.

WCAG richtlijn 4.1 vraagt om maximale compatibiliteit met huidige én toekomstige technologieën. Een belangrijk succescriterium binnen deze richtlijn is 4.1.2 naam, rol, waarde.

WCAG 4.1.2 – Naam, rol, waarde

Dit succescriterium zegt dat alle interactieve onderdelen op een webpagina, zoals knoppen, formulieren of menu’s, een duidelijke naam, rol en waarde moeten hebben.

• Naam: beschrijft waar het element voor is, bijvoorbeeld “Menu openen”.

• Rol: geeft aan wat voor soort element het is, bijvoorbeeld “knop” of “checkbox”.

• Waarde: toont de status (bijvoorbeeld “aangevinkt” of “niet aangevinkt”) en/of de waarde (bijvoorbeeld bij invoerelementen).

Dit is belangrijk omdat hulptechnologieën alleen goed werken als de onderliggende code correct is opgebouwd.

Het domino-effect van robuust bouwen

Wanneer interactieve componenten correct zijn opgebouwd (denk aan knoppen, formulieren, chatbots), blijft de website toekomstbestendig. Een robuuste website blijft werken, ook als apparaten, browsers of hulptechnologieën veranderen.

Robuust bouwen raakt ook de andere WCAG-principes:

• Waarneembaar: een duidelijke naam, rol en waarde of status zorgen ervoor dat alle gebruikers de inhoud kunnen waarnemen, zij het visueel of via hulptechnologieën.

• Bedienbaar: goed gedefinieerde elementen zorgen dat iedereen, met of zonder hulpmiddelen, de elementen kan bedienen en kan navigeren op de website.

• Begrijpelijk: een consistente en duidelijke structuur maakt het gebruik van de website eenvoudiger.

Een robuuste basis voorkomt dus automatisch andere toegankelijkheidsproblemen.

Voorbeeld uit de praktijk

Tijdens een onderzoek op een website kwam ik uitklapbare FAQ-componenten tegen. Deze waren gebouwd met div-elementen die interactief waren gemaakt. Dit leidde tot verschillende problemen:

• Er kon geen goede toegankelijkheidsnaam, rol en status (in- of uitgeklapt) worden bepaald → afkeuring onder succescriterium 4.1.2 (naam, rol, waarde).

• De status “open/dicht” was visueel zichtbaar, maar niet programmatisch voor hulpsoftware beschikbaar → afkeuring onder succescriterium 1.3.1 (info en relaties).

• De componenten konden geen toetsenbordfocus ontvangen en dus niet door iedereen bediend worden → afkeuring onder succescriterium 2.1.1 (toetsenbord).

• Verborgen linkjes in de ingeklapte delen ontvingen tóch toetsenbordfocus bij het navigeren door de pagina → afkeuring onder succescriteria 2.4.3 (focus volgorde) en 2.4.7 (focus zichtbaar).

De oplossing was simpel: standaard HTML-elementen gebruiken, bijvoorbeeld details- en summary-elementen. Deze bevatten automatisch de juiste semantiek en toetsenbordfunctionaliteit. Eén aanpassing loste in één klap meerdere problemen op.

Standaard HTML-elementen zijn je beste vriend

Het gebruik van standaard HTML-elementen verlaagt het risico op toegankelijkheidsproblemen en zorgt voor duidelijke, robuuste code. Als er bijvoorbeeld een button-element wordt gebruikt, dan kan software direct bepalen dat dit een knop is.

Op maat geprogrammeerde interactieve componenten kunnen ook werken, maar vragen extra maatregelen:

• Rollen moeten handmatig worden toegevoegd via WAI-ARIA.

• Extra scripts zijn nodig om status of waarden door te geven.

• De code wordt complexer, foutgevoeliger en zwaarder.

Complexe code betekent ook een hogere digitale belasting: meer onderhoud, zwaardere bestanden, en dus meer servercapaciteit en energieverbruik. Hier raakt toegankelijkheid direct aan duurzaamheid.

De link met duurzaamheid

Robuust bouwen levert niet alleen inclusieve websites op, maar ook groenere websites:

• Minder verspilling: één goed gebouwde versie is voldoende voor álle gebruikers. Geen aparte “toegankelijke versies” → minder code, minder onderhoud, minder serverbelasting.

• Langere levensduur: robuuste sites hoeven minder vaak gerepareerd of herbouwd te worden, wat tijd, geld én energie bespaart.

• Efficiëntere websites: toegankelijke sites zijn vaak sneller en lichter, waardoor ze minder dataverkeer en energie verbruiken.

Daarnaast is digitale toegankelijkheid een belangrijk onderdeel van sociale duurzaamheid: het garandeert dat iedereen kan meedoen in onze digitale wereld.

Meer weten?

Robuust bouwen is dé brug tussen toegankelijkheid en duurzaamheid. Door slimme, standaardtechnieken te gebruiken, maken we het web niet alleen inclusiever, maar ook groener en toekomstbestendiger. Dus: stap op de fiets, eet vegetarische gehaktballen én maak je website of app toegankelijk voor iedereen!

Handige links:

• Check de Understanding van WCAG 2.2 succescriterium 4.1.2 van het W3C.

• Lees meer over het gebruik van WAI-ARIA voor verschillende ontwerppatronen.

• Ontdek de “Web Sustainability Guidelines (WSG)”, de “groene” tegenhanger van de WCAG.

Vragen?

Heb je inhoudelijke vragen over dit onderwerp of andere zaken omtrent WCAG? Mail dan naar support@cardan.com. Heb je een specifiek onderwerp dat je graag wilt zien terugkomen? Stuur ons dan een e-mail naar contact@cardan.com.