Umbraco website WCAG toegankelijk maken

Umbraco staat bekend als het meest flexibele, open-source 'Friendly CMS' voor maatwerk websites en complexe enterprise-omgevingen. Maar hoe toegankelijk is een Umbraco website in de praktijk? Hoewel de Umbraco-community hard werkt aan de toegankelijkheid van de beheeromgeving (Backoffice), is de uiteindelijke frontend van jouw website een onbeschreven blad. Sinds de handhaving van de European Accessibility Act (EAA) en de overgang naar WCAG 2.2 ligt de volledige verantwoordelijkheid voor een barrièrevrije website bij de eigenaar van het platform.

Of je nu een bestaande Umbraco-omgeving wilt migreren van een oudere versie naar Umbraco 13+, een headless architectuur gebruikt, of werkt met sitebuilders zoals uSkinned; Cardan helpt je van bewustwording tot de volledige code- en content-implementatie.

Mannetje kijkt naar desktop scherm met Umbraco logo erop

De mythe van de 'Toegankelijkheids-plugin' in een maatwerk CMS

Wie zoekt naar snelle oplossingen, komt al gauw kant-en-klare accessibility checkers en JavaScript-overlays tegen in de markt (zoals TinyMCE's in-editor tools of losse widgets). Hoewel real-time monitoring handig is als hulpmiddel voor je redactieteam tijdens het schrijven, lossen ze de dieperliggende code-issues van een Umbraco-website nooit op.

Cardan weet uit onafhankelijke WCAG-audits dat geautomatiseerde tools maar dertig procent van de barrières vangen. Dit is waarom Umbraco-omgevingen handmatige optimalisatie vereisen:

  • Complexe filters, dynamische zoekfunctionaliteiten (zoals een zoekbalk met live suggesties) en projectkaarten (List vs. Map views) missen in de praktijk vaak de juiste ARIA-structuren (role="combobox", role="tablist"). Dit maakt ze onbedienbaar voor hulpmiddelen.

  • Bij op maat gebouwde mobiele hamburgermenu's of cookie-dialogen ontbreekt in de code vaak een 'focus trap'. Hierdoor springt de keyboard-focus onzichtbaar naar de onderliggende pagina, waardoor blinden en slechtzienden volledig vastlopen.

  • Het technisch activeren van een verplicht alt-tekst veld in de Media Library is een fluitje van een cent in Umbraco. De tool controleert echter niet of een redacteur een betekenisvolle beschrijving invoert, of dat een decoratieve pijl via CSS per ongeluk hardop wordt voorgelezen als een willekeurig cijfer.

Toegankelijkheid is geen achteraf geïnstalleerde extra optie. Het vereist een solide technisch fundament in de kern van je Umbraco-architectuur en een getraind redactieteam.

Waar moet een toegankelijke Umbraco website aan voldoen?

Om te voldoen aan de wettelijke norm (WCAG 2.2 niveau AA), moeten het design, de techniek en de contentstructuur perfect op elkaar aansluiten volgens de vier principes: Waarneembaar, Bedienbaar, Begrijpelijk en Robuust.

Voor Umbraco betekent dit in de praktijk onder andere:

  • Een logische focusvolgorde in de DOM-structuur die synchroon loopt met de visuele layout, duidelijke contrastrijke focus-outlines voor toetsenbordnavigatie, en semantische HTML-elementen (<main>, <nav>, <header>) zodat schermlezers de pagina correct kunnen indexeren.

  • Strikte validatie in de Rich Text Editor. Dit betekent dat redacteuren de koppenhiërarchie niet misbruiken voor het design (geen H3 direct na een H1) en dat formulieren en foutmeldingen programmatisch gekoppeld zijn aan duidelijke instructies in plaats van vage standaard browser-notificaties.

Wil je precies weten wat deze vier principes inhouden? Lees de volledige uitleg over de richtlijnen op onze pagina: De WCAG-richtlijnen uitgelegd.

Hoe helpt Cardan jou naar een toegankelijke Umbraco site?

  1. Grondige WCAG-Audit

    We voeren een diepgaande inspectie uit op je Umbraco-omgeving. We testen kritieke gebruikersflows (zoals formulieren en zoekfunctionaliteiten) handmatig met screenreaders (NVDA/VoiceOver) en toetsenbordnavigatie om blinde vlekken te elimineren. 

    • WCAG 2.2 onderzoeken

      Zet onze WCAG onderzoeken in om een duidelijk beeld te krijgen hoe toegankelijk jouw website, app of PDF-document is.

  2. Technisch & redactioneel rapport

    Je ontvangt een concreet rapport. Hierin scheiden we de technische issues (zoals ontbrekende ARIA-attributen in custom Umbraco UI-packages) van de redactionele verbeterpunten. 

  3. Implementatie & training

    We werken nauw samen met jouw development-partner of zetten onze eigen gecertificeerde ontwikkelaars in om structurele codefouten in de templates op te lossen. Ideaal te combineren met een migratie naar een modernere Umbraco-versie.

    • WCAG trainingen

      Volg één van onze WCAG trainingen en wordt een specialist in digitale toegankelijkheid. Schrijf je in!

  4. Compliance & monitoring

    We stellen de verplichte toegankelijkheidsverklaring op. Daarnaast configureren we samen de Umbraco Backoffice (zoals verplichte media-validatie) en trainen we je redactieteam om contentrichtlijnen structureel te handhaven.

  5. Borging & duurzame workflow

    We verankeren toegankelijkheid definitief in het Umbraco-beheerproces. Door de Backoffice-instellingen optimaal in te richten en duidelijke protocollen neer te zetten, creëren we een zelfvoorzienend team. Zo blijft je Umbraco-platform ook bij toekomstige uitbreidingen, redactionele updates en nieuwe versies gegarandeerd toegankelijk.

    • Digitale toegankelijkheid borgen

      Borg digitale toegankelijkheid van A tot Z. Stop met losse audits en veranker WCAG structureel in je bedrijf. Vraag workshop aan of plan een gesprek.

Gratis WCAG-checklist

Wil je samen met je development- of contentteam de eerste stappen zetten naar een toegankelijk platform? Download onze praktische checklist voor Umbraco-websites.

Naam ontbreekt
E-mailadres ontbreekt
Waarde ongeldig
Waarde ongeldig
Nieuwsbrief

Deze website wordt beschermd door reCAPTCHA en de privacy en gebruiksvoorwaarden van Google zijn van toepassing.

Marijn van der Laan

Meer over toegankelijke websites

  • Een toegankelijk hamburgermenu

    De hamburger is niet alleen iconisch als gerecht. Ook in de digitale wereld is het ‘hamburgermenu’ een bekende term, namelijk voor het responsieve navigatiemenu dat te herkennen is aan drie horizontale streepjes. Er zijn vaak verschillende dingen die mis gaan rondom de toegankelijkheid van dit menu, waardoor niet iedereen het menu kan waarnemen, begrijpen of gebruiken.

  • Accessibility overlays: waarom ze niet werken

    Een rollstoel-icoontje in de hoek van je website klinkt aantrekkelijk. Eén regeltje code en je bent toegankelijk. Maar de feiten, de rechtszaken en de mensen die het aangaat vertellen een ander verhaal.

Direct een WCAG-onderzoek aanvragen

Wil je precies weten waar jouw Umbraco-platform staat, juridische risico's voorkomen en je digitale bereik vergroten? Laat Cardan een professionele WCAG-audit uitvoeren.

Voornaam ontbreekt
Achternaam ontbreekt
Organisatie ontbreekt
E-mailadres ontbreekt
Waarde ongeldig
Nieuwsbrief

Deze website wordt beschermd door reCAPTCHA en de privacy en gebruiksvoorwaarden van Google zijn van toepassing.

Maartje Beek

Veelgestelde vragen over Umbraco & WCAG

  • Umbraco is uitstekend configureerbaar qua workflows. We kunnen de Media Library zo instellen dat alt-teksten verplicht zijn voordat een afbeelding gepubliceerd mag worden. Ook kunnen we de Rich Text Editor (TinyMCE core) zo limiteren dat redacteuren slechts één H1-tag per pagina kunnen gebruiken, wat cruciaal is voor een logische opbouw voor schermlezers.

  • Oudere Umbraco-versies (zoals Umbraco 7) maken gebruik van verouderde frontend-technologieën en packages die structureel erg lastig en kostbaar WCAG-proof te maken zijn. Een migratie naar een moderne, stabiele versie (zoals Umbraco 13+) is vaak het meest efficiënte moment om toegankelijkheid direct vanaf de basis correct in de broncode te verankeren.

  • Alleen in de beheeromgeving (Backoffice). Umbraco beschikt over een dedicated community-team dat ervoor zorgt dat ontwikkelaars en redacteuren met een beperking in de Backoffice kunnen werken volgens de AA-normen. Echter, de frontend (de website die je bezoekers zien) is volledig afhankelijk van hoe jouw developers de templates coderen en hoe de redactie de content invoert.

  • Dit zijn typische voorbeelden van 'overlays' die visueel prima werken, maar technisch als een aparte laag over de site liggen. Zonder actief focus-management (zoals een focus trap die de gebruiker binnen het geopende menu houdt) springt de Tab-toets onzichtbaar naar de achterliggende pagina. Hierdoor weet een screenreader-gebruiker niet meer waar hij zich bevindt.