Hoe UXinsight de eerste stappen nam richting een toegankelijke website

Case​

In november 2021 organiseert UXinsight een online evenement over inclusief onderzoek. Ze willen dit online evenement graag geheel toegankelijk organiseren.

Gegevens

Datum evenement UXinsight Unfolds 2021
11-11-2021
bedrijfsleiders die UX als een onderscheidende factor ziet in de concurrentie
70%
Percentage consumenten dat vindt dat merken niet aan hun ervaringsnormen voldoen
53%

Doel

UXinsight organiseert een online evenement over inclusief onderzoek. De wens was  dat dit evenement zelf ook geheel toegankelijk georganiseerd en aangeboden zou worden. Hiervoor hebben ze de expertise van Accessibility ingeschakeld. 

Vertrekpunt

Naast het beoordelen van de digitale tools die ingezet worden tijdens het evenement is het ook belangrijk om een toegankelijkheid analyse van de website uit te voeren aan de hand van de WCAG 2.1 richtlijnen.

Een van de succesfactoren is een alternatieve tekst. Een alternatieve tekst helpt blinden en slechtzienden om afbeeldingen te kunnen waarnemen. Deze ‘alt-text’ wordt door spraaksoftware opgelezen en bevat vaak informatie over wat er op de afbeelding te zien is. Dit is belangrijk wanneer de afbeelding relevante informatie bevat.

Uitdagingen

Tekst bij Afbeeldingen

Het toevoegen van alternatieve teksten kan een grote klus zijn.  UXinsight liet zien dat er al goede pogingen waren gedaan om alternatieve teksten toe te voegen. Bijvoorbeeld de naam van een spreker op het evenement bij de foto van deze persoon. In sommige gevallen ontbrak echter nog een alternatieve tekst en werd de aanwezigheid van de afbeelding zonder inhoud benoemd. Een gebruiker weet op dat moment niet welke informatie de afbeelding bevat.

Kleurcontrast

Een hoog kleurcontrast helpt bezoekers om goed te kunnen lezen en te zien. Het komt vaak voor dat een website een licht kleurenpalet heeft met bijvoorbeeld pastel en grijstinten, die lastig te onderscheiden zijn. Dit was ook het geval bij de huisstijl van UXinsight.

Oplossing

 

Tekst bij Afbeeldingen

Aan de hand van deze bevindingen is nagegaan wat de afbeeldingen aan essentiële informatie toevoegen naast de tekstuele inhoud. Daaruit kwam de conclusie dat het beste was om het alt-text attribuut toe te voegen aan de afbeelding maar leeg te laten, hierdoor negeert de software de afbeelding. Logo’s van de partners kregen wel een alternatieve tekst, bijvoorbeeld ‘Logo of the Accessibility Foundation’, in dit geval werd hier geïnformeerd dat hier een logo staat, dit werd anders niet in tekst meegegeven.

Kleurcontrast

Na het verzamelen van alle teksten en componenten met een laag contrast is het kleurenpalet opnieuw beoordeeld en de kleuren anders toegewezen. Een van de belangrijkste component is de ‘Tickets’ knop, deze call-to-action knop had een lichtblauwe kleur die ook in het logo van UXinsight wordt toegepast. Een logische keuze voor het doorvoeren van de huisstijl naar de website maar een minder prettige keuze voor de leesbaarheid. Hier was het advies om vanuit de huisstijl een kleur te vinden die boven 4,5 contrast ratio komt, zo ontstond er een nieuwe blauwe kleur die op alle knoppen doorgevoerd kon.

Vaak wordt er bij het oplossen van kleurcontrast problemen gedacht dat de huisstijl kleuren vervangen moeten worden maar er zijn ook andere opties. In het geval van UXinsight is het contrast van de huisstijlkleuren in combinatie met witte teksten te laag wat opgelost is door een schaduw toegevoegd die het contrast verbeterd, in plaats van de kleur te vervangen.

Naast titels en knoppen geven formuliermeldingen belangrijke feedback bijvoorbeeld bij een foute invoer. Websites maken vaak gebruik van een generieke rode tekst die gebruikt wordt voor foutmeldingen. Dit kan soms voor ongelukkige kleurencombinaties zorgen. Zo verschenen de rode foutmeldingen op een lichtblauwe achtergrond op de website van UXinsight. In dit geval was er de mogelijkheid om de kleur aan te passen naar zwart om het contract en daarmee de leesbaarheid te verbeteren.

Toetsenbord vriendelijkheid

Als laatste is het gebruik van de website met enkel een toetsenbord getest. Een computer muis of trackpad is niet voor iedereen een geschikt middel om door een website te navigeren. Een alternatief is het toetsenbord, maar dat vergt wel een toegankelijke website.

Interactieve componenten zoals sliders, tabs, accordeons en modals hebben extra aandacht nodig. Denk hierbij aan toepassen van de juiste code, correcte tekstuele labels en een goede focus zichtbaarheid. Dit alles zodat de hulpsoftware het betreffende component kan openen en sluiten met de juiste feedback naar de gebruiker.

Op de website van UXinsight zijn interactieve componenten gevonden die niet helemaal goed te bedienen waren met een toetsenbord. Naast de keuze om dit te verbeteren is het voorkomen ook een goede optie door interactie componenten te vervangen met platte tekst. Tevens zijn modals geoptimaliseerd, zodat wanneer deze geopend waren, ook direct weer gemakkelijk te sluiten zijn door de focus te plaatsen op de sluitknop.

Grote uitdaging, stap voor stap

De bevindingen uit een toegankelijkheid analyse kunnen overweldigend zijn. Het clusteren van grote problemen, afweging van de inspanning tegenover toegevoegde waarde kan helpen om te prioriteiten te stellen. Vervolgens kunnen er acties ondernomen worden om de toegankelijkheid te verbeteren. UXinsight heeft de eerste stappen genomen door aandacht op één pagina te houden en direct verbeteringen door te voeren. Deze verbeteringen kunnen geleidelijk worden doorgevoerd door de rest van de website.

En nu...

Er ligt nog veel potentie bij het verbeteren van de toegankelijkheid van de website met name voor formulieren en de navigatie. Ook hier is het goed om klein te beginnen door bijvoorbeeld goed naar alle invoervelden te kijken en deze stap voor stap aan te passen. 

Tags

  • inclusieve organisatie
  • techniek
  • UX
  • webbouwers
  • webrichtlijnen
promotieplaatje UXinsight evenement

Contact

Afbeelding van Lotte Bijl

Ook jouw digitale communicatie voor iedereen toegankelijk?

Wil je advies, een training volgen of een eigen audit?
Bel of e-mail ons, of laat een bericht achter

Lotte Bijl

9 + 8 =
Los de rekensom op en geef de oplossing aan met cijfers. Bijvoorbeeld voor 'twee plus vier =?' geef een '6' op.
Privacy policy
Accessibility.nl respecteert de privacy van alle gebruikers van haar site en draagt er zorg voor dat de persoonlijke informatie die u ons verschaft vertrouwelijk wordt behandeld. Wij zullen deze gegevens uitsluitend gebruiken met uw toestemming. Accessibility.nl zal uw persoonlijke gegevens niet aan derden verkopen. Voor meer informatie zie ons volledig beleid.