Belangrijkste punten
- Naast focusmanipulatie zorgt focus trapping ervoor dat elementen zoals pop-ups beter toegankelijk zijn door de aandacht van de gebruiker te beperken, zodat je niet verdwaalt op de site.
- Uitdagingen bij toetsenbordnavigatie: Gebruikers die websites met een toetsenbord navigeren, in plaats van met een muis of touchscreen, kunnen moeite hebben met bepaalde interacties, zoals menu’s of pop-ups.
- Voordelen van focusmanipulatie: Door de focus van de gebruiker te verplaatsen naar nieuw geopende elementen, zoals pop-ups, wordt de navigatie soepeler en intuïtiever voor mensen die met het toetsenbord werken of ondersteunende technologie gebruiken.
- Focusbeperking voor toegankelijkheid: Focusbeperking zorgt ervoor dat de gebruiker alleen binnen een specifiek element (bijv. een pop-up) kan navigeren, zodat je niet per ongeluk de focus verliest en verdwaalt op de site.
- Regels voor UI-ontwikkeling doorbreken ten behoeve van toegankelijkheid: Hoewel het over het algemeen wordt afgeraden om het perspectief van de gebruiker te veranderen, kan het strategisch verplaatsen van focuspunten de toegankelijkheid aanzienlijk verbeteren.
- Eenvoudige implementatie: Focusmanipulatie en trapping kun je met eenvoudige code implementeren, beschikbaar als ES-module in TypeScript op GitHub, waardoor je het makkelijk in je projecten kunt integreren.
Navigeren op een website zou voor niemand een uitdaging moeten zijn, hoe je de site ook gebruikt. Veel gebruikers werken met een muis of touchscreen, maar anderen zijn afhankelijk van een toetsenbord of ondersteunende technologie. Het is voor deze mensen cruciaal dat de gebruikersinterface toegankelijk is. Dit kun je goed doen met focusmanipulatie en focus trapping – technieken die de toegankelijkheid van webelementen zoals pop-ups en menu’s verbeteren. Maar bij UI-ontwikkeling geldt een fundamentele regel: je mag het perspectief van de gebruiker niet verstoren – verplaats de focus niet, scroll niet door de pagina en verplaats de cursor niet zonder input van de gebruiker. Als het echter om toegankelijkheid gaat, kan het soms juist goed zijn om deze regel te doorbreken. Dit is het punt waar UX-best practices en toegankelijkheid elkaar kruisen.
Navigeren met het toetsenbord
Niet iedereen gebruikt een muis of touchscreen om met een website te werken; veel gebruikers vertrouwen op een toetsenbord. Dit kan komen door een blijvende beperking waardoor ze geen muis kunnen gebruiken, of door een tijdelijke situatie, zoals een arm in het gips. Daarnaast gebruiken slechtziende gebruikers vaak een toetsenbord of ondersteunende technologie die de functies van een toetsenbord nabootst.
Toetsenbordgebruikers navigeren door websites door met de tab-toets van de ene link of knop naar de andere te gaan. Het focuspunt, meestal blauw gemarkeerd, geeft aan waar ze zich op dat moment op de site bevinden. Bij links die nieuwe pagina’s openen, werkt dit naadloos. Er ontstaan echter problemen wanneer een link een menu opent of een pop-up activeert zonder een nieuwe pagina te laden. Dit is waar het sturen van de focus en het vasthouden van de focus essentieel worden voor de toegankelijkheid. Zo ziet navigeren via het toetsenbord eruit:
Focusmanipulatie
Stel je voor dat je met je toetsenbord navigeert en een artikel aan je winkelmandje toevoegt. Een pop-upbericht bevestigt dat het item is toegevoegd. Als we het focuspunt niet aanpassen, blijft de focus op de knop ‘toevoegen aan winkelmandje’ staan. Om met het toetsenbord naar de pop-up te navigeren, moet je meerdere keren op de tab-toets drukken. Dit is vooral verwarrend voor blinde gebruikers die de pop-up niet kunnen zien.
Om dit aan te pakken, verplaatsen we het focuspunt naar de pop-up. Hierdoor kunnen gebruikers makkelijk door de pop-up navigeren met de tab-toets of deze sluiten met de escape-toets. Deze aanpassing maakt pop-ups een stuk toegankelijker voor mensen die met het toetsenbord werken en voor gebruikers van ondersteunende technologie.
Focus trapping
Focus trapping tilt toegankelijkheid naar een hoger niveau. Als er een pop-up verschijnt en we geen focus trapping gebruiken, kunnen gebruikers per ongeluk wegklikken uit de pop-up en verdwalen op de site.
Om dit te voorkomen, maken we een lijst van alle elementen in de pop-up waarop de focus kan vallen. Als de gebruiker het einde van deze lijst bereikt (bijvoorbeeld de laatste knop of link in de pop-up), keert de focus terug naar het eerste element. Zo blijft de focus van de gebruiker binnen de pop-up, wat de navigatie verbetert en voorkomt dat je de weg kwijtraakt.
Focusmanipulatie en trapping implementeren
De code voor het manipuleren en vastleggen van focus is verrassend eenvoudig en staat op GitHub als een ES-module, geschreven in TypeScript. Je kunt 'm makkelijk in je projecten integreren door setTrap() te gebruiken als de pop-up opengaat en releaseTrap() als hij sluit.
Het verbeteren van de toegankelijkheid van de website door middel van focusmanipulatie en trapping zorgt voor een soepelere, intuïtievere navigatie-ervaring voor gebruikers van toetsenborden en ondersteunende technologie. Door deze technieken doordacht toe te passen, kun je een meer inclusieve online omgeving creëren die voldoet aan de behoeften van alle gebruikers.
Volgende stappen
Het maakt niet uit in welke fase je je bevindt bij je zoektocht naar het perfecte webplatform of de ideale digitale marketingtool voor jouw locatie: wij helpen je de informatie te vinden die je nodig hebt om de juiste beslissing te nemen.
- Word lid van onze community van instellingen en krijg insider-inzichten.
Ontdek hoe je het maximale uit Culturesuite haalt, leer van andere locaties en draag bij aan de ontwikkelingsroadmap van CultureSuite .Bezoek CultureHub. - Wil je zien hoe het Culturesuite werkt?
We zijn er trots op hoe makkelijk we het voor locaties maken om hun website te beheren. Daarom vertrouwen evenementenlocaties over de hele wereld op CultureSuite. Boek een persoonlijke demo. - Wil je met ons samenwerken?
Alsje een technologieleverancier, ontwerpbureau of toeleverancier bent voor de kunst- en cultuursector, horen we graag van je. Neem hier contact met ons op. - Wil je meer weten over digitale tools voor culturele instellingen?
Bekijk onze branche-inzichten en deskundig advies op onze pagina met bronnen, ons YouTube-kanaal of schrijf je in voor onze nieuwsbrief.
