Hoe deze toegankelijke website nog toegankelijker is gemaakt
Gepubliceerd: 29 mei 2020
Digitale toegankelijkheid is van groot belang in onze maatschappij. Een groot deel van de gebruikers van het web heeft een beperking; lichamelijk of gebonden aan de situatie: een persoon kan (gedeeltelijk) blind zijn, maar kan ook de felle zon in zijn scherm hebben. In beide situaties kan de gebruiker niet (goed) zien wat er op het scherm gebeurt. Voor veel beperkingen bestaan er oplossingen om het online leven van deze personen te verbeteren. In deze blog lees je een update over hoe Create.nl zich verder heeft ontwikkeld in toegankelijkheid.
Begin september 2019 heeft Create een introductie gegeven over de wetgeving tegenover digitale toegankelijkheid. Hierin werd ook aangegeven hoe Create toegankelijkheid toepast op hun eigen sites en op de producten van opdrachtgevers. In de maanden die daarop volgden, hebben er nieuwe updates plaatsgevonden rondom de algemene toegankelijkheid. Lees de blog ‘Voldoet jouw website al aan de nieuwe wet?’ via de volgende link: https://create.nl/blogs/voldoet-jouw-website-al-aan-de-nieuwe-wet
Reisziekte op je scherm
Het web ontwikkelt zich erg snel. De rekenkracht van computers en mobiele telefoons maken veel complexe visuele overgangen en animaties mogelijk. Denk bijvoorbeeld aan Google Earth; oorspronkelijk een applicatie die gebruikers dienden te installeren — nu gewoon te gebruiken binnen je webbrowser (https://earth.google.com/web/ ).
De mogelijkheid om meer complexe berekeningen te kunnen maken zorgt er tevens voor dat er meer beweegt op de schermen van gebruikers. Voor velen zorgt dit voor een verbeterde gebruikservaring, maar er zijn ook gebruikers die bewegingsziekte kunnen ervaren: Ze worden duizelig en kunnen alles niet meer zo goed volgen. Men die dit ervaart heeft de mogelijkheid om overgangen en animaties te reduceren. Dit wordt gedaan in de toegankelijkheidsinstellingen van hun operatiesysteem. Browsers kijken hiernaar en laten websites weten dat gebruikers graag minimale bewegingen willen ervaren.
Create.nl maakt niet veel gebruik van overgangen of animaties, maar waar het wel gebruikt wordt is de bewegingsreductie toegepast. Voorbeelden hiervan zijn de knoppen die een glitch-effect hebben, alsof er een storing plaatsvindt binnen de knop. Dit geeft een speels effect en hint naar het feit dat wij techneuten zijn.
De implementatie hiervan is al volgt:
CSS
1.button:hover {
2 // Voorbeeld animatie
3 animation: glitch-button .3s steps(2) alternate;
4}
5
6@media (prefers-reduces-motion: reduce) {
7 .button:hover {
8 animation: none;
9 background-color: #ff771a;
10 }
11}
Hoofdnavigatie overslaan
Websites zijn op diverse manieren te navigeren. Er kan gebruik worden gemaakt van de muis, maar ook van het toetsenbord. Bij toetsenbordnavigatie wordt er onder meer gebruik gemaakt van de Tab-toets om de focus te wijzigen, en de spatie of enter-toets om te interacteren. Meer over dit specifieke onderwerp staat beschreven in onze vorige blog over toegankelijkheid.
Mensen die het fijn vinden een website te gebruiken aan de hand van een toetsenbord, in plaats van een muis, moeten vaak meerdere keren op hun Tab-toets drukken voor zij terechtkomen waar ze willen zijn. Dit komt omdat de browser — die de focus bepaalt van waar de gebruiker op dat moment ‘is’ — net als mensen, van linksboven naar rechtsonder de webpagina ‘leest’. Iedere keer dat een nieuwe pagina wordt geopend, reset deze focus weer naar linksboven. Veel websites maken gebruik van de standaard om een logo linksboven te plaatsen, gevolgd door het hoofdmenu; zo ook Create.nl.
Toetsenbord gebruikers dienen in veel gevallen voorbij het logo en de hoofdnavigatie te 'tabben', voordat zij de hoofdinhoud van de pagina hebben bereikt. Bij een navigatie met veel hyperlinks kan dit als vervelend worden ervaren. Om deze reden is het menu van Create.nl voorzien van een ‘Sla navigatie over’ knop. Deze knop komt in beeld wanneer iemand gebruik maakt van de Tab-toets, en voorbij het logo focust.
Als de ‘navigatie overslaan’ knop focus heeft, en er op de enter toets wordt gedrukt, dan weet de browser dat de focus moet verspringen naar het eerste interactieve element wat na het hoofdmenu verschijnt.
Offline feedback
Garantie voor een stabiele internetverbinding is nog steeds niet iets wat gegeven kan worden. Het is je vast wel eens opgevallen dat je een website bezoekt die erg traag oogt. Wanneer je naar een andere pagina probeert te navigeren, duurt het erg lang. Als je vervolgens de pagina ververst, misschien gaat dit uiteindelijk vanzelf, krijg je een melding waarin staat dat je de verbinding bent verloren. Dit kan een gebruiker erg in de weg staan, omdat dit niet van tevoren bekend was.
Wanneer de internetverbinding is weggevallen, op het moment dat een gebruiker Create.nl bezoekt, ontvangt deze gebruiker een melding onderaan het scherm dat hem deze informatie geeft.
Andere informatie dat Create.nl aan zijn gebruikers deelt, is of blogs offline leesbaar zijn. Dit is mogelijk door het feit dat pagina’s van Create.nl gecachet worden. Cachen betreft een techniek die pagina’s op het toestel van de gebruiker opslaat, waardoor er de volgende keer geen data opgehaald hoeft te worden via internet. Hiermee bespaart de gebruiker internet data, en zorgt het ervoor dat de gewenste pagina sneller laadt. Deze informatie is enkel op het apparaat van de gebruiker beschikbaar, en wordt alleen ingezet om de laadsnelheid te verbeteren. Een bijkomend voordeel hiervan is dat de pagina ook zonder internetverbinding te bekijken is. Create.nl laat per blog weten of deze offline te lezen is.
Toevoegingen op het donkere thema
In de vorige blog over toegankelijkheid is er aandacht besteed aan het donkere thema. Deze ondersteuning is reeds uitgebreid. Liefhebbers van een ‘darkmode’ zullen blij verrast zijn met deze toevoegingen.
Moderne laptops en mobiele telefoons maken gebruik van veel sensoren om informatie uit hun omgeving te werven. Denk hierbij aan sensoren die kunnen achterhalen hoe jouw telefoon is gedraaid, om te wisselen tussen ‘portrait’ en ‘landscape’. Of bijvoorbeeld een sensor die kijkt of de telefoon tegen je oor is gehouden tijdens het bellen, zodat het scherm uitgeschakeld wordt, zodat je niet per ongeluk iets aanklikt met je oor.
Recentelijke ontwikkeling binnen browsers hebben ervoor gezorgd dat een aantal sensoren ook te gebruiken zijn door websites — en het worden er steeds meer. Een van de sensoren die momenteel te gebruiken is, heet de ‘Ambient Light Sensor’; de omgevingslichtsensor. Met deze sensor kan het apparaat zien of de gebruiker zich in een lichte of donkere omgeving bevindt. Create.nl heeft dit geïmplementeerd in het donkere thema. Er werd bijvoorbeeld al gekeken naar het uur van de dag: Het donkere thema schakelt automatisch aan wanneer het avond is. Door de omgevingslichtsensor schakelt de website ook over naar het donkere thema wanneer de gebruiker zich in een donkere ruimte bevindt. Op deze manier wordt de gebruiker niet verblind door een zee van wit licht, wanneer hij Create.nl bezoekt in een donkere omgeving.
Create.nl slaat de voorkeur omtrent kleurthema op het toestel van de gebruiker op, mits de gebruiker de cookies hiervoor heeft geaccepteerd. Automatische detectie en activatie van het donkere thema wordt uitgeschakeld wanneer de gebruiker zelf een thema heeft gekozen via de website instellingen. Dus als je al eens een voorkeur hebt geselecteerd in de website instellingen, werkt de omgevingslichtsensor-detectie niet. In dat geval zou je het wel kunnen zien in een incognito-venster of in een andere browser, mits deze sensor implementatie ondersteund wordt.
Op de contactpagina staat een Google Maps kaart implementatie. Hier kan men gemakkelijk een route plannen naar het kantoor van Create. Wanneer het donkere thema aangaat, dan blijven de lichte kleuren van deze kaart hetzelfde. Dit werd als een doorn in het oog ervaren door veel gebruikers: Reden genoeg om het aan te passen naar een donkere kaart. Google Maps komt standaard niet met een donker thema, maar door een handige stijl-wijziging wordt de kaart op Create.nl wel mooi donker.
Overige toegankelijksverbeteringen
Naast de grotere implementaties die de toegankelijkheid ten goede komen, zijn er meer verbeteringen aangebracht. Deze toevoegingen worden hieronder kort toegelicht.
Ondersteuning voor oudere browsers
Een aantal functionaliteiten zorgde ervoor dat de website niet werkte op erg oude browsers. In principe ondersteunt Create enkel de browsers die de ‘vendors’ (de bedrijven achter de browsers) ook ondersteunen. Toch zal het verhelpen van deze problemen op oude browsers voor de algemene gebruikersgroep een aanwinst zijn.
Toetsenbord ondersteuning portfolio galerij
In de periode tussen de vorige blog over toegankelijkheid en deze, heeft Create.nl een update gehad rondom het portfolio. Projecten van Create worden hier getoond, om bezoekers een beeld te geven van hetgeen wij ontwikkelen. Binnen de projectpagina’s kan een galerij getoond worden met afbeeldingen. Afbeeldingen die inzicht bieden in het gebruik van het betreffende project, of om een sfeerimpressie te geven. Deze galerij is volledig met het toetsenbord te besturen. Met de enter toets wordt een afbeelding uitvergroot, met de pijltjestoetsen kan er genavigeerd worden binnen de galerij, en met de escape toets wordt de uitvergrote weergave van de galerij afgesloten.
Cookiemelding die de gebruiker respecteert
Om gegevens van de gebruiker op te slaan, dienen eerst de betreffende cookies geaccepteerd te worden. Wanneer dit niet is gedaan voor de cookie van de website instellingen, dan kan de voorkeur rondom thema en lettergrootte niet worden opgeslagen. In dat geval ziet de gebruiker een melding bij de website instellingen verschijnen, waarin aangegeven staat dat het opslaan van de voorkeur niet mogelijk is.
Als toevoeging: Mensen die erg gesteld zijn op hun privacy, en in hun browserinstellingen de ‘Do not track’ (browserverkeer niet bijhouden) optie hebben aangevinkt, zullen op Create.nl niet worden lastiggevallen met een cookiemelding. Hun gegevens worden ook niet verstuurd of gebruikt.
Milieuvriendelijk printen en offline hyperlinks
Create.nl heeft al langere tijd een privacy statement die op de desbetreffende pagina te printen is. Als toevoeging op het feit dat een gebruiker vanaf de pagina met één druk op de knop de pagina kan printen, zorgt de website er ook voor dat er zo min mogelijk inkt wordt verbruikt. Ook worden hyperlinks binnen het geprinte document volledig uitgeschreven tussen haakjes. Zo kan iemand op basis van enkel het geprinte document alle referenties en links bezoeken.
De implementatie hiervan is als volgt:
CSS
1@media print {
2 .page {
3 // Print geen onnodige details en bespaart inkt
4 color-adjust: economy;
5 }
6
7 .page a::after {
8 // Toont de volledige URL tussen haakjes,
9 // alleen bij het printen
10 content: " (" attr(href) ") ";
11 }
12}
Contextuele cursors
Niet alle knoppen zijn hetzelfde. Iedere knop heeft een eigen status; een knop kan aangeven dat er iets wordt geladen, of dat deze is uitgeschakeld. Ook de functionaliteit van de diverse knoppen zorgt voor onderscheid. Om extra context te bieden bij de verschillende knoppen, zijn er cursors toegewezen voor zover dit benodigd is.
CSS
1// Aan het laden
2.loading {
3 cursor: wait;
4}
5
6// Kopiëren
7.copy {
8 cursor: copy;
9}
10
11// Actie niet toegestaan
12.not-allowed {
13 cursor: not-allowed;
14}
15
16// Vergroten
17.enlarge {
18 cursor: zoom-in;
19}
20
Lange woorden afbreken
Binnen Create.nl kunnen lange woorden voorkomen, met name op de blogpagina’s waar veel technische begrippen benoemd worden. Op kleine mobiele toestellen kwam het wel eens voor dat een lang woord meer ruimte in beslag nam dan het toestel breed is. Om deze reden worden lange woorden afgekapt, zodat het woord in ieder geval leesbaar is voor de gebruiker.
Create zal zich verder blijven inzetten om projecten van opdrachtgevers en uit eigen beheer zo toegankelijk mogelijk te maken om zoveel mogelijk mensen te kunnen voorzien van wat wij te bieden hebben!
Er zijn momenteel nog geen opmerkingen geplaatst onder deze blog.
Wil jij als eerste een bericht achter laten?