Een inclusievere website met behulp van media queries

Gepubliceerd op: - Leestijd ongeveer: 7 minuten

In de wereld van accessibility gaat het heel vaak om alt-teksten toevoegen aan foto’s, correct gebruik van HTML, bewaken van semantiek en goede contrastverhoudingen. Maar wist je dat je met behulp van CSS media queries ook jouw website toegankelijker en inclusiever kunt maken? Met media queries kunnen we instellingen en voorkeuren van de browser en/of besturingssysteem aanspreken om daar iets mee te doen in je CSS. De meest bekende media query is die waarbij je diverse viewports (schermgroottes) definieert in de CSS en aan elke schermgrootte bepaalde styles koppelt. Dit heeft de hele responsive beweging in gang gezet. Je kunt echter veel meer met media queries dan enkel styles aan schermgroottes koppelen. Daar gaat dit artikel over.

Dark mode is je vriend

Wist dat je dark mode een van de meest gebruikte toegankelijkheidsfuncties is op smartphones en tablets? Veel mensen vinden het fijn om hun ogen niet teveel te vermoeien. Het gaat dus niet perse om mensen met een handicap. Als developer herken je dat misschien ook wel, door het gebruik van je code editor en browser in een donker thema of dark mode.

Met media queries kun je deze mensen tegemoet komen, specifiek met prefers-color-scheme:

body {
  --bg-color: white; 
  --text-color: black;
  background-color: var(--bg-color);
  color: var(--text-color);
}

@media screen and (prefers-color-scheme: dark) {
  body {
    --bg-color: black;
    --text-color:white;
  }
}

Dit is wel een erg simplistisch voorbeeld, maar in principe komt het er op neer dat je in de media query prefers-color-scheme een aparte stijl voor je website definieert. Zo kun je dark mode ondersteunen.

Meer weten over een dark mode versie van je website ontwikkelen? CSS Tricks heeft een complete gids met uitleg daarover. CSS Tricks heeft een complete gids met uitleg daarover.

Niet te veel beweging alsjeblieft

Animaties zijn leuk en kunnen aan een design echt iets toevoegen. Helaas is er een groep mensen die geen of nauwelijks bewegingen of animaties kunnen verdragen. Die geven in hun browser aan dat bewegende zaken op een pagina verminderd moeten worden. Met het volgende voorbeeld van browser Polypane respecteer je die setting en worden animaties en bewegingen uitgeschakeld:

@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: -1ms !important;
    scroll-behavior: auto !important;
    background-attachment: initial !important;
  }
}

Noot: we hebben het hier specifiek over bewegende content en animaties. Het veranderen van kleuren of iets in- en outfaden is geen probleem.

Laten we kleuren omdraaien!

Dit is (voorlopig) enkel voor de MacOS en Safari gebruikers, Windows en andere browsers ondersteunen deze nog niet. Als in de toegankelijkheidsopties van MacOS is aangegeven dat kleuren omgedraaid mogen worden, kun je met deze query je bestaande design daarvoor optimaliseren:

p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}

In het bovenstaande voorbeeld krijgen mensen die de functie hebben ingeschakeld blauwe tekst op een witte achtergrond (het omgekeerde van zwart op geel zoals gedefinieerd in de CSS) te zien. Als de browser de query ondersteund, maar de functie niet is ingeschakeld is de achtergrond grijs en de tekst grijs. Een browser die de query niet ondersteund zal grijze tekst laten zien.

Deze queries komen er nog aan…

Prefers-reduced-data: als mensen in het hun browser-instellingen aangeven dat ze hun dataverkeer willen beperken (omdat ze geen snelle internetverbinding hebben bijvoorbeeld). Momenteel wordt deze query nog niet ondersteund door browsers omdat deze nog in ontwikkeling is.

Deze query kent twee waarden:

  1. no-preference: als er geen voorkeur bekend is bij het systeem.
  2. reduced: hiermee heeft de gebruiker aan voor een lightweight-versie van de pagina.

Benieuwd hoe je hiermee een lightweight-versie in elkaar kunt boksen? Polypane heeft een tutorial!

Prefers-contrast: als mensen in de browser-instellingen aangeven dat ze meer of minder contrast willen. Deze query heeft gedeeltelijke support in Safari, en er is support vanaf Chromium 96.

Deze query heeft vier waarden:

  1. no-preference: als er geen voorkeur bekend is bij het systeem.
  2. more: als de gebruiker heeft aangegeven een hogere contrastwaarde te willen gebruiken.
  3. less: als de gebruiker heeft aangegeven een lagere contrastwaarde te willen gebruiken.
  4. Custom: deze matched met de query forced-colors als deze ook gebruikt wordt.

Prefers-reduced-transparency: als mensen aangeven dat ze niet graag zaken op transparante achtergronden zien. Momenteel is daar nog geen ondersteuning voor in browsers omdat deze feature nog volop in ontwikkeling is.

Forced-colors: voor als mensen hoog contrast hebben ingeschakeld in hun besturingssysteem. Momenteel hebben Firefox en Chromium-gebaseerde browsers op Windows ondersteuning hiervoor.

Deze query kent twee waarden:

  1. none: deze modus wordt niet gebruikt.
  2. active: de browser gebruikt het gelimiteerde kleurenpalet. Let op! Als prefers-color-scheme ook gebruikt wordt, zullen de waarden van die query beïnvloed worden door de gedefinieerde kleuren hier.

Belangrijk om te weten is dat deze query invloed heeft op de volgende CSS-properties:

  • color
  • background-color
  • text-decoration-color
  • text-emphasis-color
  • border-color
  • outline-color
  • column-rule-color
  • -webkit-tap-highlight-color
  • en het fill en stroke attribuut bij SVG-afbeeldingen

en op de volgende waarden:

  • box-shadow wordt op 'none' gezet
  • text-shadow wordt op 'none' gezet
  • background-image wordt op 'none' gezet als de waarde geen URL is.
  • color-scheme wordt op 'light dark' gezet
  • scrollbar-color wordt op 'auto' gezet.

Noot: in tegenstelling tot de queries voor verschillende schermgroottes en dark mode zijn bovenstaande queries niet bedoeld om een apart design te hebben voor gebruikers die deze opties hebben ingeschakeld. Het is eerder bedoeld om je bestaande design verder te optimaliseren voor deze gebruikers als deze opties zijn ingeschakeld.

Ga nog een stap verder!

Je kunt het nog een stap verder nemen: door deze queries te gebruiken in combinatie met progressive enhancement. Door te vertrekken van een eenvoudige, stabiele basis voor iedereen en ervoor te zorgen dat je features toevoegt voor moderne browsers en besturingssystemen neem je inclusief design echt een stap verder.

Wil je helemaal stealth mode gaan kun je ook interaction media queries gebruiken: hiermee kun je het klik/aanraakgebied van interactieve elementen meer finetunen op het gebruik van vingers, een stylus zoals de Apple Pencil en apparaten als de Kinect. Denk bijvoorbeeld aan knoppen iets groter en verder uit elkaar zetten voor touch devices.

Testen maar!

Als je met deze queries aan de slag wilt, is testen belangrijk! Je kunt testen met de browser Polypane, die een boel opties heeft om op toegankelijkheid en inclusiviteit te testen. Maar deze queries vereisen wel dat bepaalde instellingen zijn ingeschakeld. We hebben wat handleidingen voor je verzameld:

Conclusie

Media queries worden steeds leuker en interessanter doordat er steeds meer mogelijkheden komen. Gebruik ze en benut de kans om je website inclusiever te maken. Hou de ontwikkelingen op het gebied van browserondersteuning in de gaten via caniuse.com. Binnen no time ben je ermee aan de slag!

Terug naar blogoverzicht

Reacties: