Hoe UXinsight de eerste stappen nam richting een toegankelijke website

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.