4. Leesbaar zonder css

Uitleg

Style sheets (ook wel css of Cascading Style Sheets) kunnen de toegankelijkheid van een pagina sterk vergroten wanneer ze op de juiste manier gebruikt worden. Style sheets zijn (vooral) externe bestanden waarin alle opmaak van een website staat, zoals kleurgebruik, lettertypen en lettergroottes en ook positionering van blokken tekst of andere pagina-elementen.

Bij het gebruik van style sheets moet er wel rekening mee worden gehouden dat sommige gebruikers pagina's bekijken met andere style sheets, of zonder style sheets.

Voorbeelden

Voorbeeld 1

In dit voorbeeld is in de style sheets bepaald dat de kleur van de links wit is. In de HTML-code van de pagina staat dat de achtergrond blauw is. Wanneer de style sheets worden uitgezet, zullen de links de standaardkleur krijgen: blauw. De achtergrond blijft echter ook blauw. De links zijn zonder style sheets dus niet te lezen.

Voorbeeld 2

Op sommige websites worden afbeeldingen gebruikt van tekst, die alleen leesbaar zijn tegen een bepaalde achtergrondkleur. Wanneer die achtergrondkleur alleen is vastgelegd in CSS, kunnen bepaalde items onleesbaar zijn zonder het bijbehorende style sheet.

In de onderstaande screenshots kunt u een voorbeeld zien van een afbeelding van tekst met en zonder style sheets. Hier is één woord gegeven als voorbeeld, maar op deze manier zijn veel koppen weergegeven op de betreffende site.

Voorbeeld 3

In dit voorbeeld is een afbeelding van een kaart gebruikt. Er kan op verschillende links geklikt worden (niet in het screenshot opgenomen) om informatie te krijgen over de locatie van bijvoorbeeld pizzeria's.

De locatie van de pizzeria's wordt weergegeven door ballonnetjes die gepositioneerd zijn op de kaart door middel van style sheets. Wanner de style sheets uit staan, gaat de informatie over de locatie van de pizzeria's verloren.

Voorbeeld 4

Soms is een pagina zodanig opgebouwd dat wanneer het bijbehorende style sheet niet gebruikt wordt, elementen over elkaar heen vallen. Het komt ook voor dat sommige informatie zonder style sheets helemaal niet getoond wordt. In onderstaande afbeelding is een fragment van een pagina waarbij tekst over andere tekst heen komt te staan wanneer het bijbehorende style sheet niet wordt gebruikt.

Voorbeelden van pagina's die zonder style sheets goed lees- en bruikbaar zijn, zijn bijvoorbeeld deze site (www.drempelvrij.nl) en de site van Stichting Bartiméus Accessibility.

Testen met de toolbar

Open een aantal pagina's en bekijk ze zonder style sheets door voor tool '2g > CSS in-/uitschakelen' te gebruiken. Wanneer u op 'reload' of 'vernieuwen' in Internet Explorer klikt wordt het effect weer ongedaan gemaakt. Dit is ook het geval wanneer u naar een nieuwe pagina surft.

Bekijk diverse pagina's en zoek naar mogelijke problemen: uitklapmenu's, afbeeldingen van tekst en links op bijvoorbeeld een blauwe achtergrondkleur.

Checklist

Beantwoord de vragen van de checklist bij het onderdeel 'Leesbaar zonder CSS'.

Wanneer onderdelen niet bruikbaar- of leesbaar zijn wanneer CSS uitgeschakeld is, vult u 'nee' in. Is alles wel bruikbaar- en leesbaar, dan vult u 'ja' in.
Wanneer er geen style sheets lijken te zijn gebruikt, of u weet niet hoe u deze vraag moet beantwoorden vult u 'nee / nvt' in.