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•jeroen@tamtam.nl•06 15 88 02 65•@bohemianworks

•Voor deze presentatie:•http://www.slideshare.net/JeroenHulscher