54
http://www.patramsey.net/2007/the-accessible-web/

Deutsche Übersetzung der WCAG 2.0

Embed Size (px)

Citation preview

Page 2: Deutsche Übersetzung der WCAG 2.0

Tomas Caspersberät Industrie, NGOs und Behörden, baut Websites, schreibt Bücher, bloggt und hält Vorträge. «

(und mag Akzidenz-Grotesk viel lieber als Helvetica).

»

Page 4: Deutsche Übersetzung der WCAG 2.0

• USA: Americans with Disabilities Act (ADA)• Section 508

• GB: Disability Discrimination Act (DDA)

• EU: Vorgaben für entsprechende Gesetze in den Mitgliedsländern

• Deutschland:• Behindertengleichstellungsgesetz (BGG) • Rechtsverordnung zur Barrierefreien

Informationstechnik (BITV) ← WCAG!• Allgemeines Gleichbehandlungsgesetz (AGG)

Page 5: Deutsche Übersetzung der WCAG 2.0

»Barrierefrei sind [...] technische Gebrauchs-

gegenstände, Systeme der Informationsver-

arbeitung, akustische und visuelle Informations-

quellen und Kommunikationseinrichtungen [...],

wenn sie für behinderte Menschen in der allgemein

üblichen Weise, ohne besondere Erschwernis und

grundsätzlich ohne fremde Hilfe zugänglich und

nutzbar sind.«

(§4 BGG, näheres dazu bei www.behindertenbeauftragte.de)

Page 6: Deutsche Übersetzung der WCAG 2.0

»Barrierefrei sind [...] technische Gebrauchs-

gegenstände, Systeme der Informationsver-

arbeitung, akustische und visuelle Informations-

quellen und Kommunikationseinrichtungen [...],

wenn sie für behinderte Menschen in der allgemein

üblichen Weise, ohne besondere Erschwernis und

grundsätzlich ohne fremde Hilfe zugänglich und

nutzbar sind.«

(§4 BGG, näheres dazu bei www.behindertenbeauftragte.de)

Designingfor our future selves

Page 9: Deutsche Übersetzung der WCAG 2.0
Page 10: Deutsche Übersetzung der WCAG 2.0

Hä?

Page 11: Deutsche Übersetzung der WCAG 2.0
Page 12: Deutsche Übersetzung der WCAG 2.0

79%aller Statistikensind gefälscht!

(diese eingerechnet)

Page 13: Deutsche Übersetzung der WCAG 2.0

» Behinderung ist die

mangelnde Fähigkeit,

mit schlechtem Design

umgehen zu können. «

Page 14: Deutsche Übersetzung der WCAG 2.0

Checklisten-Syndrom?

Page 15: Deutsche Übersetzung der WCAG 2.0

10  PRINT  "WCAG"20  GOTO  10

Page 16: Deutsche Übersetzung der WCAG 2.0
Page 17: Deutsche Übersetzung der WCAG 2.0

vs.WCAG 1.0

WCAG 2.0

Page 18: Deutsche Übersetzung der WCAG 2.0
Page 19: Deutsche Übersetzung der WCAG 2.0

Testbar:

Mond Kein Mond

Page 20: Deutsche Übersetzung der WCAG 2.0

1. Perceivable Information and user interface components must be presentable to users in ways they can perceive

2. OperableUser interface components and navigation must be operable

3. UnderstandableInformation and the operation of user interface must be understandable

4. RobustContent must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies

http://www.w3.org/TR/WCAG20/

Die Prinzipien:

Page 21: Deutsche Übersetzung der WCAG 2.0

POUR

Die Prinzipien:

Page 22: Deutsche Übersetzung der WCAG 2.0

»Do not read ›Understanding WCAG‹. In fact, do not read WCAG 2. Web Accessibility is about people, not about guidelines.«

(Shawn Henry, W3C WAI)

Page 23: Deutsche Übersetzung der WCAG 2.0

Percievable

1. Provide equivalent alternatives to auditory

and visual content.

1.1 Provide a text equivalent for every non-text element.

1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative

that serves the equivalent purpose

G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as

the non-text content [...] Examples: A search button uses an image of a magnifying glass. The text alternative is "search" and not

"magnifying glass".

SAMPLE

Page 24: Deutsche Übersetzung der WCAG 2.0

© http://www.flickr.com/photos/chuckbiscuito/161971512/

Und nun?

Page 25: Deutsche Übersetzung der WCAG 2.0

http://wcag2.0-blog.de/2009-07-28/Jetzt auch auf Deutsch!

Page 28: Deutsche Übersetzung der WCAG 2.0

Vorsprung durch

Techniques

Page 29: Deutsche Übersetzung der WCAG 2.0

Wahrnehmbar:

Page 30: Deutsche Übersetzung der WCAG 2.0

Zum Bestellen drücken Sie bitte auf den grünen Knopf:

Wahrnehmbar:

Page 31: Deutsche Übersetzung der WCAG 2.0

Verteilung der Farbfehlsichtigkeitenin der Bevölkerung:

farbfehlsichtig

Nicht farbfehlsichtig

Wahrnehmbar:

Page 32: Deutsche Übersetzung der WCAG 2.0

Wahrnehmbar:

Page 33: Deutsche Übersetzung der WCAG 2.0

Wahrnehmbar:

Page 34: Deutsche Übersetzung der WCAG 2.0
Page 35: Deutsche Übersetzung der WCAG 2.0
Page 36: Deutsche Übersetzung der WCAG 2.0

<img  src="foo"  alt="bar">

Page 37: Deutsche Übersetzung der WCAG 2.0
Page 38: Deutsche Übersetzung der WCAG 2.0
Page 39: Deutsche Übersetzung der WCAG 2.0

Bedienbar:

Page 40: Deutsche Übersetzung der WCAG 2.0

(Auflösung: in der Wikipedia nach »Fitts‘s Law« suchen)

Bedienbar:

Page 41: Deutsche Übersetzung der WCAG 2.0

• Sämtliche Inhalte und Funktionen müssen per Tastatur erreich- und bedienbar sein

• Bewegungen und Aktualisierungen müssen vom Benutzer gesteuert werden können

• Hilfen zur Orientierung und Navigation

Bedienbar:

Page 42: Deutsche Übersetzung der WCAG 2.0

»Skip-Links«

erleichtern die

Bedienung für

Tastaturnutzer.

Bedienbar:

Page 44: Deutsche Übersetzung der WCAG 2.0

Exzessibility!

Page 45: Deutsche Übersetzung der WCAG 2.0

Verständlich:

Page 46: Deutsche Übersetzung der WCAG 2.0

Verständlich?

Page 47: Deutsche Übersetzung der WCAG 2.0

We can make a Web site work with zero hearing.

We can make one work with zero vision.

We can even make a Web site work with almost zero movement.

But we can’t make a Web site work with zero cognition.

»

«Joe Clark, atmedia 2007

Page 48: Deutsche Übersetzung der WCAG 2.0

= +( weniger ist mehr )

Page 49: Deutsche Übersetzung der WCAG 2.0

Innovatives Optimierungswerkzeugfür kalorienreduzierten

Web-Content:

<!-­‐-­‐    -­‐-­‐>

Page 50: Deutsche Übersetzung der WCAG 2.0

Robust:

Page 51: Deutsche Übersetzung der WCAG 2.0

Robust?

Page 52: Deutsche Übersetzung der WCAG 2.0

Robust?

Page 53: Deutsche Übersetzung der WCAG 2.0

KTHXBAI!<a  href="mailto:[email protected]">Noch Fragen?</a>

Page 54: Deutsche Übersetzung der WCAG 2.0

<a  href="http://creativecommons.org/licenses/by-­‐nc-­‐sa/2.0/de/"  

rel="license">Attribution-Noncommercial-Share Alike 2.0</a>