Help, waar ben ik? Outlines en toegankelijk­heid

  • ± 4 minuten

Natuurlijk, jij wilt niet je website of webshops gelikte layout verknallen, door één of andere willekeurige lelijke omlijning. Maar deze omlijningen zijn er niet voor niks, ze heten outlines en helpen sommige gebruikers het licht in de duisternis te zien. Verwijder deze outlines dus niet zomaar, maar laat ze werken in je voordeel!

Als onderdeel van de Week van Digitale Toegankelijk­heid schrijven wij deze gehele week verdiepingsartikelen hoe jouw website toegankelijk­er kan worden gebouwd.

Wat zijn outlines?

Een CSS outline staat ook wel bekend als focusring of focusindicator. Door het tonen van een rand rond een element waarop de focus zich bevindt, begrijpen slechtziende of motorische beperkte personen beter waar ze zich op een pagina bevinden en raken ze dus niet verdwaald in de content.

Verwijder je alle CSS-contouren van de stylesheets, dan zullen browsers automatisch terugvallen op de standaard outline styling van de browser.

Browser fallback

Browsers tonen in hun standaardgedrag een focusring bij focus. Browsers zullen daarbij wel hun "eigen" styling toepassen. Browser Chrome bijvoorbeeld heeft recentelijk een nieuwe opzet geïntroduceerd om toegankelijk­heidsproblemen op te lossen, omdat de standaard blauwe focusringen nauwelijks zichtbaar waren op blauwe achtergronden.

The new focus indicator uses a thick dark ring with a thin white outline, which should improve visibility on both light and dark backgrounds. This is an easy accessibility win

Chromium Blog

Zo weet de gebruiker altijd welke knop-, link- of formuliervelden op dat moment geselecteerd zijn, ongeacht de achtergrondkleur. Dit komt goed van pas binnen donkergekleurde websites of elementen, zoals voetteksten die vaak een donkere achtergrondkleur hebben.

Outlines zijn verwijderd, omdat ze lelijk zijn

Helaas komt het toch vaak voor dat de outlines worden verwijderd door de webbouwers/webdesigners. Hierdoor verwijder je elke indicator die aangeeft waar de gebruikers zich binnen bevinden.

Geen outline is in principe hetzelfde als het niet hebben van een muiswijzer: je kunt nog steeds rondklikken, het is alleen maar hopen dat je de juiste link hebt aangeklikt.

Redenen voor het verwijderen van de CSS-outlines

Laten we ervan uitgaan dat het ontoegankelijk maken van je websites niet de reden is dat jouw website geen outlines meer heeft. Welke reden heeft het dan vaak wel?

  • Restanten van de boilerplate of framework code. Reset.css is bijvoorbeeld een grote potentiële boosdoener. Reset.css is hartstikke handig, omdat het in 1x alle browserstyling verwijderd uit je CSS. Maar het is dan wel belangrijk, geeft ook de auteur van reset.css aan, dat frontenders dan zelf de outline verzorgen. Toch is het heel gemakkelijk om dit toegankelijk­heidsaspect over het hoofd te zien als je niet op de hoogte bent van het doel ervan.
  • De outline komt niet overeen met de stijlgids of wordt als lelijk beschouwd. Dit horen we ook vaak. Maar dat is ook het geval bij straatlantaarns. Je bent blij dat ze je helpen zien waar je bent, ook al passen ze soms slecht in het straatbeeld.

Dus, stel dat onbedoeld de CSS-outlines binnen je eigen websites hebt verwijderd: hier wat tips om het terug te draaien!

Interventie van de browser-makers

De meeste browsers hebben hun gedrag al aangepast aan de wensen van UX/gebruikers: Chromium (inclusief Edge) laat alleen de outlines nog maar zien wanneer een element focus krijgt met behulp van een toetsenbord. Bij gebruik van een muis zal de outline stijl declaratie niet worden toegepast of zichtbaar zijn.

FireFox bijvoorbeeld toont de contouren ook als er een muiscursor wordt gebruikt.

Goed om te weten:

  • Het bovenstaande is zelfs van toepassing als je custom outlines gebruikt.
  • Dit heeft ook betrekking op de gebruikers van de screenreader bovenop de gebruikers van het toetsenbord, aangezien dergelijke ondersteunende technologie wordt gebruikt bovenop de gangbare browsers.

Aangezien Chromium veruit de meest gebruikte browser op desktop is, zien gebruikers die een muis gebruiken misschien wel nooit een outline. Dus er is ook geen esthetische reden deze outline te verwijderen!

Outlines, stijl ze zelf!

Desondanks, we kunnen ons wel wat voorstellen bij de esthetische klachten. Zo kun je bijvoorbeeld niet de border radius van outlines veranderen. Alleen maar de kleur, breedte, offset en stijl. Het is daardoor niet mogelijk om ze te laten overeenkomen met jouw custom gestileerde buttons.

a11 buttons met of zonder focus
Veel webdesigners zijn geen fan van een outline die vierkant is, wanneer de buttons rond zijn. Wat begrijpelijk is.

Bootstrap's box-schaduw oplossing

Het gebrek aan vormgevingsmogelijkheden is de reden waarom Bootstrap op maat gemaakte indicatoren voor gefocuste elementen heeft geïntroduceerd. Bootstrap gebruikt boxshadow met een kleur, passend bij de knop. Deze hebben vaak een zachtere kleur door er een beetje transparantie op aan te brengen. De CSS rgba methode wordt gebruikt om dit te bereiken.

bootstrap focus button

Deze oplossing heeft een grote overeenkomst met de outline property: Omdat box-shadow geen deel uitmaakt van de documentenstroom, zal het geen inhoud wegduwen en mogelijk elementen dwingen om rond te springen, in tegenstelling tot de border property.

Bootstrap heeft oog voor toegankelijk­heid

Laten we eerlijk zijn: Bootstrap heeft echt toegankelijk­heid ingebouwd als het gaat om JavaScript-componenten. ARIA-attributen worden op de juiste manier gebruikt en wij gebruiken hun sr-only klasse regelmatig. En Bootstrap's equivalent van een focusring is gewoon erg handig om in te bakken en is naar mijn mening mooi en subtiel! Goede oplossing dus.

Maar deze ingrediënten zijn tegelijkertijd het exacte probleem. Het is gemakkelijk om fouten te maken terwijl je de code van een ander overneemt en de dingen gewoon laat zoals ze zijn. Hier wijden we deze week verder over uit.