ixKonferenz Ajax vs Accessibility 1 2 Ajax vs

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. On. The. Fly > 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 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 W 3 C 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 W 3 C 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) 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 Java. Script benötigt wird > Überprüfen auf Java. Script 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 Java. Script 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=0 bi. U_l. ZE 0 Xc 92

Vielen Dank für die Aufmerksamkeit. Fragen? 93