Stijlvolle en toegankelijke Web-pagina's

Bert Bos

CSS en de Web Accessibility Guidelines
Groningen, 19 juni 2000

Web-gebruikers

• Beperkt gehoor, gezicht, beweging
• Leesproblemen, problemen met begrijpen
• Geen/beperkt toetsenbord, geen muis
• Tekstscherm, klein scherm, langzaam netwerk
• Vreemde taal
• Handen, ogen, oren nodig voor iets anders (auto!)
• Oude browsers, afwijkende browser of OS

"Semantic Web"

• Het Web als vraagbaak
• Maar de computer is dom
• Impliciete info expliciet maken
• => WAI en Semantic Web dezelfde doelen/methoden

G1. Equivalente tekst: FOUT

G1. Equivalente tekst: GOED

G2. Niet alleen kleur: FOUT

Voorbeeld:

G2. Niet alleen kleur: GOED 1

Voorbeeld:

G2. Niet alleen kleur: GOED 2

Voorbeeld:

G3. Mark-up & style sheets: FOUT

• Tabellen voor layout
• <BR> voor "alineas"
• <B> en <FONT> voor stijl
• plaatjes voor tekst

Voorbeeld

G3. Mark-up & style sheets: GOED

• Stylesheet voor layout
• <P> voor alineas, <H?> voor kopjes,...
• Stylesheet voor font, kleur,...
• Tekst/stylesheet voor menu

Voorbeeld

G4. Identificeer de taal

Voor:

• Spraakgenerator, braille
• Braillecontractie, spellingcorrectie
• Zoekmachines, autom. vertalers

Methode:

• Juiste waarde HTTP-header "Language"
• lang= of xml:lang= attribuut

G5. Lineariseerbare tabellen

• Schermlezers lezen in principe horizontaal
• dus moeite met tabellen voor layout

Complexe tabellen:

• Correct gebruik TD/TH
• Gebruik summary=

G6. Alternatieven voor nieuwe technologieën

Houdt rekening met

• Oude versies van browsers
• Ontbrekende/uitgeschakelde plug-ins
• Geen ondersteuning voor stylesheets
• Geen grafische omgeving
• Geen muis, geen toetsenbord (event handlers!)

G7. Controle over tijdsgevoelige data

• Vertragen/stoppen van beweging
• Geen auto-refresh
• Geen knipperende dingen

G8. UI voor embedded objects

• Een applet is ook een programma
  zie WAI UA guidelines

G9. Device-independence

Misschien heeft de gebruiker:

• Geen muis, geen toetsenbord
• Geen geluidskaart, geen scherm
• Een TV-scherm, een PDA, een WAP-phone...
• Een braille-lezer, een spraak-generator
• Een perl-script...

G10. Interim-oplossingen

Totdat stylesheets of browsers de gebruiker controle geven:

• Open geen nieuwe windows
• Geen tekst in kolommen

G11. W3C-standaarden

• Gebruik standaard-formaten
• Gebruik formaten met ingebouwde accessibility-eigenschappen

G12. Context & orientatie

• Zinvolle titels
• Labels voor form-elementen
• Groepeer gerelateerde informatie

G13. Navigatie

• Verduidelijk doel van een link
• Metadata (<link>, rel=, RDF)
• Sitemap, inhoudsopgave
• Consistentie
• Navigation-bar
• Eenvoudige en geavanceerde zoek
• Belangrijkste informatie eerst

G14. Duidelijk & eenvoudig

• Eenvoudigst mogelijk taalgebruik
• Vul tekst aan met diagrammen, geluid
• Consistente stijl voor alle pagina

CSS-trucs: onzichtbare tekst 1

Verberg tekst met display: none

1 + 1 = 2

CSS-trucs: onzichtbare tekst 2

Stijl:

.alternative { display: none }

Document:

<p>... voorbeelden zien er zo uit:
<p class="alternative">[Voorbeeld:]
<pre>1 + 1 = 2</pre>
<p class="alternative">[Einde voorbeeld]

CSS-trucs: box-model i.p.v. <TABLE> 1

Met een tabel:

Met CSS:

CSS-trucs: box-model i.p.v. <TABLE> 2

Met een tabel:

<table width="100%" cellpadding="10"
  cellspacing="0">
 <tr>
  <td bgcolor="#009900"><h2><font
   color="white">17</font></h2></td>
  <td bgcolor="#999900"><h2><font
   color="white">Hazen en
   konijnen</font></h2></td>
 </tr></table>

CSS-trucs: box-model i.p.v. <TABLE> 3

Met CSS:

.t1 { background: #990; color: white;
  padding: 0.3em 0; line-height: 1 }
.t2 { background: #090; padding: 0.3em }

<h2 class="t1">
 <span class="t2">17</span>
 Hazen en konijnen</h2>

CSS-trucs: genereer onbelangrijke tekst 1

Genereer tekst met :before/:after en content

CSS-trucs: genereer onbelangrijke tekst 2

h2:before { 
 content: "Hoofdstuk " counter(ch) ". ";
 counter-increment: ch }

CSS-trucs: floats i.p.v. tabellen

Een "thumbnail" pagina met automatisch het juiste aantal kolommen (voorbeeld)

Conclusie

• Toegankelijkheid betekent heel vaak ook toegankelijk voor computer (=> metadata => "Semantic Web")
• Stylesheets kunnen vaak documenten toegankelijk houden zonder verlies van leesbaarheid/aantrekkelijkheid