Ga naar de inhoud

Cascading Style Sheets (CSS) is een programmeertaal die gebruikt wordt om websites vorm te geven. Deze taal wordt onder andere gebruikt om lettertypes te definiëren, kleuren voor tekst en achtergronden vast te stellen en de weergave van content te structureren. 

twee mensen kijken op een beeldscherm

Er zijn meerdere manieren waarop je een website of element met CSS kunt stylen. De standaardmethode is met een bestand waarin de opmaak voor de hele site gedefinieerd wordt. Dit bestand is een .css-bestand en heet vaak stylesheet.css. 

Aan de andere kant kan je een element in de HTML-broncode stylen met CSS. Hierdoor is het mogelijk om per element een andere opmaak mee te geven. Deze methode wordt ook wel ‘inline stijlen’ genoemd. In het onderstaande voorbeeld lees je het verschil tussen beide manieren.

CSS Voorbeeld

In het onderstaande voorbeeld staat tekst op twee manieren opgemaakt. Dit gebeurt via de stijlsectie in de header, waar de tekst rood en onderstreept wordt gemaakt en via de ‘inline methode’ in de body van de tekst, waar de tekst blauw en bovenstreept wordt gemaakt.

<p>Deze tekst is via extern via de stylesheet of via interne code in de header gestyled</p>

<p style=”color:blue;font-size:20px;text-decoration: underline overline;”>Deze tekst is inline gestyled</p>

Ogen van roodharige dame zien net boven haar beeldscherm te zien

CSS aanpassen als gebruiker

Gebruikers van een website kunnen met speciale software de opmaak van een website aanpassen. Dit doen ze door de gedefinieerde CSS-code te overschrijven met een eigen code. Er zijn verschillende redenen waarom een gebruiker de CSS van een website aan zou passen.

Zo is het voor slechtzienden bijvoorbeeld gemakkelijker om een tekst te lezen wanneer de tekens groter zijn. Via de externe software kunnen ze de tekst vergroten. Een ander voorbeeld is te vinden in gebruikers met kleurenblindheid. Deze gebruikers kunnen ervoor kiezen om de contrast-ratio te verhogen, waardoor teksten beter te lezen zijn. Verder kan een gebruiker met dyslexie ervoor kiezen om het lettertype aan te passen of de ruimte tussen letters te vergroten. 

Er zijn dus diverse motivaties voor het aanpassen van de CSS-code die een website heeft gedefinieerd. Maar, hoe zorg je ervoor dat een website zo eenvoudig mogelijk aan te passen is? 

Toegankelijk CSS gebruiken

Het meest belangrijke voor een digitaal toegankelijke CSS is de manier waarop de code gebruikt wordt. Eerder in dit artikel werden de twee methoden getoond: via een stylesheet en inline. Vanuit een toegankelijkheidsperspectief wordt het aangeraden om CSS via de stylesheet in te laden. Hierdoor geef je de bezoekers van je website de vrijheid om gemakkelijk de opmaak van een website aan te passen. Het opmaken van HTML-elementen via inline code is dus geen toegankelijke methode. 

Dame werkt thuis zittend op de grond met de laptop op een koffietafel

Gebruikers helpen vormgeving aan te passen

Als eigenaar of verantwoordelijke van een website is het dus goed om rekening te houden met het feit dat sommige bezoekers de opmaak van je website aan willen passen. Om deze gebruikers te helpen kun je, naast het toepassen van CSS op de juiste manier, ook een standaardmogelijkheid bieden om de lay-out aan te passen.

Er bestaan diverse mogelijkheden voor, afhankelijk van het Content Management Systeem (CMS) waar de website mee gebouwd is. Voor WordPress zijn er bijvoorbeeld gratis plug-ins te downloaden die de gebruiker de mogelijkheid geven om kleuren, lettertypes en de grootte van tekst aan te passen. In dit artikel lees je meer over plugins voor het digitaal toegankelijk maken van een WordPress-website.

Vincent van Brakel

Vincent van Brakel onderzoekt voor Digitaal Toegankelijk de toegankelijkheid van websites en apps. Daarnaast schrijft Vincent over alles wat met digitale toegankelijkheid te maken heeft en deelt hij praktische tips op DigitaalToegankelijk.nl.