1 ix-Konferenz Ajax vs. Accessibility. 2 3 Ajax vs. Accessibility Der Kampf um die Zukunft des Internets.

Präsentation zum Thema: "1 ix-Konferenz Ajax vs. Accessibility. 2 3 Ajax vs. Accessibility Der Kampf um die Zukunft des Internets."—  Präsentation transkript:

1 1 ix-Konferenz Ajax vs. Accessibility

2 2

3 3 Ajax vs. Accessibility Der Kampf um die Zukunft des Internets

4 4 Ajax: Das Internet der Zukunft ist intuitiv bedien- und erlebbar.

5 5 Accessibility: Das Internet der Zukunft ist plattformunabhängig und barrierefrei.

6 6 Die beiden Gegner

7 7

8 8

9 9 Ajax aka Ivan Drago > > die russische Kampfmaschine > > das Produkt der High-End-Sporttechnologie > > der Vorzeige-Athlet

10 10

11 11

12 12 Accessibility aka Rocky Balboa > > der Underdog / unbekannter Außenseiter > > klein, durchschnittlich, Rechtsausleger > > Sehschwäche auf dem rechten Auge

13 13 Die Gegner Ajax > > Ajax Teile einer Seite werden erneuert, ausgetauscht oder verändert, ohne dass die Seite neu lädt.

14 14 Die Gegner Ajax > > Ajax bekannt als: > > die coole Hype-Maschine > > Der große Innovator > > Mr. OnTheFly > > Drag&Drop-Wunder > > Fast & Glamorous

15 15 Die Gegner Ajax > > Stärken > > Reaktionszeit / Real time > > Schnelligkeit / kein Reload > > Interaktivität > > Experience > > Feature-Rich

16 16 Die Gegner Ajax > > Schwächen > > URLs > > Back-Button > > View Port

17 17 Die Gegner Ajax > > Gefürchtet für > > Schnelligkeit > > Show-Effekte und Eleganz > > Bricht mit allen Konventionen und Erwartungen

18 18 Die Gegner Ajax > > Glorreiche Siege > > Flickr > > Google Suggest > > Backpack / Basecamp > > Amazon Diamond Search > > Netvibes > >…

19 19 > > Fotoalben live editieren

20 20 > > Diamanten nach Maß

21 21 > > Netvibes: Alles auf meiner Seite

22 22 > > Live-Suche

23 23 Und jetzt zum Gegner …

24 24 Die Gegner Accessibility > > Accessibility Accessibility heißt Zugang … > > für alle Nutzer > > mit allen Browsern und Plattformen > > zu allen Daten und Informationen

25 25 Die Gegner Accessibility > > bekannt als > > Das Gute > > Der Ur-Gedanke des World Wide Webs

26 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 27 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

28 28 Web = Accessibility

29 29 Die Gegner Accessibility > > Stärken > > Liebling der Massen > > Schnelle Ladezeit > > Findability > > Plattformunabhängigkeit

30 30 Die Gegner Accessibility > > Schwächen > > Wenig Show-Effekte > > User Experience > > Regel-Fetischismus > > Design

31 31 Die Gegner Accessibility > > Gefürchtet für > > Moralische Überlegenheit > > The right thing to do

32 32 Die Gegner Accessibility > > Glorreiche Siege > > tagesschau > > News.com > > Postbank > > Baden Württemberg > > BVG – Berliner Verkehrsbetriebe > > Yahoo.com

33 33 > > Nachrichten für alle

34 34 > > Kommerzielles Newsportal

35 35 > > öffentlicher Nahverkehr ohne Barrieren

36 36 > > Bundesland für alle Bürger

37 37 > > Suchportal leicht zugänglich

38 38 > > Banking ohne Zugangshürden

39 39 Der Kampf beginnt

40 40

41 41 Runde 1: Suche Runde 2: Dynamische Inhalte Runde 3: Formulare Runde 4: URLs Ajax vs. Accessibility Der Kampf

42 42 1 SUCHE RUNDE

43 43 Runde 1 Suche > > Klassische Suche

44 44 Runde 1 Suche > > Klassische Suche besteht aus: > >Textfeld mit Button (label / input / input) Nutzung: 1. 1.Suchwort eingeben 2. 2.Suchen-Button drücken 3. 3.Laden der Suchergebnisseite

45 45 Runde 1 Suche > > Live-Suche

46 46 Runde 1 Suche > > Live-Suche besteht aus: > >Textfeld Nutzung: 1. 1.Während Eingabe erscheinen die Suchergebnisse 2. 2.Live-Ergebnisse verfeinern sich automatisch beim Weiterschreiben 3. 3.Auswahl des Ergebnisses oder des Suchwortes während der Eingabe

47 47 Runde 1 Suche > > Rundenbewertung > >Klassische Suche ist vertraut und leicht zugänglich > >Live-Suche kann Suchprozess immens beschleunigen.

48 48 Runde 1 Suche > > Lösung: Ajax & Accessibility > >Live-Suche-Funktionalität + klassischer Button

49 49 2 DYNAMISCHE INHALTE RUNDE

50 50 Runde 2 Dynamische Inhalte > > Ajax > >Neue Inhalte werden auf einer Seite dynamisch aktualisiert (ohne Reload) > >Amazon-Diamond-SearchAmazon-Diamond-Search > >Last-FMLast-FM

51 51 Runde 2 Dynamische Inhalte > > Accessibility > >Wie werden die Nutzer informiert, dass sich auf der Seite etwas verändert hat? 1. 1.Sehende Nutzer mit herkömmlichen PC: Keine Probleme: Überblicken die ganze Seite 2. 2.Nutzer mit Handy oder Palm: Probleme mit der Übersicht 3. 3.Screenreader-Nutzer: linearer Nutzungsweg / kein Hinweis auf neue Inhalte

52 52 Runde 2 Dynamische Inhalte > > Rundenbewertung > >Neue Inhalte ohne Reload können Bestell- und Navigationsprozesse oder die Aneignung von Informationen immens beschleunigen.

53 53 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

54 54 Runde 2 Dynamische Inhalte > > Fallback > >Amazon Diamond-SearchAmazon Diamond-Search

55 55 Runde 2 Dynamische Inhalte > > Ajax-Rechner > >AJAX calculatorAJAX calculator Besser mit Alert: > >The accessible AJAX calculatorThe accessible AJAX calculator

56 56 Runde 2 Dynamische Inhalte > > Inhalte werden bereits geladen und per Klick eingeblendet > >Dom-TabsDom-Tabs

57 57

58 58

59 59 3 FORMULARE RUNDE

60 60 Runde 3 Formulare > > Ajax-Formulare > >sind dynamisch > >geben sofort Feedback > >machen Live-Änderungen möglich (Edit-In-Place)

61 61 > > Edit-in-Place: Backpack

62 62 > > Edit-in-Place: Flickr

63 63 > > Ist der Benutzername noch frei?

64 64 Runde 3 Formulare > > Accessibility Wie werden die Nutzer informiert, dass > >der Username schon vergeben ist? > >die to-do-list ergänzt wurde?

65 65 Runde 3 Formulare > > Rundenbewertung > >Ajax-Formulare bieten einen hohen Komfort

66 66 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

67 67 Runde 3 Formulare: Beispiel > > Backpack Accessibility-Studie: Joe Clark: Usability tests of Basecamp with screen readers and other adaptive technologyUsability tests of Basecamp with screen readers and other adaptive technology

68 68 Runde 3: Formulare

69 69 Runde 3: Formulare

70 70

71 71 Runde 3: Formulare

72 72 4 URLs RUNDE

73 73 Runde 4 URLs: Bookmarks & Back-Button > > HTML-Seiten und URLs

74 74 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

75 75 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

76 76

77 77 Runde 4 URLs: Bookmarks & Back-Button > > Rundenbewertung > >Back-Button, URLs und Auffindbarkeit sind fundamentale Elemente des Webs

78 78 Runde 4 URLs: Bookmarks & Back-Button > > Lösung: Ajax & Accessibility > >Ajax mit Urls und Back-Button

79 79

80 80 Runde 4 URLs: Bookmarks & Back-Button > > Wie es funktioniert > >Content with Style: Fixing the Back Button and Enabling Bookmarking for AJAX AppsFixing the Back Button and Enabling Bookmarking for AJAX Apps > >Really Simple History: Ajax-Framework for bookmarking and back button supportAjax-Framework for bookmarking and back button support > >Beispiele > >OdeoOdeo > >Content with StyleContent with Style

81 81 Der Ausgang des Kampfes

82 82 > > 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

83 83 > > 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

84 84 > > 3. Ausgang: Harmonie > >Graceful Degradation > >Ajaxibility > >Hijax: http://domscripting.com/blog/display/41http://domscripting.com/blog/display/41 > >Build Ajax on top: Unobtrusive JavaScript for Ruby on RailsJavaScript for Ruby on Rails

85 85 Nachbetrachtung

86 86 > > Wieso eigentlich barrierefrei?

87 87 Wir haben nichts gegen Barrierefreiheit, aber wir haben mit unserer Technik schon genug Probleme.

88 88 Unsere Zielgruppe sind normale, jüngere, internetaffine Menschen.

89 89 Wir können also auf Barrierefreiheit verzichten.

90 90 klar, damit verzichten Sie auch auf: > >Google > >Ältere Nutzer > >Nutzer mit körperlichen Einschränkungen > >Internet-Newbies > >Nutzer, die mit Handy, Palm, Blackberry surfen

91 91 > > Wird Accessibility ein Comeback erleben?

92 92 Das Comeback > > Rocky VI Dezember 2006 Trailer: http://www.youtube.com/watch?v=0biU_lZE0Xc

93 93 Vielen Dank für die Aufmerksamkeit. Fragen?