ix-Konferenz
Ajax vs. Accessibility
1
2
Ajax vs. Accessibility
Der Kampf um die
Zukunft des Internets
3
Ajax:
Das Internet der Zukunft ist
intuitiv bedien- und erlebbar.
4
Accessibility:
Das Internet der Zukunft ist
plattformunabhängig und barrierefrei.
5
Die beiden Gegner
6
7
8
Ajax aka Ivan Drago
> die russische Kampfmaschine
> das Produkt der High-End-Sporttechnologie
> der Vorzeige-Athlet
9
10
11
Accessibility aka Rocky Balboa
> der Underdog / unbekannter Außenseiter
> klein, durchschnittlich, Rechtsausleger
> Sehschwäche auf dem rechten Auge
12
Die Gegner
Ajax
> Ajax
Teile einer Seite werden erneuert, ausgetauscht
oder verändert, ohne dass die Seite neu lädt.
13
Die Gegner
Ajax
> Ajax
bekannt als:
> die coole Hype-Maschine
> Der große Innovator
> Mr. OnTheFly
> Drag&Drop-Wunder
> Fast & Glamorous
14
Die Gegner
Ajax
> Stärken
> Reaktionszeit / Real time
> Schnelligkeit / kein Reload
> Interaktivität
> Experience
> Feature-Rich
15
Die Gegner
Ajax
> Schwächen
> URLs
> Back-Button
> View Port
16
Die Gegner
Ajax
> Gefürchtet für
> Schnelligkeit
> Show-Effekte und Eleganz
> Bricht mit allen Konventionen und Erwartungen
17
Die Gegner
Ajax
> Glorreiche Siege
> Flickr
> Google Suggest
> Backpack / Basecamp
> Amazon Diamond Search
> Netvibes
>…
18
> Fotoalben live editieren
19
> Diamanten nach Maß
20
> Netvibes: Alles auf meiner Seite
21
> Live-Suche
22
Und jetzt zum Gegner …
23
Die Gegner
Accessibility
> Accessibility
Accessibility heißt Zugang …
> für alle Nutzer
> mit allen Browsern und Plattformen
> zu allen Daten und Informationen
24
Die Gegner
Accessibility
> bekannt als
> Das Gute
> Der Ur-Gedanke des World Wide Webs
25
„The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.“
- Tim Bernes-Lee, Web-Erfinder und Direktor des W3C
26
„The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.“
- Tim Bernes-Lee, Web-Erfinder und Direktor des W3C
27
Web = Accessibility
28
Die Gegner
Accessibility
> Stärken
> Liebling der Massen
> Schnelle Ladezeit
> Findability
> Plattformunabhängigkeit
29
Die Gegner
Accessibility
> Schwächen
> Wenig Show-Effekte
> User Experience
> Regel-Fetischismus
> Design
30
Die Gegner
Accessibility
> Gefürchtet für
> Moralische Überlegenheit
> “The right thing to do”
31
Die Gegner
Accessibility
> Glorreiche Siege
> tagesschau
> News.com
> Postbank
> Baden Württemberg
> BVG – Berliner Verkehrsbetriebe
> Yahoo.com
32
> Nachrichten für alle
33
> Kommerzielles Newsportal
34
> öffentlicher Nahverkehr ohne Barrieren
35
> Bundesland für alle Bürger
36
> Suchportal leicht zugänglich
37
> Banking ohne Zugangshürden
38
Der Kampf beginnt
39
40
Ajax vs. Accessibility
Der Kampf
Runde 1: Suche
Runde 2: Dynamische Inhalte
Runde 3: Formulare
Runde 4: URLs
41
RUNDE
1
SUCHE
42
Runde 1
Suche
> Klassische Suche
43
Runde 1
Suche
> Klassische Suche
besteht aus:
>
Textfeld mit Button
(label / input / input)
Nutzung:
1. Suchwort eingeben
2. Suchen-Button drücken
3. Laden der Suchergebnisseite
44
Runde 1
Suche
> Live-Suche
45
Runde 1
Suche
> Live-Suche
besteht aus:
>
Textfeld
Nutzung:
1. Während Eingabe erscheinen die Suchergebnisse
2. Live-Ergebnisse verfeinern sich automatisch beim Weiterschreiben
3. Auswahl des Ergebnisses oder des Suchwortes während der
Eingabe
46
Runde 1
Suche
> Rundenbewertung
>
Klassische Suche ist vertraut und leicht zugänglich
>
Live-Suche kann Suchprozess immens beschleunigen.
47
Runde 1
Suche
> Lösung: Ajax & Accessibility
>
Live-Suche-Funktionalität + klassischer Button
48
RUNDE
2
DYNAMISCHE INHALTE
49
Runde 2
Dynamische Inhalte
> Ajax
>
Neue Inhalte werden auf einer Seite dynamisch aktualisiert
(ohne Reload)
>
Amazon-Diamond-Search
>
Last-FM
50
Runde 2
Dynamische Inhalte
> Accessibility
>
Wie werden die Nutzer informiert, dass sich auf der Seite etwas
verändert hat?
1. Sehende Nutzer mit herkömmlichen PC:
Keine Probleme: Überblicken die ganze Seite
2. Nutzer mit Handy oder Palm:
Probleme mit der Übersicht
3. Screenreader-Nutzer:
linearer Nutzungsweg / kein Hinweis auf neue Inhalte
51
Runde 2
Dynamische Inhalte
> Rundenbewertung
>
Neue Inhalte ohne Reload können Bestell- und
Navigationsprozesse oder die Aneignung von Informationen
immens beschleunigen.
52
Runde 2
Dynamische Inhalte
> Lösung: Ajax & Accessibility
>
Fallback-Lösung
>
Hinweise für Screenreader-Nutzer
>
Option: Informieren per Alert
>
Inhalte sind bereits im Dokument vorhanden und werden per DOM
und CSS ein und ausgeblendet
53
Runde 2
Dynamische Inhalte
> Fallback
>
Amazon Diamond-Search
54
Runde 2
Dynamische Inhalte
> Ajax-Rechner
>
AJAX calculator
Besser mit Alert:
>
The accessible
AJAX calculator
55
Runde 2
Dynamische Inhalte
> Inhalte werden bereits geladen und
per Klick eingeblendet
>
Dom-Tabs
56
57
58
RUNDE
3
FORMULARE
59
Runde 3
Formulare
> Ajax-Formulare
>
sind dynamisch
>
geben sofort Feedback
>
machen Live-Änderungen möglich (Edit-In-Place)
60
> Edit-in-Place: Backpack
61
> Edit-in-Place: Flickr
62
> Ist der Benutzername noch frei?
63
Runde 3
Formulare
> Accessibility
Wie werden die Nutzer informiert, dass
>
der Username schon vergeben ist?
>
die to-do-list ergänzt wurde?
64
Runde 3
Formulare
> Rundenbewertung
>
Ajax-Formulare bieten einen hohen Komfort
65
Runde 3
Formulare
> Lösung: Ajax & Accessibility
>
Yellow-Fade
>
Hinweis für Screenreader-Nutzer: Dynamische Aktualisierung
>
Hinweis, dass JavaScript benötigt wird
>
Überprüfen auf JavaScript und alternative Version bereitstellen
>
Option: per Alert informieren, dass sich was verändert hat
66
Runde 3
Formulare: Beispiel
> Backpack
Accessibility-Studie:
Joe Clark: Usability tests of Basecamp with screen readers and other
adaptive technology
67
Runde 3:
Formulare
68
Runde 3:
Formulare
69
70
Runde 3:
Formulare
71
RUNDE
4
URLs
72
Runde 4
URLs: Bookmarks & Back-Button
> HTML-Seiten und URLs
73
Runde 4
URLs: Bookmarks & Back-Button
> HTML-Seiten und URLs
>
jede Seite hat eine eigene URL
>
jede Seite kann gebookmarkt werden
>
jeder Link führt auf eine neue Seite
>
mit dem Back-Button kommt man wieder zurück zur vorherigen
Seite
74
Runde 4
URLs: Bookmarks & Back-Button
> Ajax-Seiten
>
Immer die gleiche URL
Probleme
>
Bookmarken nicht möglich
>
Links verschicken nicht möglich
>
Back-Button funktioniert nicht
Zusätzliches Problem:
>
Auffindbarkeit
75
76
Runde 4
URLs: Bookmarks & Back-Button
> Rundenbewertung
>
Back-Button, URLs und Auffindbarkeit sind fundamentale Elemente
des Webs
77
Runde 4
URLs: Bookmarks & Back-Button
> Lösung: Ajax & Accessibility
>
Ajax mit Urls und Back-Button
78
79
Runde 4
URLs: Bookmarks & Back-Button
> Wie es funktioniert
>
Content with Style: Fixing the Back Button and Enabling
Bookmarking for AJAX Apps
>
Really Simple History: Ajax-Framework for bookmarking and
back button support
> Beispiele
>
Odeo
>
Content with Style
80
Der Ausgang des Kampfes
81
> 1. Ausgang: Ajax siegt
>
Ajax und Web 2.0 sind zu cool
>
Accessibility ist nett, aber nicht mehr zeitgemäß
>
Es gibt genügend andere Probleme
>
User-Experience ist wichtiger als Barrierefreiheit
82
> 2. Ausgang: Accessibility siegt
>
Ajax-Anwendungen scheitern an ihrer eigenen Show
>
Schillernde Oberfläche statt guter Benutzerführung
>
Effekthascherei nervt die Nutzer
>
Nutzer suchen Einfachheit und gute Inhalte
83
> 3. Ausgang: Harmonie
>
Graceful Degradation
>
Ajaxibility
>
Hijax: http://domscripting.com/blog/display/41
>
Build Ajax on top: Unobtrusive JavaScript for Ruby on Rails
84
Nachbetrachtung
85
> Wieso eigentlich barrierefrei?
86
„Wir haben nichts gegen
Barrierefreiheit, aber wir haben mit
unserer Technik schon genug
Probleme.“
87
„Unsere Zielgruppe sind normale,
jüngere, internetaffine Menschen.“
88
„Wir können also auf Barrierefreiheit
verzichten.“
89
klar, damit verzichten Sie auch auf:
>
Google
>
Ältere Nutzer
>
Nutzer mit körperlichen Einschränkungen
>
Internet-Newbies
>
Nutzer, die mit Handy, Palm, Blackberry surfen
90
> Wird Accessibility ein Comeback
erleben?
91
Das Comeback
> Rocky VI
Dezember 2006
Trailer: http://www.youtube.com/watch?v=0biU_lZE0Xc
92
Vielen Dank für die Aufmerksamkeit.
Fragen?
93

Die Power-Point-Version des Vortrags als