Stel: je schrijft zelf CSS-code of je beoordeelt code die door AI is gegenereerd. Dan zijn er constructies waarbij je even extra alert moet zijn. Niet omdat het slechte code is – die niet functioneert of niet aan de standaard voldoet – maar omdat ze onverwachte gevolgen hebben voor jouw bezoekers.
Dit gaat niet alleen over toegankelijkheid. Het gaat over gebruiksvriendelijkheid voor íedereen: mensen met een klein (mobiel) scherm, mensen die inzoomen of mensen die (soms) met een toetsenbord werken.
Hieronder vier veelvoorkomende CSS-regels die de moeite waard zijn om bewust mee om te gaan:
outline: 0; – Focusindicator verwijderen
Misschien wel het bekendste voorbeeld.
Wat het doet
Verwijdert de rand die browsers standaard tonen rond een interactief element (link, invoerveld, knop e.d.) als je er met je toetsenbord naartoe gaat.
Waarom dit wordt gebruikt
De standaard focusindicator wordt door veel vormgevers niet fraai gevonden. Het is een vaak wat dikke, grijze of blauwe rand die niet altijd past bij het ontwerp. De eenvoudigste oplossing lijkt dan: weg ermee.
Waarom dit problematisch is
Mensen die hun toetsenbord gebruiken en met de Tab-toets door de pagina gaan, hebben die rand nodig om te zien waar ze zich op de pagina bevinden. Zonder outline weten ze niet welk interactieve element geselecteerd is. Dat maakt navigeren vrijwel onmogelijk. Extra toelichting hierover vind je in de WCAG-richtlijn 2.4.7.
Oplossing
Haal de outline niet zomaar weg. Werk in plaats daarvan met de :focus-visible pseudo-class. Hiermee toon je de outline alleen wanneer iemand met het toetsenbord navigeert.
a:focus-visible {
outline: transparant;
box-shadow: 6px 0 0 #69998a;
}Tip!
Zorg voor voldoende contrast tussen de voor- en achtergrondkleur van je alternatieve focusindicator. Gebruik je iets anders dan outline? Zet die dan niet op 0 of none, maar maak die transparant. Zo blijft de indicator zichtbaar in de hoge contrast-modus van Windows.
overflow: hidden; – Inhoud verbergen
Bekend van de “CSS is awesome”-afbeelding, “awesome” loopt vrolijk buiten het kader.
Wat het doet
Verbergt alles wat buiten een bepaald kader valt.
Waarom dit wordt gebruikt
Het lijkt de perfecte oplossing om inhoud die niet past netjes binnen een layout te houden. Hup, overflow: hidden; en alles ziet er weer strak uit.
Waarom dit problematisch is
Er zijn prima toepassingen voor het (tijdelijke) verbergen van inhoud (bijvoorbeeld bij een caroussel), maar regelmatig wordt het gebruikt om inhoud die niet past gewoon weg te stoppen. Die inhoud is dan helemaal niet meer zichtbaar voor bezoekers. Doordat layouts flexibel zijn, kan dit ook onbewust gebeuren.
Oplossing
Vraag je elke keer af: is er risico dat inhoud onbedoeld wordt verborgen? Zo ja, gebruik dan bijvoorbeeld een flexibeler layout en/of tekst die wel afbreekt.
Dat laatste is eenvoudig met een combinatie van hyphens en word-break:
p {
hyphens: auto;
word-break: break-word;
}En ja, CSS is inderdaad awesome!
whitespace: nowrap; – Tekst op één regel forceren
Sluit aan op het vorige: hiermee blijft tekst op één regel staan, ongeacht hoe lang die is.
Wat het doet
Zorgt dat tekst niet naar de volgende regel afbreekt, maar op één lange regel blijft staan.
Waarom dit wordt gebruikt
Bij inhoud waarbij het van belang is waar een regeleinde wordt geplaatst, denk aan codevoorbeelden of aan dichtregels. Soms is er een voorkeur om ook URL’s en e-mailadressen niet af te breken.
Waarom dit problematisch is
Lange regels en/of woorden verdwijnen uit beeld (dramatisch in combinatie met overflow: hidden;) en scrollen in twee richtingen wordt mogelijk geactiveerd. Dit is voor geen enkele bezoeker leuk, en voor sommige zelfs desastreus als je wat meer moeite hebt met scrollen.
Oplossing
Zorg dat scrollen in twee richtingen niet voor de hele pagina wordt geactiveerd. Beperk dit tot het blok waar het echt nodig is om tekst niet af te breken.
Gebruik de technieken uit het vorige punt om tekst netjes te laten afbreken. Voor nog meer controle kun je in de HTML-bron nog een soft hyphen (­) gebruiken. Dit geeft heel specifiek aan waar een woord mag worden afgebroken als het niet op één regel past.
display: none; – Element verbergen
Deze constructie heeft meer impact dan het op het eerste gezicht lijkt.
Wat het doet
Haalt een element volledig uit de pagina (uit de DOM). Het bestaat dan niet meer voor de browser én ook niet voor hulptechnologie (denk aan schermlezers).
Waarom dit wordt gebruikt
Als je bij de initiële weergave van een pagina een element niet wilt weergeven, lijkt dit een snelle en effectieve oplossing.
Waarom dit problematisch is
In de praktijk is het vaak zo dat elementen alleen maar niet zichtbaar hoeven te zijn, totdat er een bepaalde actie is gedaan. Stel dat je het zoekveld wilt verbergen totdat er op een knop is geklikt en het veld fraai in beeld schuift. Dat effect is alleen visueel, voor schermlezers is het niet relevant en moet het veld gewoon aanwezig zijn. Met display: none; wordt het element ook voor screenreaders onzichtbaar.
Oplossing
Wil je iets alleen visueel verbergen, maar wel toegankelijk houden? Gebruik dan een van deze alternatieven:
visibility: hidden;opacity: 0;inline-size: 0; block-size: 0;- Een wat complexere maar veelgebruikte combinatie in CSS is:
.visually-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
inline-size: 1px;
block-size: 1px;
word-wrap: normal;
}Deze komt uit Drupal, maar er zijn meer vergelijkbare constructies beschikbaar. Zie Scott O’Hara’s blog, Marko Ilic op CSS-Tricks of, meer recent, Craig Buckler op Sitepoint.
NB: let op de combinatie met overflow: hidden; hier!
Samenvattend
Vier veelvoorkomende CSS-regels waar op het eerste gezicht niet zoveel mis mee is, maar die flinke impact kunnen hebben op de gebruiksvriendelijkheid van je site:
outline: 0;– Verwijdert de focus-indicator. Keyboard-gebruikers zien hierdoor niet meer waar ze zich op de pagina bevinden. Gebruik:focus-visiblemet een duidelijke stijl.overflow: hidden;– Verbergt inhoud die buiten een kader valt. Handig in specifieke gevallen, maar te vaak wordt hiermee content onzichtbaar gemaakt die juist wel getoond moet worden.white-space: nowrap;– Forceert tekst op één regel. Kan leiden tot horizontaal scrollen, wat voor veel bezoekers lastig is. Alleen gebruiken wanneer echt nodig.display: none;– Haalt elementen volledig uit de DOM. Handig als iets echt niet aanwezig moet zijn, maar er zijn meerdere alternatieven als je iets alleen visueel wilt verbergen.
Dit is natuurlijk bij lange na niet een volledig overzicht. Alles hangt uiteindelijk af van de benodigde functionaliteit en de implementatie.
Tip!
Een handige test: probeer je site af en toe zonder muis te gebruiken. Kom je overal? Zie je waar je bent? Kun je alles bedienen? Dan ben je goed bezig!
Wil je meer weten, neem dan contact met me op via LinkedIn.