Embed Size (px)
DESCRIPTION
An improvised presentation (in Dutch) based on previous available materiaal. The slides are not all that pretty, but were more of an experiment in using LaTeX beamer class.
Citation preview
De Webrichtlijnen voor iedereen
Stephen Hay, Cinnamon Interactive
Fronteers Docentendag
7 mei 2009
Acroniemen-nachtmerrie
XHTML
CSS
W3C
WAI
WCAG
Acroniemen-nachtmerrie
XHTML
CSS
W3C
WAI
WCAG
Acroniemen-nachtmerrie
XHTML
CSS
W3C
WAI
WCAG
Acroniemen-nachtmerrie
XHTML
CSS
W3C
WAI
WCAG
Acroniemen-nachtmerrie
XHTML
CSS
W3C
WAI
WCAG
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...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren
zoekmachines
mobiel
?
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...
webontwikkelaars
visueel gehandicapten
motorisch gehandicapten
kleurenblinden
senioren
zoekmachines
mobiel
?
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
duurzaamheid
gebruiksvriendelijkheid
kwaliteit
Webrichtlijnen zijn voor...
toegankelijkheid
duurzaamheid
gebruiksvriendelijkheid
kwaliteit
Webrichtlijnen zijn voor...
toegankelijkheid
duurzaamheid
gebruiksvriendelijkheid
kwaliteit
Webrichtlijnen zijn voor...
toegankelijkheid
duurzaamheid
gebruiksvriendelijkheid
kwaliteit
Webrichtlijnen voorkomen ergernissen
Onleesbare kleurcombinaties
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
Meer:
Gebruik
Financieel
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Meer:
Gebruik
Financieel
Technisch
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Leverancier-afhankelijkheid
Meer:
Portability (overdraagbaar)
Geen:
Alternatieve versies (tekst/print)
Technisch
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Leverancier-afhankelijkheid
Meer:
Portability (overdraagbaar)
Geen:
Alternatieve versies (tekst/print)
Technisch
Minder:
Dataverkeer
Technisch onderhoud
Hostingskosten
Inhoudelijk onderhoud, vormgeving
Leverancier-afhankelijkheid
Meer:
Portability (overdraagbaar)
Geen:
Alternatieve versies (tekst/print)
Sociaal
Online shopper, kleurenblind
gebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doof
ondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blind
alt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problemen
tekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruiker
scheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperking
geen javascript afhankelijkheid, etc.
Sociaal
Online shopper, kleurenblindgebruik van kleur, stylesheets, etc.
Student, doofondertiteling bij video, etc.
Accountant, blindalt-tekst, taalwisselingen, tabellen, etc.
Senior, leeftijdsgebonden problementekst vergroten, geen pop-ups, etc.
PDA-/mobiele telefoongebruikerscheiding van style en content, etc.
Gebruiker zonder duidelijke beperkinggeen javascript afhankelijkheid, etc.
Webrichtlijnen:Een verzameling van standaarden en best practices
W3C Standaarden
W3C WAI richtlijnen
ISO HTML
Best practices
Gelaagd Bouwen(Progressive Enhancement)
Gedrag
Vormgeving
Structuur
Gedrag
Vormgeving
Structuur
Gedrag
Vormgeving
Structuur
Structuur
Vormgeving
Gedrag
Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d
http://www.example.com/nieuws/2008/09/prinsjesdag/
19283746dfg.pdf
troonrede.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
Vriendelijke, permanente URLs
http://www.example.com/show/contentid=925129/sc=95d
http://www.example.com/nieuws/2008/09/prinsjesdag/
19283746dfg.pdf
troonrede.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
Wel: Er is ook een transcriptie van de troonrede beschikbaar
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
Liefst de keuze overlaten aan de gebruiker
Nieuwe vensters...
Niet zonder waarschuwing
Liefst de keuze overlaten aan de gebruiker
Open standaarden
Ook 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 SlechtEten De Librije FEBODrinken 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
Nationaliteit/land is geen taal
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
(De Webrichtlijnen doen de rest)
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?
