Download - Toegankelijkheid
Toegankelijk bouwen voor het web.
Agenda• Wat is toegankelijk bouwen? W3C guidelines
• Webrichtlijnen van de Nederlandse overheid Opdracht
3
Wat is toegankelijk bouwen?
“Ik moet al genoeg moeite doen om 80 procent van mijn klanten te bereiken. Ik maak me dus nog niet zo druk om die laatste 10 procent.”
Pro’ s en Con’ s• Brede doelgroep dienen Automatische zoekmachine optimalisatie
• Snellere pagina’ s• Crossbrowser compatibility Crossplatform compatibility
Meer werk (max. 10%) • Hogere kosten voor de klant (max. 10%)
W3C richtlijnen
W3C Richtlijnen•Bouw P1: Opmaak scheiden van Content
• P1: Leesbare HTML (ook zonder CSS)• P1: Alternatieven voor fotografie (Alt-tekst) • P1: Alternatieven voor video (transcripts)* P1: Alternatieven voor flash (tekst) P1: Alternatieven voor AJAX/Javascript*
• P1: Geen flikkerende flashapps • P1: Tabellen alleen voor tabulaire data P1: Tabellen altijd met headers
• P1: Zorg voor contrast in kleur (bv. links)• P2: Em’ s i.p.v. pixels *• P2: Maak gebruik van Headerstructuren *• P2: Geen page-refreshes of redirects• P2: Geen pop-ups
Voor de volledige lijst http://www.accessibility.nl/internet/richtlijnen/checklist
• P2: Lever metadata (semantiek)*• P2: Geef duidelijke links• P2: Geef altijd een sitemap• P2: Geef inputs altijd labels• P3: Geef afkortingen een <abbr>• P3: Geef de taal van de tekst aan (lang=” nl” )• P3: Maak content “ tab-baar”• P3: Specificeer en defineer meerdere zoekmogelijkheden• P3: Consistente presentatiestijl• P3: Tabellen samenvatten• P3: “ Watermark” beter dan lege inputs.*
Alternatieven voor video
http://www.accessibility.nl/internet/artikelen/audiovideo#voorbeelden
Em’ s i.p.v. pixels
Em’ s i.p.v. pixels (2)
Maak gebruik van Headerstructuren
goed fout
Alternatieven voor AJAX/Javascript
“ Watermark” beter dan lege inputs
Lever metadata (semantiek)Microformats
(Metatags)
15
Webrichtlijnen van de Overheid
Webrichtlijnen van de overheid•Selectie uit 125 Geen deprecated technologie (Frames, img maps)• Javascript alleen via de DOM• Minimaal HTML 4.01 of XHTML 1.0, altijd strict. Correcte hierarchie headers
• Geen stappen overslaan in headers• Geen br voor het scheiden van p’ s• Gebruik em, abbr, cite, dfn, ins, del, q * Gebruik blockquote, ol Betekenisvolle namen id’ s en classes * Leesbare URL’ s * HTML in volgorde van belangrijkheid *
• Decoratieve img via CSS, content img via HTML
Voor de volledige lijst http://www.webrichtlijnen.nl/richtlijnen/
Geen CSS Image replacement * Focus of Outline niet verwijderen * Geen accesskeys Geef aan wat je formulierdata doet * Geef aan wat er na clicks gebeurt Tabellen (laat ik even buiten beschouwing nu) Geen tabellen voor layout Groepeer inputelementen middels fieldsets Geef verplichte velden duidelijk aan Geef mogelijkheid tot archivering formdata
• Zo min mogelijk css voor formulieren• Geen herstel knop voor formulieren• Taalkeuze op iedere pagina• Geen nationaliteiten vermelden in taalkeuze
Webrichtlijnen van de overheid•Selectie uit 125• Schrijf taalkeuzes volledig uit...• ... in de desbetreffende taal• Altijd UTF-8 *• Geef iedere pagina een unieke titel• Maak foutpagina’ s (404, 500) aan• Gebruik slimme zoektechnologie *• Geef mogelijkheid tot foutrapportage• Websites moeten schalen *
• Bouw volgens richtlijnen van W3C (doh!)
Voor de volledige lijst http://www.webrichtlijnen.nl/richtlijnen/
Gebruik em, abbr, cite, dfn, ins, del, q
Betekenisvolle namen id’ s/classes
Leesbare URL’ shttp://www.target.com/gp/detail.html/602-9912342-3046240?_encoding=UTF8&frombrowse=1&asin=B000FN0KWA
fout
http://www.nasa.gov/home/index.html?skipIntro=1
beter
http://web.mit.edu/is/usability/usability-guidelines.htm
goed
HTML volgorde van belangrijkheid
22
23
24
Geen CSS image replacement
Focus / outline niet verwijderen
Formulierdata uitleggen
Altijd UTF-8
Schalen van websites
Internet Explorer 6
Absolute Don’ ts– Inline code– list-styles compleet verwijderen– “ text-decoration: none;” op a’ s
–Onbelicht gelaten:– CMS-systemen
De opdracht• Bouw een website naar keuze om conform webrichtlijnen, of indien te complex Prio 1 + 2.• Basis HTML:
– http://www.bohemianworks.nl/basis.zip • Handige links:
–W3C validator: http://validator.w3.org/ –W3C guidelines http://www.accessibility.nl/internet/richtlijnen/checklist–Webrichtlijnen: http://www.webrichtlijnen.nl/
Voor vragen:•Jeroen Hulscher•[email protected]•06 15 88 02 65•@bohemianworks
•Voor deze presentatie:•http://www.slideshare.net/JeroenHulscher