W3C ijkpunt 6.1 Organiseer documenten zo dat ze zonder style sheets gelezen kunnen worden. Als bijvoorbeeld een HTML-document wordt weergegeven zonder de bijhorende style sheets, moet het nog steeds mogelijk zijn om het document te lezen

Referentie: De WCAG ijkpunten zijn identiek aan de Waarmerk drempelvrij ijkpunten en de Webrichtlijnen.

Beschrijving

Het is beter voor een website om de vormgeving van een pagina niet meer in de paginacode zelf te zetten maar te verwijzen naar een aparte pagina met daarin alle aanwijzingen voor de layout en de vormgeving (kleurgebruik, lettergrootte en -type, etc.). Vormgeving en inhoud zijn dus gescheiden. Op deze manier kan de vormgeving van de gehele website worden aangepast door een enkele style sheet te veranderen.
De inhoud van de pagina kan op deze manier ook beter getransformeerd worden naar alternatieve in- en uitvoerapparatuur als een brailleleesregel, spraaksynthese of een speciale browser.

Ondanks de voordelen van style sheets (ook voor de toegankelijkheid) dient men er nog steeds rekening mee te houden dat bepaalde browsers en hulpapparatuur geen style sheets ondersteunen. Bovendien willen sommige gebruikers hun eigen style sheets gebruiken. Daarom dient de website ook goed leesbaar te zijn wanneer de style sheets van de site niet worden gebruikt of ondersteund (= terugwaartse compatibiliteit).

Relevante Webrichtlijnen: R-pd.1.1, R-pd.9.1, R-pd.9.2.

Voordelen:

• Gebruikers die afhankelijk zijn van hulpsoftware en/of hulpapparatuur die geen style sheets ondersteunen hebben volledige toegang tot de inhoud;
• Gebruikers die geen nieuwere technologieën kunnen betalen of hier geen toegang toe hebben profiteren ook van terugwaartse compatibiliteit (alles is ook leesbaar zonder style sheets).

Criteria voor toetsing

• Het document is zo ingedeeld dat gebruikers alle inhoud en functionaliteit van het document kunnen openen, lezen en gebruiken als het zonder geassocieerd(e) style sheet(s) en in een logische volgorde wordt geleverd.
• Decoratieve afbeeldingen worden (zoveel mogelijk) door CSS geplaatst*

*: Dit is uitsluitend een succescriterium binnen de Webrichtlijnen. Het overschrijdt conformiteit met WCAG 1.0; zie hieronder voor meer informatie.

Voorbeeld

Voor menu-onderdelen en koppen worden vaak afbeeldingen van tekst gebruikt, in plaats van 'echte' tekst. Vaak zien we dat de menu-items dan alleen te lezen zijn wanneer de oorspronkelijke style sheets aan staan, omdat de tekst alleen leesbaar is tegen één achtergrondkleur. Wanneer de gebruiker de style sheets uit zet, of wanneer de gebruiker zijn of haar eigen style sheets gebruikt, zijn de menu-onderdelen of koppen niet langer leesbaar.
Zorg er dus voor dat afbeeldingen van tekst tegen elke achtergrondkleur leesbaar zijn, of beter nog: gebruik geen afbeeldingen, maar tekst opgemaakt met style sheets.

In de onderstaande illustratie staan twee fragmenten van een menu. Indien er een andere achtergrondkleur wordt gebruikt is de tekst niet meer leesbaar (onderste fragment).

Ook in dynamische menusystemen wordt vaak gebruik gemaakt van style sheets. De submenu items verschijnen pas als met de muis over het submenu item bewogen wordt. Het submenu valt dan over de onderliggende informatie heen. Vaak zal zonder de style sheets de achtergrond in het submenu transparant worden. Hierdoor kunnen problemen ontstaan als er onder het submenu bijvoorbeeld tekst staat. De menu-items en onderliggende tekst zijn dan niet goed meer leesbaar.

Uitvoer naar hulpapparatuur

Hieronder staat een voorbeeld van de weergave van een pagina waarbij tekstblokken door middel van style sheets zijn gepositioneerd.

Hieruit blijkt dat de volgorde die in de style sheet wordt gedefinieerd, wordt genegeerd. In plaats daarvan wordt de volgorde zoals die in de broncode staat gebruikt. Dit kan tot verwarrende situaties leiden. Zorg er dus voor de de volgorde in de broncode logisch is en gebruik eventueel style sheets om de volgorde visueel aan te passen indien dat nodig is.

Oplossing

Het gebruik van style sheets kan de toegankelijkheid sterk vergroten doordat opmaak en inhoud worden gescheiden. Hieronder volgen een aantal oplossingen of een aantal zaken waar rekening mee gehouden dient te worden als met overgaat tot het gebruik van sylesheets.

Het is verstandig om relatieve eenheden te gebruiken in plaats van absolute eenheden in een style sheet. Gebruik bijvoorbeeld 'em' of percentages (%) voor fontgrootte en layout (!) in plaats van pixels (px) of punten (pt). Hierdoor is de pagina, inclusief de tekst, schaalbaar.

De layout van een pagina kan ook in de style sheets worden gedefinieerd, waardoor een pagina zonder layout-tabellen kan worden opgemaakt. Hulpapparatuur toont pagina's opgemaakt met style sheets op verschillende wijze. Hierbij is de volgorde waarin de tekst in de broncode voorkomt, bepalend voor de weergave.

Een persoonlijke style sheet, met bijvoorbeeld een groter lettertype, kan op de volgende manier in Internet Explorer als standaard worden geselecteerd: Kies bij 'Extra' voor 'Opties' en vervolgens voor 'Toegankelijkheid'. Volg de instructies die u dan te zien krijgt (zie afbeelding hieronder). Mensen die lichtgevoelig zijn, kunnen er op deze manier ook voor zorgen dat websites standaard getoond worden met een zwarte achtergrond en witte letters. Hieronder zie je als voorbeeld de website van Drempels Weg met een andere style sheet en in beeld ook de toegankelijkheidsopties die Internet Explorer biedt.

Een voorbeeld van een goed toegankelijk menusysteem is te vinden op de site van accessibility: Toegankelijk uitklapmenu. Dit uitklapmenu voldoet aan alle eisen: het is schaalbaar, het werkt ook zonder JavaScript, het werkt ook zonder style sheets, het is toetsenbordtoegankelijk, er zit een vertraging in voor motorisch gehandicapten en ga zo maar door.

Hulpapparatuur en tekstbrowsers tonen de volgorde van de tekst zoals deze aangegeven is in de broncode. De volgorde van de tekst in de broncode dient daarom ook de goede volgorde te zijn:

Niet zo:

1. <div id="plek1">De snelle hond</div>
2. <div id="plek2">de luie vos</div>
3. <div id="plek3">sprong over</div>

Maar zo:

1. <div id="plek1">De snelle hond</div>
2. <div id="plek3">sprong over</div>
3. <div id="plek2">de luie vos</div>

Definities

Style sheet

• Een document dat aan een webpagina is gekoppeld of in een webpagina is ingebed, en dat de opmaak, transformatie en/of visualisering van de documentinhoud beschrijft.

Verwijzingen

• R-pd.1.3 Maak de functie van de website niet afhankelijk van optionele technologie, zoals CSS en client-side script: optionele technologie dient de informatie op de site en het gebruik ervan te complementeren en niet de toegang ertoe te belemmeren wanneer deze technologie niet ondersteund wordt.
• R-pd.7.6 Decoratieve afbeeldingen dienen zoveel mogelijk door CSS geplaatst te worden. Informatieve afbeeldingen dienen door HTML geplaatst te worden.
• R-pd.9.2 Pagina's dienen bruikbaar te blijven wanneer CSS door een webbrowser niet ondersteund wordt.
• R-pd.2.9 Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.