web guidelines fronteers teachers day 2009

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?