IJkpunt 6.1 - Webrichtlijnen 1

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 'Internetopties' en vervolgens voor 'Toegankelijkheid'. Volg de instructies die u dan te zien krijgt. In Opera is dit ook mogelijk: kies 'Tools', daarna 'Prefererences', 'Advanced' , 'Content' en vervolgens de knop 'Style Options...'. Volg de opties die u dan te zien krijgt (zie ook onderstaande afbeelding).  Mensen die lichtgevoelig zijn, kunnen er op deze manier ook voor zorgen dat websites standaard getoond worden met een zwarte achtergrond en witte letters. 

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>

Relaties moeten niet aangegeven zijn met CSS. Een voorbeeld hiervan is het hiërarchiek inspringen van een sitemap of inhoudsopgave. Het gaat hier om informatie dus moet dit geplaatst worden met HTML.

Als image replacement technieken gebruikt zijn om afbeeldingen die met CSS geplaatst zijn een tekstueel alternatief te geven, dan moet er gelet worden op het feit dat de CSS techniek display:none, niet gebruikt wordt. Display:none wordt namelijk door de meeste nieuwe versies van hulp apparatuur en software wel geïnterpreteerd waardoor het alternatief dus niet mee genomen wordt. Dit geld ook voor visibility:hidden.

Een voorbeeld van een image replacement techniek die wel toegankelijk is, is het ver buiten beeld plaatsen van de alternatieve tekst of het onzichtbaar maken van de tekst met behulp van overflow:hidden.

Let wel: Om aan de webrichtlijnen te voldoen gelden voor dit ijkpunt nog enkele aanvullende eisen hier aan gerelateerd. Namelijk dat informatieve afbeeldingen altijd met HTML geplaatst moeten worden en dat CSS image replacement niet gebruikt mag worden op essentiële informatie zoals navigatie, logo's en headers.

Organisatie logo's en banners zijn informatief en horen dus altijd met HTML geplaatst te zijn.

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.