ix-Konferenz Ajax vs. Accessibility

1

ix-KonferenzAjax vs. Accessibility

2

3

Ajax vs. Accessibility

Der Kampf um die Zukunft des Internets

4

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

5

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

6

Die beiden Gegner

7

8

9

Ajax aka Ivan Drago> die russische Kampfmaschine

> das Produkt der High-End-Sporttechnologie

> der Vorzeige-Athlet

10

11

12

Accessibility aka Rocky Balboa> der Underdog / unbekannter Außenseiter

> klein, durchschnittlich, Rechtsausleger

> Sehschwäche auf dem rechten Auge

13

Die GegnerAjax

> Ajax

Teile einer Seite werden erneuert, ausgetauschtoder verändert, ohne dass die Seite neu lädt.

14

Die GegnerAjax

> Ajax

bekannt als:> die coole Hype-Maschine

> Der große Innovator

> Mr. OnTheFly

> Drag&Drop-Wunder

> Fast & Glamorous

15

Die GegnerAjax

> Stärken

> Reaktionszeit / Real time

> Schnelligkeit / kein Reload

> Interaktivität

> Experience

> Feature-Rich

16

Die GegnerAjax

> Schwächen

> URLs

> Back-Button

> View Port

17

Die GegnerAjax

> Gefürchtet für

> Schnelligkeit

> Show-Effekte und Eleganz

> Bricht mit allen Konventionen und Erwartungen

18

Die GegnerAjax

> Glorreiche Siege

> Flickr

> Google Suggest

> Backpack / Basecamp

> Amazon Diamond Search

> Netvibes

>…

19

> Fotoalben live editieren

20

> Diamanten nach Maß

21

> Netvibes: Alles auf meiner Seite

22

> Live-Suche

23

Und jetzt zum Gegner …

24

Die GegnerAccessibility

> Accessibility

Accessibility heißt Zugang …

> für alle Nutzer

> mit allen Browsern und Plattformen

> zu allen Daten und Informationen

25


> bekannt als

> Das Gute

> Der Ur-Gedanke des World Wide Webs

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

„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

Web = Accessibility

29


> Stärken

> Liebling der Massen

> Schnelle Ladezeit

> Findability

> Plattformunabhängigkeit

30


> Schwächen

> Wenig Show-Effekte

> User Experience

> Regel-Fetischismus

> Design

31


> Gefürchtet für

> Moralische Überlegenheit

> “The right thing to do”

32


> Glorreiche Siege

> tagesschau

> News.com

> Postbank

> Baden Württemberg

> BVG – Berliner Verkehrsbetriebe

> Yahoo.com

33

> Nachrichten für alle

34

> Kommerzielles Newsportal

35

> öffentlicher Nahverkehr ohne Barrieren

36

> Bundesland für alle Bürger

37

> Suchportal leicht zugänglich

38

> Banking ohne Zugangshürden

39

Der Kampf beginnt

40

41

Runde 1: Suche

Runde 2: Dynamische Inhalte

Runde 3: Formulare

Runde 4: URLs

Ajax vs. Accessibility Der Kampf

42

1SUCHE

RUNDE

43

Runde 1 Suche

> Klassische Suche

44

Runde 1 Suche

> Klassische Suchebesteht aus:

> Textfeld mit Button (label / input / input)

Nutzung:

1. Suchwort eingeben

2. Suchen-Button drücken

3. Laden der Suchergebnisseite

45

Runde 1 Suche

> Live-Suche

46

Runde 1 Suche

> Live-Suchebesteht 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

47

Runde 1 Suche

> Rundenbewertung> Klassische Suche ist vertraut und leicht zugänglich

> Live-Suche kann Suchprozess immens beschleunigen.

48

Runde 1 Suche

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

49

2DYNAMISCHE INHALTE

RUNDE

50

Runde 2 Dynamische Inhalte

> Ajax> Neue Inhalte werden auf einer Seite dynamisch aktualisiert

(ohne Reload)

> Amazon-Diamond-Search

> Last-FM

51


> 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

52


> Rundenbewertung> Neue Inhalte ohne Reload können Bestell- und

Navigationsprozesse oder die Aneignung von Informationen immens beschleunigen.

53


> 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


> Fallback> Amazon Diamond-Search

55


> Ajax-Rechner> AJAX calculator

Besser mit Alert:

> The accessibleAJAX calculator

56


> Inhalte werden bereits geladen und per Klick eingeblendet> Dom-Tabs

57

58

59

3FORMULARE

RUNDE

60

Runde 3 Formulare

> Ajax-Formulare> sind dynamisch

> geben sofort Feedback

> machen Live-Änderungen möglich (Edit-In-Place)

61

> Edit-in-Place: Backpack

62

> Edit-in-Place: Flickr

63

> Ist der Benutzername noch frei?

64

Runde 3 Formulare

> Accessibility Wie werden die Nutzer informiert, dass

> der Username schon vergeben ist?

> die to-do-list ergänzt wurde?

65

Runde 3 Formulare

> Rundenbewertung> Ajax-Formulare bieten einen hohen Komfort

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

Runde 3 Formulare: Beispiel

> Backpack

Accessibility-Studie:

Joe Clark: Usability tests of Basecamp with screen readers and other adaptive technology

68

Runde 3: Formulare

69

Runde 3: Formulare

70

71

Runde 3: Formulare

72

4URLs

RUNDE

73

Runde 4 URLs: Bookmarks & Back-Button

> HTML-Seiten und URLs

74


> 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


> 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

77


> Rundenbewertung> Back-Button, URLs und Auffindbarkeit sind fundamentale Elemente

des Webs

78


> Lösung: Ajax & Accessibility> Ajax mit Urls und Back-Button

79

80


> 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

81

Der Ausgang des Kampfes

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

> 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

> 3. Ausgang: Harmonie > Graceful Degradation

> Ajaxibility

> Hijax: http://domscripting.com/blog/display/41

> Build Ajax on top: Unobtrusive JavaScript for Ruby on Rails

85

Nachbetrachtung

86

> Wieso eigentlich barrierefrei?

87

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

88

„Unsere Zielgruppe sind normale, jüngere, internetaffine Menschen.“

89

„Wir können also auf Barrierefreiheit verzichten.“

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

> Wird Accessibility ein Comeback erleben?

92

Das Comeback

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

93

Vielen Dank für die Aufmerksamkeit. Fragen?

Documents

ix-Konferenz Ajax vs. Accessibility