Gratis code voor toegankelijk­e en toffe button outlines

Bootstrap heeft de accessibility focusring ingebakken

Het Bootstrap CSS-framework heeft al gezorgd voor toegankelijk­heid via het toetsenbord. Zowel voor dropdown of collapse componenten als ook voor hun buttons. Naast de noodzaak om CSS outlines zichtbaar te maken, om aan de WCAG te voldoen, moet een op maat gemaakte focusring een minimale contrastverhouding hebben, of moet deze minstens twee pixels breed zijn.

Hieronder zie je een voorbeeld van twee gekleurde buttons zoals die binnen het Bootstrap CSS framework zijn gestyled. De buttonindicator voldoet aan de G195 techniek.

Bootstrap button outline contrast

Als je slechtziend bent, kan het een uitdaging zijn om buttons met en zonder focus te onderscheiden, omdat de outlines te vaag zijn. En wat als er maar één grijze button wordt weergegeven binnen het deel dat zich in het scherm bevindt? Je kunt niet zien of de button focus heeft gekregen als je niet weet hoe de button er normaliter uit ziet en dus geen referentie hebt. We wilden dit om die reden al een tijdje op onze websites onder handen nemen. En tezamen met onze nieuwe website is dit gelukt!

Wat betreft het uiterlijk van de outlines hebben we ons laten inspireren door de website van de Stichting Accessibility, want ook zij hebben net een nieuwe en gelikte website gelanceerd.

Onze inspiratie voor nieuwe outlines

Stichting Accessibility gebruiken een rand om een padding te simuleren tussen de eigenlijke button en een focusring (als we het over outlines hebben, heet dit officieel trouwens de offset). Vervolgens gebruikten zij een box-shadow om de eigenlijke focusring te creëren. Een box-shadow is handig omdat deze zich aan de border-radius eigenschap houdt en zelfs kan worden geanimeerd (het animeren van alle eigenschappen via CSS code transition: all; is vanuit performance perspectief overigens geen goed idee).

Dit is het resultaat, inclusief bijbehorende code:

Het nadeel van de bestaande code

We waren dus geïnspireerd en wilden hetzelfde bereiken. Maar als front-end ontwikkelaars zouden we de achtergrondkleur van het oppervlak op voorhand moeten weten. Dit is wat ze deden via de .bg--quaternaire .button-tertiaire selector. Niet ideaal als je flexibiliteit wilt behouden, bijvoorbeeld voor content-schrijvers die de achtergrondkleur van het bovenliggende element niet kennen, waarin een eventuele button wordt geplaatst.

Je zou meer CSS kunnen toevoegen om alle achtergrond- en buttonkleurcombinaties te kunnen maken, maar dit zou dus meer CSS vereisen en alsnog de flexibiliteit verminderen. Dit zou dus niet werken voor ons.

Onze getweakte outline oplossing

Vervolgens kwamen we met een andere aanpak om hetzelfde visuele resultaat te bereiken, waarbij alle nadelen uit de weg werden geruimd. Ten eerste, voor alle links die geen buttons waren, gebruikten we gewoonweg de outline eigenschap. Binnen de voetteksten of de donkermodus schakelen we over naar witte omtrekkleuren in plaats van blauw.

De stappen voor een verbeterde CSS-outline

Vervolgens hebben we onze buttons als volgt aangepakt:

1. We hebben de CSS outline property onzichtbaar gemaakt, maar alleen voor buttons, omdat we alleen voor buttons een eigen focusring gingen maken;
2. We hebben binnen elke button een extra element gemaakt met het ::before pseudo-element;
3. We hebben een leeg element gedeclareerd via CSS content: "";
4. We willen niet dat de dimensies van de button verandert, dus maken er via CSS position: absolute; een absoluut element van ;
5. Om ervoor te zorgen dat het de afmetingen van de bovenliggende button respecteert, moeten we specifiek een position-eigenschap voor de parent-button instellen. We hebben toegevoegd position: relative; naar de .btn-selector in onze stylesheets;
6. Vervolgens hebben we de eigenschappen top, right, bottom, left toevoegend aan het ::before pseudo-element, allemaal met "0" als waarde om het dezelfde afmetingen te geven als de bovenliggende button;
7. Je kunt nu een box-shadow declareren voor het ::before pseudo-element en een negatieve margin gebruiken om een nieuwe offset te creëren;
8. currentColor is een CSS variabele die zelfs werd ondersteund door Internet Explorer 9. Het zal automatisch de kleur toegewezen krijgen die is toegepast op de color-eigenschap van hetzelfde of het meest bovenliggende element. Gebruik standaard currentColor in je box-shadow-declaratie;
9. De kans is groot dat je nu een witte outline hebt voor .btn-primary of .btn-danger buttons omdat hun tekst wit is, waardoor de outline waarschijnlijk alleen zichtbaar is in de donkere modus;
10. Als je website geen donkere modus/layout heeft, hebben we zojuist een toegankelijk­heidsprobleem gecreëerd, omdat een witte focusring niet zichtbaar is op een witte achtergrond. Maar we hoeven nu enkel nog de kleureigenschap te veranderen om het ook op lichte achtergronden te laten werken, zonder de box-shadow-eigenschap helemaal opnieuw te hoeven declareren;
11. Bootstrap heeft bijvoorbeeld ook button stylen voor omgekeerde kleuren, waardoor de tekstkleur van de button rood wordt, evenals de rand, maar de achtergrond wit. Best verwarrend omdat hier al direct het woord "outline" in zit, maar Bootstrap noemt ze .btn-outline-stylename.
12. Door die kleureigenschappen opnieuw te gebruiken, hoeven we alleen onze before-selector toe te voegen aan elke button declaratie per kleur;
13. Wanneer je daadwerkelijk Bootstrap CSS gebruikt, kun je nu de outline-oplossing van Bootstrap, welke via box-shadow op het element zelf gedaan is, verwijderen. Zo wordt bovendien ook je CSS bestanden kleiner.

Je kunt het in actie zien in de afbeelding hierboven, die drie buttons bevat. De ene is een groene Bootstrap button, de tweede is hetzelfde, maar dan met focus. De derde button is een omgekeerde versie van de groene button, een witte achtergrond met juist groene tekst en rand.

Door de stijldeclaratie van de omgekeerde button opnieuw te gebruiken, declareren we de kleur van de focusring voor groene buttons, terwijl de focusring voor groene omgekeerde buttons al is gedeclareerd door de kleureigenschap binnen het .btn-outline-success selector-block. Te veel tekst? Check de demo op de website van collega Erwin Hofman:

Demo bekijken

Focusring maken met flexibelere styling

We kunnen nu onze eigen op maat gemaakte focusring stylen zoals we dat willen. Bijvoorbeeld door het toevoegen van een borderradius, het veranderen van de offset met behulp van (negatieve) CSS margins en het nog steeds kunnen toepassen van een box-shadow op de button zelf. Dit alles zonder de declaratie per button-kleur variant te hoeven veranderen.

Je zou de button zelfs gedeeltelijk transparant kunnen maken met behulp van CSS opacity en de button kunnen animeren met behulp van CSS transition.

En als jouw website een donkere modus heeft of zal krijgen zoals Blue 2 Blond heeft, is het een 5-seconden taak om de outline kleur te wijzigen, door wit als kleur te declareren en andere kleur-definities te overschrijven. Wat je ook doet, houd het ook tijdens je creatieve bui toegankelijk voor iedereen!