• Home
  • Blog
  • Umbraco toegankelijk voor iedereen

Umbraco toegankelijk voor iedereen

Bij Perplex maken we ons al jaren druk om accessibility, ofwel toegankelijkheid op het web. Onze mening is dat iedereen een website naar wens moet kunnen gebruiken. Sinds kort halen we voor diverse websites het officiële Waarmerk drempelvrij.nl binnen en maken we ons hard voor het ontwikkelen van drempelvrije websites. Ook geven we graag ‘voorlichting’ aan mede-websitebouwers. Afgelopen lente besloten we om Umbraco zelf eens aan een test te onderwerpen. Want een drempelvrije site is leuk, maar is het niet net zo belangrijk dat Umbraco zelf accessible is?

“Natuurlijk is het een ‘Edge case’ of slechtzienden een website moeten kunnen beheren.
Maar waarom eigenlijk? Moet dit niet gewoon voor iedereen toegankelijk zijn?”

Een aantal maanden geleden hebben we het Nederlandse bureau voor het Waarmerk drempelvrij.nl (Stichting Accessibility) gevraagd om de voormalige Umbraco-versie, in combinatie met onze eigen Perplex-starter package te controleren. Deze baseline-check van Umbraco was eigenlijk al zeer positief. Op maar liefst 31 van de 38 gecontroleerde punten voldeed Umbraco al.

Tijdens de afgelopen Umbraco Retreat heeft onze collega Jeffrey, samen met Mads van Umbraco HQ, gewerkt aan enkele openstaande punten, zodat Umbraco in de toekomst volledig voldoet aan alle eisen. In dit blogitem lichten we de baseline-rapportage uit en behandelen we de zeven openstaande punten. We leggen uit wat exact het probleem is en bieden een mogelijke oplossing. In het vervolg op deze blog lichten we toe welke werkzaamheden zijn verricht en wat we de komende tijd nog oppakken.

Een voorbeeld van het correct implementeren van de richtlijn 1.1.1 Niet-tekstuele content.

1.1.1 Niet-tekstuele content

Richtlijn: Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient. 
WCAG Specifications | Umbraco Issue 10207 

Omschrijving: Zorg bij iconen en afbeeldingen voor een tekstalternatief, zodat blinde bezoekers met behulp van voorleessoftware snappen wat de afbeelding weergeeft. Bij afbeeldingen in de HTML kan dit gedaan worden door het toevoegen van een alt-tekst. Bij iconen, die vaak via een background-image of een icon font worden geladen, kan dit met behulp van een verborgen tekst die het icoon beschrijft.

Umbraco: Binnen Umbraco worden veel iconen gebruikt om een status, doel of type van een node aan te geven. Een voorbeeld hiervan zijn de iconen binnen de node-tree. Bij het zien van een huisje voor één van de Umbraco-nodes snapt de gebruiker dat dit de hoofdnode of homepage is, maar voor iemand die gebruik maakt van de voorleessoftware is dit onduidelijk. Door aan dit icoon een omschrijving mee te geven snapt ook deze gebruiker wat er bedoeld wordt.

1.3.2 Betekenisvolle volgorde

Richtlijn: Als de volgorde waarin content wordt gepresenteerd van invloed is op de betekenis, kan een betekenisvolle leesvolgorde door software bepaald worden.
WCAG Specifications | Umbraco Issue 10209

Omschrijving: De volgorde van uw HTML dient gelijk te zijn aan de volgorde waarin deze zichtbaar is voor de gebruiker. Het kan voor gebruikers verwarrend of desoriënterend zijn als een hulptechnologie de content in een verkeerde volgorde voorleest.

Umbraco: Een voorbeeld hiervan binnen Umbraco is de overlay die getoond wordt na het selecteren van de profielopties. Doordat deze overlay niet direct na de button in de DOM voorkomt, is deze lastig te bereiken met het toetsenbord en zullen gebruikers van voorleessoftware niet snappen wat er na het selecteren gebeurd is op het scherm.

2.1.1 Toetsenbord

Richtlijn: Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface, zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.
WCAG Specifications | Opgelost in Umbraco Issue 9991 

Omschrijving: Het bedienbaar maken van de interface voor het toetsenbord is één van de belangrijkste aspecten van toegankelijkheid. Zowel gebruikers met een motorische beperking of lichamelijke afwijking als gebruikers die blind of slechtziend zijn, navigeren met het toetsenbord. Hierbij is het van belang dat alle elementen binnen de pagina met het toetsenbord toegankelijk en te bedienen zijn. Daarnaast moet de gebruiker zonder bijvoorbeeld een muis, acties als selecteren, verplaatsen en schalen kunnen uitvoeren.

Umbraco: Met de tabtoets loopt de gebruiker op een logische volgorde door de pagina heen en springt hij of zij van link naar link (de tabtoets is aan te roepen met de Enter-toets). Daarnaast is het van belang dat elementen als een overlay weer sluiten met Escape, de navigatie of tabs ook bedienbaar zijn met de pijltjestoetsen en buttons of andere input-elementen met de spatiebalk te selecteren zijn.

Het grootste struikelblok binnen Umbraco is dat de content-tree niet te bedienen is met het toetsenbord. Dit komt doordat veel linkjes binnen de tree geen echte links zijn. Buttons, invoervelden en links met een href ontvangen automatisch focus, hier zijn geen aanpassingen voor nodig. De “links” om de node-opties te tonen of om de tree uit te klappen naar een lager niveau voldoen hier echter niet aan, omdat de href ontbreekt en het klikken via Angular gebeurt.

Een voorbeeld van het implementeren van skiplinks (richtlijn 2.4.1.)

2.4.1 Contentblokken omzeilen

Richtlijn: Er is een mechanisme beschikbaar om contentblokken die op meerdere webpagina's worden herhaald te omzeilen. 
WCAG Specifications | Opgelost in Umbraco Issue 9991

Omschrijving: Door het toevoegen van zogenaamde skiplinks is het voor gebruikers eenvoudiger om delen van een pagina over te slaan of naar een specifiek deel te navigeren. Doordat pagina’s binnen een website of applicatie vaak binnen dezelfde structuur zijn opgebouwd, kan het handig zijn om contentblokken die op elke pagina voorkomen over te slaan. Door delen te skippen navigeert de gebruiker direct naar de inhoud van de bezochte pagina.

Umbraco: Skiplinks zijn voor reguliere bezoekers niet zichtbaar en worden pas getoond zodra deze focus ontvangen. Door deze links als eerste binnen de HTML te plaatsen, is dit voor bezoekers die de site met een toetsenbord bedienen het eerste wat ze te zien krijgen, zodra ze beginnen met navigeren.

Op elke pagina binnen Umbraco zou het mogelijk moeten zijn om via deze links te navigeren naar de belangrijkste inhoud, zodat deze snel  te bekijken en bewerken is. Daarnaast kan een extra skiplink toegevoegd worden voor snelle navigatie naar de content-tree. Zonder skiplinks moet de gebruiker bij elke nieuwe pagina door de gehele navigatie, het zoekveld en de content-tree ‘tabben’, voordat men het deel om content aan te passen en te beheren bereikt.

2.4.3 Focus volgorde

Richtlijn: Als een webpagina sequentieel genavigeerd kan worden en de navigatiesequenties hebben invloed op de betekenis of het gebruik, dan krijgen focusbare componenten de focus in de juiste volgorde, waardoor betekenis en bedienbaarheid behouden blijft. 
WCAG Specifications | Opgelost in Umbraco Issue 9991

Omschrijving: De focus binnen een webpagina geeft aan waar de gebruiker zich bevindt en welke button of link er geselecteerd is. De volgorde waarin deze elementen gefocust kunnen worden moet op een logische manier gebeuren, waarbij de focus niet willekeurig over het hele scherm schiet.

Een goede volgorde alleen is vaak niet voldoende. Als we bijvoorbeeld een pop-up nemen die geopend wordt door te klikken op een button, zal de focus zich moeten verplaatsen naar de inhoud van de pop-up. De gebruiker kan dan binnen dit venster verder navigeren. De focus op alle andere elementen buiten de pop-up moet tijdelijk disabled worden, totdat de pop-up weer gesloten is. Op deze manier is de tabvolgorde logisch en verdwalen gebruikers niet, zodra ze navigeren met het toetsenbord of een screenreader. 

Umbraco: Op dit gebied zijn er binnen Umbraco nog wel wat toevoegingen mogelijk. Voor interface-elementen zoals tabs is het van belang dat deze zo eenvoudig mogelijk werken en simpel navigeerbaar zijn. Bij de selectie van een item moet de focus zich verplaatsen naar de inhoud van de gekozen tab, zodat de gebruiker deze direct kan selecteren.

2.4.7 Focus zichtbaar

Richtlijn: Elke gebruikersinterface die met een toetsenbord te bedienen is, heeft een bedieningswijze waarbij de indicator van de toetsenbordfocus zichtbaar is. WCAG Specifications | Opgelost in Umbraco Issue 9991 

Omschrijving: De focus binnen de pagina moet altijd visueel zichtbaar zijn en duidelijk aangeven waar de gebruiker zich bevindt. Dit is gemakkelijk te bekijken door zelf te navigeren met de tabtoets en na elke klik te controleren of de focus nog steeds zichtbaar is.

De styling van de focus kan simpel toegevoegd worden door de :focus selector in je CSS. Hiermee kan ook de standaard focus van de browser (een dun blauw lijntje) aangepast worden. Zorg er wel voor dat u de standaard focus nooit helemaal verwijderd. 

Umbraco: In Umbraco is er voor de nodes in de content-tree en de tabs bovenaan de pagina geen focus ingesteld en is de standaard focus uitgeschakeld. Hierdoor is het voor de bezoeker onmogelijk om te zien waar hij of zij zich bevindt en is navigeren bijna onmogelijk.

Een voorbeeldimplementatie van de richtlijn 4.1.2. Naam, rol, waarde.

4.1.2 Naam, rol, waarde

Richtlijn: Voor alle componenten van de gebruikersinterface (inclusief, maar niet uitsluitend voor formulier-elementen, links en door scripts gegenereerde componenten) kunnen de naam (name) en rol (role) door software bepaald worden; dit geldt ook voor toestanden (states), eigenschappen (properties) en waarden (values) die de gebruiker kan instellen. Kennisgeving van veranderingen in deze items is beschikbaar voor user agents, inclusief hulptechnologieën. WCAG Specifications | Umbraco Issue 10208

Omschrijving: Voor gebruikers die de content op een pagina niet kunnen zien, is het van belang dat zij begrijpen hoe bepaalde elementen werken of gebruikt moeten worden. Hierbij is juist gebruik van HTML-elementen essentieel. Bijvoorbeeld door invoervelden met een juiste beschrijving te labelen, snappen bezoekers wat er van hen verwacht wordt. Is er een specifieke invoer gewenst of verplicht, zoals vaak bij een datumveld het geval is, dan moet dit duidelijk aangegeven worden.

In webinterfaces zoals Umbraco is juist gebruik van HTML vaak niet voldoende. Je hebt binnen pagina’s te maken met acties die uitgevoerd kunnen worden en bepaalde statussen die interface elementen kunnen hebben. Speciaal hiervoor is ARIA (Accessible Rich Internet Applications) ontwikkeld.

ARIA maakt het mogelijk om aan (delen van) webpagina’s een extra laag informatie toe te voegen, iets wat met alleen HTML niet mogelijk is. Denk hierbij aan het toevoegen van een rol (role), eigenschap (property) of status (state) aan elementen binnen de pagina. Een lijst kan op deze manier omgevormd worden tot een menu [role=”menu”] en er kan een submenu worden toegekend aan een item binnen deze lijst [aria-haspopup="true"]. Daarnaast kunt u met [aria-expanded="false"] aangeven of iets op dat moment wordt getoond en nog een naam of titel meegeven [aria-labelledby].

Naast ARIA kan de status en titel van elementen ook via een verborgen tekst worden voorgelezen aan gebruikers. Omdat ARIA een relatief nieuwe technologie is, die alleen door recente voorleessoftware wordt ondersteund, is het toevoegen van een verborgen tekst vaak ook een prima oplossing.

Umbraco: Binnen Umbraco wordt nog weinig aandacht besteed aan het meegeven van rollen en statussen aan elementen van de interface. De meeste statussen (actief of disabled) zijn alleen visueel en dus voor de voorleessoftware niet zichtbaar.

In onze beleving zijn openstaande punten zeer goed te doen, en kunnen we er met wat extra liefde voor zorgen dat Umbraco zijn slogan (“The Friendly CMS”) kan uitbreiden naar “The Friendly CMS, for everyone”. Zoals gezegd volgt in onze volgende blog meer over het werk dat inmiddels is verricht en gaan we nog in op de laatste punten.

Heeft u vragen of ideeën? dan horen we dat uiteraard graag! Interesse in het toegankelijk maken van uw website? neem dan contact met ons op.

Lees ook

Personalisatie van een website in Umbraco