PDF -Datei (2,2 MB ) herunterladen

Transcrição

PDF -Datei (2,2 MB ) herunterladen
Flash, Ajax&
Barrierefreiheit
Tomas Caspers
berät Industrie, NGOs und
Behörden, baut Websites,
schreibt Bücher darüber
und hält Vorträge
.
(und mag Akzidenz-Grotesk viel lieber als Helvetica)
http://www.patramsey.net/2007/the-accessible-web/
1997
1997
1997
http://www.w3.org/Style/CSS/Test/w3c.html
?
Web-Standards
Ja, nee, is klar!
Die Folgen:
div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}
html>body .content {
width:300px;
}
(ekelig, oder?)
Farbige Scrollbalken!
Frames!
Aufklappmenüs! Animierte
Schneeflocken!
Ticker! Seitenübergänge!
Die aktuelle Uhrzeit!
Browser-Chrome verstecken!
Hintergrundmusik!
Countdown bis
Weihnachten!
Pop-Ups!
<A onMouseOver="window.status='hier
klicken!'; return true;">
Farbige Scrollbalken!
Frames!
Aufklappmenüs! Animierte
Schneeflocken!
Ticker! Seitenübergänge!
Die aktuelle Uhrzeit!
BÖSE!
Browser-Chrome verstecken!
Hintergrundmusik!
Countdown bis
Weihnachten!
Pop-Ups!
<A onMouseOver="window.status='hier
klicken!'; return true;">
Farbige Scrollbalken!
Frames!
Aufklappmenüs! Animierte
Schneeflocken!
Ticker! Seitenübergänge!
Die aktuelle Uhrzeit!
Browser-Chrome verstecken!
Hintergrundmusik!
Countdown bis
Weihnachten!
Pop-Ups!
<A onMouseOver="window.status='hier
klicken!'; return true;">
Farbige Scrollbalken!
Frames!
NOCH
IMMER
Pop-Ups!
BÖSE!
Aufklappmenüs! Animierte
Schneeflocken!
Ticker! Seitenübergänge!
Die aktuelle Uhrzeit!
Browser-Chrome verstecken!
Hintergrundmusik!
Countdown bis
Weihnachten!
<A onMouseOver="window.status='hier
klicken!'; return true;">
Barrierefreiheit?
© http://www.flickr.com/photos/webseeings/239301576/
WTF?
WCAG2.0?
WCAG2.0?
10
PRINT
"WCAG"
20
GOTO
10
ChecklistenSyndrom?
© http://www.flickr.com/photos/chuckbiscuito/161971512/
Real World User Testing
© http://www.flickr.com/photos/kosmar/323809582/
Applikation
!=
Dokument
?
Web-Standards
Besserung in Sicht?
?
Sonderlösung
Der Praxisteil:
• Flash- &
AJAX-Mythen
Der Praxisteil:
• Flash- &
AJAX-Mythen
(Standardistus argumentatavum Maximus)
Der Praxisteil:
?
• Flash & AJAX ist:
nix für Suchmaschinen
Der Praxisteil:
?
• Flash ist:
kein Open Source
Der Praxisteil:
?
• Flash ist:
nicht barrierefrei
Der Praxisteil:
?
• Flash & AJAX ist:
nix für Screenreader
http://de.wikipedia.org/wiki/OpenLaszlo
Der Praxisteil:
?
• Flash ist:
nix für Sehbehinderte
Der Praxisteil:
!
http://www.kaourantin.net/swf/highContrast.html
http://niquimerret.com/fontresize/
Psst: System.capabilities.hasAccessibility:true
Der Praxisteil:
• Flash ist:
Schuld an ...
?
Der Praxisteil:
?
• Flash und AJAX:
können keine
Bookmarks
http://www.flickr.com/photos/53407766@N00/55806664
Der Praxisteil:
?
• Flash & AJAX sind:
abgeschaltet
79%
aller Statistiken
sind gefälscht!
(diese eingerechnet)
Der Praxisteil:
?
• Flash & AJAX sind:
viel Arbeit, wenn
man es zugänglich
machen will
Der Praxisteil:
• Stimmt.
!
Die Prinzipien:
(der WCAG 2)
1.
Content must be perceivable
2.
Interface elements in the content must be operable
3.
Content and controls must be understandable
4.
Content must be robust enough to work with current
and future Web technologies
* http://www.w3.org/TR/WCAG20/
Die Prinzipien:
POUR
Die Prinzipien:
POURN
Die Prinzipien:
POURN
Die Prinzipien:
POUR
Ist die Zeit komplexer
Richtlinien, die alles
bis ins kleinste Detail
regeln wollen, vorbei?
=
+
–
( weniger ist mehr )
Danke für‘s Zuhören!
<a href=“mailto:[email protected]“>Fragen?</a>
CC
<a href=“http://creativecommons.org/licenses/by-sa/2.0/de/
deed.de“ rel=“license“>Attribution-ShareAlike</a>
URLs:
Zugängliches Flash:
Kontrast:
http://www.kaourantin.net/swf/highContrast.html
Textskalierung:
http://niquimerret.com/fontresize/
Best Practice:
http://www.bbc.co.uk/accessibility/bbc/mainnews.shtml
http://www.bbc.co.uk/cbeebies/grownups/special_needs/physical_dev/switch/
http://www.bbc.co.uk/cbbc/games/switch/
http://usabletype.com/weblog/flexing-your-apps/
http://www.webaim.org/techniques/flash/
http://www.jkrowling.com/
http://www.sitepoint.com/blogs/2007/04/30/javascript-and-screen-readers/
http://labs.adobe.com/technologies/air/

Documentos relacionados