Toegankelijkheid op het web wordt steeds belangrijker, zeker naarmate meer bedrijven hun diensten volledig online aanbieden. Ramona Domen, software-engineer bij Team Rockstars IT en gespecialiseerd in het toegankelijk maken van websites via HTML en CSS, is spreker op Dev Summit, waar ze de talk 'Level Up Accessibility met CSS' zal geven. Tweakers Partners spreekt met haar.
“Team Rockstars IT is een IT-club met veel slimme mensen die bedrijven door het hele land helpen”, aldus Ramona. “We werken voor grote bedrijven zoals Ziggo en KPN, maar ook voor kleinere organisaties. We zetten onze expertise in op verschillende gebieden, van softwareontwikkeling tot agile-transformaties. Ik ben software-engineer en ook scrum master, maar mijn specialisatie ligt vooral in toegankelijkheid, oftewel accessibility. Momenteel help ik om de eigen website van Rockstars zelf toegankelijker te maken. We prediken dat accessibility belangrijk is, dus we moeten zelf natuurlijk het goede voorbeeld geven.”
Het gebruik van screenreaders
Accessibility wordt vaak geassocieerd met grote lettertypen en het gebruik van screenreaders. Een screenreader is een hulpmiddel dat voornamelijk wordt gebruikt door mensen die een visuele beperking hebben. Hij zet de tekst op een scherm om in gesynthetiseerde spraak- of braille-output, zodat gebruikers software, websites en digitale interfaces kunnen gebruiken, en erop kunnen navigeren. Een screenreader werkt op systeemniveau en integreert met toegankelijkheidsfuncties zoals ARIA (Accessible Rich Internet Applications) in webinhoud. Hij leest de structuur van HTML, CSS en interactieve elementen en geeft informatie over koppen, links, formulierbesturingselementen en andere dynamische inhoud. Bekende screenreaders zijn JAWS (Job Access With Speech), NVDA (NonVisual Desktop Access) en VoiceOver (voor macOS en iOS).
Kleine CSS-aanpassing, groot verschil
Toch komt er meer kijken bij ‘accessibility’. Ramona: “Toegankelijkheid gaat verder dan alleen grote letters of screenreaders. Denk bijvoorbeeld aan contrast; mensen die kleurenblind zijn, moeten ook goed kunnen zien wat er op een website gebeurt. Ook moet alles via het toetsenbord bereikbaar zijn, en de volgorde van de elementen moet logisch zijn. Vaak kun je met de tab-knop door een website navigeren, maar als de volgorde niet klopt, raakt een gebruiker de weg kwijt. Bovendien moeten applicaties tegenwoordig zowel op de computer als op mobiele apparaten werken. De knoppen moeten dus groot genoeg zijn om ook met een vinger aan te tikken.”
Ramona’s talk heeft als titel ‘Level Up Accessibility met CSS’. Hierin deelt ze een aantal concrete voorbeelden van hoe men bepaalde toegankelijkheidsproblemen kan oplossen met CSS. Ze gaat op de Developers Summit 2024 in op verschillende doelgroepen en laat zien hoe je met relatief simpele CSS-aanpassingen een groot verschil kunt maken. “We gaan ook kijken naar hoe goed moderne browsers deze aanpassingen ondersteunen. Uiteindelijk wil ik laten zien hoe je je code zo efficiënt en toegankelijk mogelijk kunt maken”, aldus Ramona. “Ik behandel een vijftal praktische voorbeelden waarbij we kijken naar de doelgroep, hoe groot de impact is, en welke oplossingen we met CSS kunnen bedenken. We duiken zelfs even de code in, om live te laten zien hoe een kleine CSS-aanpassing een groot verschil kan maken.”
“CSS wordt veel gebruikt voor de styling van websites”, vervolgt ze. “In de frontend, dus wat je ziet en waarmee je interactie hebt, werk je vaak met drie lagen: HTML, CSS en JavaScript. HTML is de basisstructuur, CSS zorgt voor de opmaak en styling, en JavaScript voegt logica en interactiviteit toe. Omdat JavaScript vaak zwaarder is en de toegankelijkheid kan beïnvloeden, probeer je zoveel mogelijk problemen op te lossen met HTML en CSS. CSS is lichter, en vriendelijker voor screenreaders.”
Dela en NS: verschillende doelgroepen, verschillende aanpassingen
Wanneer Ramona aan toegankelijkheid werkt, heeft ze steeds een ander plan van aanpak. Ze kan immers niet iedereen tevreden houden. Hoe komt ze tot die keuzes?
Ramona: “Je kunt nooit iedereen volledig tevreden stellen. Een voorbeeld dat ik vaak gebruik, is dat wij bij ons bedrijf genderneutrale toiletten hebben geïntroduceerd. Op het eerste gezicht lijkt dit heel toegankelijk; iedereen kan elke wc gebruiken, de wachtrijen worden korter en iedereen heeft toegang tot dezelfde faciliteiten. Maar voor een klein deel van onze populatie wordt het juist minder toegankelijk. Bijvoorbeeld moslima’s met een hoofddoek, die zich in een vrouwentoilet comfortabel zouden voelen om hun hoofddoek even af te kunnen doen en hun haar te fatsoeneren. Dat kunnen ze nu niet meer doen, omdat er mannen in dezelfde ruimte kunnen zijn. Dus terwijl we het voor een groot deel van de mensen toegankelijker maken, wordt het voor een kleine groep minder toegankelijk.”
“Dit geldt ook voor websites. Je kunt ze nooit voor iedereen 100 procent toegankelijk maken, omdat er altijd een nichegroep is die net andere wensen of eisen heeft. Soms zou je kunnen zeggen: maak twee applicaties die naast elkaar draaien, maar de meeste bedrijven hebben daar gewoon geen budget voor. Wat je uiteindelijk wilt doen, is je richten op je doelgroep. Denk na over wie je gebruikers zijn en wat ze nodig hebben.”
:strip_exif()/i/2006990372.jpeg?f=imagenormal)
“Tegenwoordig kunnen we gelukkig vrij goed analyseren, dankzij alle data en analytics die we tot onze beschikking hebben. We weten veel over de gebruikers; hun leeftijd, geslacht, waar ze wonen, enzovoort. Op basis daarvan stellen we profielen op en bepalen we wat hun behoeften zijn. Zo kun je prioriteiten stellen en keuzes maken. Bij mijn laatste project voor uitvaartverzekeraar Dela was de gemiddelde leeftijd van de gebruikers bijvoorbeeld vrij hoog. Dus voor die doelgroep is het belangrijk dat de tekst op de pagina goed leesbaar blijft, zelfs als iemand tot tweehonderd keer inzoomt. Ook moeten we rekening houden met het feit dat de cognitieve vaardigheden van mensen iets achteruitgaan als ze ouder worden. Daarom is het belangrijk om eenvoudige taal en duidelijke, korte zinnen te gebruiken. Een heel andere insteek heeft bijvoorbeeld de NS-app, waarvoor heel veel mensen hun telefoon gebruiken terwijl ze onderweg zijn. Voor hen is het belangrijk dat de app voldoende contrast heeft, zodat ze ook onder fel zonlicht alles goed kunnen zien. Het gaat erom dat je echt vanuit de gebruiker denkt en de website of app daarop afstemt.”
Goede voorbeelden van toegankelijke websites
Als wordt gekeken naar bekende websites van grote Nederlandse bedrijven, banken, nieuwsmedia, ziekenhuizen, enzovoort, welke zou Ramona dan aanwijzen als goede voorbeelden van hoe toegankelijkheid moet zijn geregeld?
Ramona: “Een aantal voorbeelden die ik graag noem, zijn de net genoemde NS-app, en de sites van Coolblue en BasicFit.”
“Wat goed is aan de NS-app, is dat hij een dark en light mode heeft, wat fijn is voor gebruikers die moeite hebben met fel licht of juist liever donkere achtergronden gebruiken. Ook heeft de app pop-ups die de opties uitleggen, wat heel handig is voor mensen die een screenreader gebruiken. De app hanteert eenvoudig taalgebruik op B1-niveau, zodat de teksten voor een breed publiek toegankelijk zijn. Daarnaast zijn de knoppen in de app groot genoeg om makkelijk met je vingers te bedienen, zelfs als je wat grotere ‘mannenduimen’ hebt, zoals mijn vader.”
“Coolblue heeft zijn alt-tekst goed op orde” vervolgt Ramona. “Dat betekent dat screenreaders gemakkelijk door de pagina’s kunnen navigeren en de juiste informatie oppikken. Ook de volgorde van de elementen is goed gestructureerd, zodat alles logisch en intuïtief aanvoelt voor de gebruiker. Daarnaast heeft Coolblue gekozen voor een sterk contrast in zijn huisstijl, wat helpt voor mensen met visuele beperkingen, zoals kleurblindheid. Dat maakt deze website een plezier om op te navigeren.”
“BasicFit heb ik uit nieuwsgierigheid onderzocht. Met een aantal collega’s heb ik de website ervan bekeken, en daarbij bleek dat dit bedrijf het al behoorlijk goed voor elkaar heeft. We hebben de site getest met verschillende simulaties, zoals hoe hij eruitziet voor iemand die kleurenblind is en hoe hij presteert onder fel zonlicht. Alles zag er goed uit, en ook de alt-tekst en contrasten zijn prima in orde.”
Hierom ‘moet’ je naar de talk van Ramona gaan
De hamvraag is natuurlijk waarom Dev Summit 2024-bezoekers de talk van Ramona zouden moeten volgen.
“Wat ik het allerleukste vind, is het bijhouden van de nieuwste ontwikkelingen in CSS. Er zijn tegenwoordig zaken die traditioneel in JavaScript werden opgelost, maar die je nu ook met CSS kunt oppakken. Ik ga een paar van die voorbeelden laten zien, zodat je JavaScript niet meer hoeft te gebruiken, wat je website lichter en toegankelijker maakt.”
“Een ander onderwerp waar ik erg enthousiast over ben, is een relatief nieuwe manier om kleuren natuurgetrouwer weer te geven, zoals wij ze in het echte leven zien. Dit helpt bijvoorbeeld in situaties waarbij de kleuren die je op een scherm ziet niet overeenkomen met de werkelijke kleuren. Denk aan het online shoppen van schoenen: je kiest een kleur, maar die ziet er op het scherm net anders uit dan in het echt. De nieuwe kleurenmethode zorgt voor een veel nauwkeurigere weergave en houdt de helderheid consistent, ongeacht de kleur. Dit heeft ook grote voordelen voor de toegankelijkheid voor mensen met een visuele beperking zoals kleurblindheid, omdat het contrast en de kleurperceptie sterk verbeteren.”
“Hoewel ik het niet in detail zal bespreken tijdens mijn talk, wil ik toch AI ook noemen. AI-tools kunnen enorm helpen bij het implementeren van toegankelijkheid. Stel dat je als developer nog nooit iets met accessibility hebt gedaan; dan kan AI je helpen door je de juiste richtlijnen te geven en voorbeelden te tonen. Ik gebruik AI zelf ook vaak om nieuwe dingen te leren. Dus als je je onzeker voelt over accessibility, kom dan vooral langs om mijn talk te volgen. Ik laat zien hoe je op een eenvoudige manier kunt beginnen.”
Koop nu je tickets voor de Developers Summit
De kaartverkoop voor hét evenement van het jaar dat developers in het zonnetje zet, is van start gegaan. Tickets zijn verkrijgbaar voor 299 euro (plus 1,99 euro servicekosten) of als ‘3 halen, 2 betalen’-deal. Mocht jouw werkgever de tickets betalen, dan krijg je uiteraard een factuur voor de administratie bijgevoegd. Persoonlijke gegevens worden niet gedeeld met partners.
Kijk hier voor het privacybeleid van Tweakers.
Ben je student? Mail ons dan via concepts@tweakers.net, zodat je een ticket kan kopen voor een gereduceerd tarief van 75 euro.
/i/2005930376.png?f=fpa)
/u/75437/crop5daf1210eb5fc.png?f=community){kind=small}
:strip_icc():strip_exif()/u/76569/garfield14.jpg?f=community){kind=small}
/u/742069/crop56d18b6cb7cae_cropped.png?f=community){kind=small}
:strip_icc():strip_exif()/u/134130/crop656d9955ccc54.jpg?f=community){kind=small}
/u/518735/crop590c368ed64a4_cropped.png?f=community){kind=small}
/u/25784/ResNot.GIF?f=community){kind=small}
:strip_exif()/u/53522/crop583d477015a24.gif?f=community){kind=small}
/u/109114/crop55c4c6027bcb8_cropped.png?f=community){kind=small}
/u/507029/crop56967733a9fb9_cropped.png?f=community){kind=small}
/u/189748/1984-14997.png?f=community){kind=small}
:strip_icc():strip_exif()/u/127657/crop6246f27e8175c.jpg?f=community){kind=small}