De Webrichtlijnen voor iedereen
Stephen Hay, Cinnamon Interactive
Fronteers Docentendag
7 mei 2009

Acroniemen-nachtmerrie
XHTML

Acroniemen-nachtmerrie
XHTML
CSS

Acroniemen-nachtmerrie
XHTML
CSS
W3C

Acroniemen-nachtmerrie
XHTML
CSS
W3C
WAI

Acroniemen-nachtmerrie
XHTML
CSS
W3C
WAI
WCAG

Webrichtlijnen zijn voor...
webontwikkelaars

Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten

Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten

Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden

Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren

Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren
zoekmachines

Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren
zoekmachines
mobiel

Webrichtlijnen zijn voor...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren
zoekmachines
mobiel
?

Webrichtlijnen zijn voor...
toegankelijkheid

Webrichtlijnen zijn voor...
toegankelijkheid
duurzaamheid

Webrichtlijnen zijn voor...
toegankelijkheid
duurzaamheid
gebruiksvriendelijkheid

Webrichtlijnen zijn voor...
toegankelijkheid
duurzaamheid
gebruiksvriendelijkheid
kwaliteit

Webrichtlijnen voorkomen ergenissen
Onleesbare keurcombinaties
Flash-/Javascript-afhankelijkheid
Ontbrekende inhoud
etc.

De voordelen
juridisch
financieel
technisch
sociaal

Juridisch

Juridisch

Juridisch
Rechtzaak = $6.000.000 + aanpassen website

Financieel
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving

Financieel
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Meer:
Gebruik

Financieel

Technisch
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Leverancier-afhankelijkheid

Technisch
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Leverancier-afhankelijkheid
Meer:
Portability

Technisch
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Leverancier-afhankelijkheid
Meer:
Portability
Geen:
Alternatieve versies (text/print)

Sociaal
Online shopper, kleurenblind

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senioren, leeftijd-gebonden problemen

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senioren, leeftijd-gebonden problemen
tekst vergroten, geen pop-ups, etc.

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senioren, leeftijd-gebonden problemen
tekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikers

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senioren, leeftijd-gebonden problemen
tekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikers
scheiding van style en content, etc.

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senioren, leeftijd-gebonden problemen
tekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikers
scheiding van style en content, etc.
gebruikers zonder duidelijke beperking

Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senioren, leeftijd-gebonden problemen
tekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikers
scheiding van style en content, etc.
gebruikers zonder duidelijke beperking
geen javascript afhankelijkheid, etc.

Webrichtlijnen:
Een verzameling van standaarden en best practices

W3C Standaarden

W3C WAI richtlijnen

ISO HTML

Best practices

Gelaagd Bouwen
(Progressive Enhancement)

Structuur

Vormgeving
Structuur

Gedrag
Vormgeving
Structuur

Structuur

Vormgeving

Gedrag

Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d

Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d
http://www.example.com/nieuws/2008/09/prinsjesdag/

Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d
http://www.example.com/nieuws/2008/09/prinsjesdag/
19283746dfg.pdf

Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d
http://www.example.com/nieuws/2008/09/prinsjesdag/
19283746dfg.pdf
troonrede.pdf

Paginastructuur: Pagina als outline

Alternatieve teksten
alt-tekst
alt=\"druk op een icoon om een programma te openen\"

De werking van een link niet beschrijven
Niet: Klik hier voor een transcriptie van de troonrede

De werking van een link niet beschrijven
Niet: Klik hier voor een transcriptie van de troonrede
Wel: Er is ook een transcriptie van de troonrede beschikbaar

Nieuwe vensters...
Niet zonder waarschuwing

Nieuwe vensters...
Niet zonder waarschuwing
Liefst de keuze overlaten aan de gebruiker

Open standaarden
Gebruik naast gesloten standaarden:
bied altijd een open alternatief

CSS: Cascading Style Sheets

Zonder CSS

Met CSS

Andere CSS = andere vormgeving

Niet uitsluitend met kleur communiceren

Niet uitsluitend met kleur communiceren

Gebruik contrast

Tabellen voor data

Niet voor layout

Relatie tussen headers en inhoud aangeven
Goed Slecht
Eten De Librije FEBO
Drinken De Draai Strandtent Jaap

Geen frames.

Formulieren: Labels

Formulieren: Verplichte velden aangeven

Meer richtlijnen voor formulieren
Geen “formulier navigatie”
Gebruik van contingency design (huh?)
Geen “client-side” afhankelijkheid

Talen: de taal van de pagina aangeven
Taal aangeven in HTML
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"nl\">

Talen: taalverschillen aangeven
Taalwisselingen aangeven in HTML
<span lang=\"en\">Language</span> verschillen aangeven

Talen: geen vlaggen

Talen: geen vlaggen
Nationaliteit/land is geen taal

Karaktercodering
Specificeren
UTF-8
Karaktercodering aangeven in HTML
<meta http-equiv=\"content-type\"
content=\"text/html;charset=UTF-8\" />

Ultimate Search Engine Secret
Een beschrijvende titel

Ultimate Search Engine Secret
Een beschrijvende titel
(De Webrichtlijnen doen de rest)

Contingency design:
Design voor als het fout gaat

Contingency design 1

Contingency design 1

Contingency design 2

Contingency design 2

Vragen?