Ajax vs. Accessibility
Der Kampf um die Zukunft des Internets. Ein Vortrag über die Eleganz von Ajax, die moralische Überlegenheit von Accessibility und Rocky Balboa.
Dieser Text ist die html-Version der Folien meines Vortrags, den ich für meinen Arbeitgeber auf der iX-Konferenz 2006 gehalten habe.(Die Power-Point-Version des Vortrags als Download.)
Ajax: Das Internet der Zukunft ist intuitiv bedien- und erlebbar.
Durch Rich User Interfaces ist es eine Freude das Internet zu nutzen. User Experience steht im Mittelpunkt. Surfen im Internet ist ein Erlebnis. Man nutzt das Web intuitiv und spielerisch.
Accessibility: Das Internet der Zukunft ist plattformunabhängig und barrierefrei.
Jeder kann es von überall mit jedem internetfähigen Gerät nutzen – egal ob Handy, Palm, Navigationssystem oder Spielkonsole.
Die beiden Gegner
Ajax aka Ivan Drago
- die russische Kampfmaschine
- das Produkt der High-End-Sporttechnologie
- der Vorzeige-Athlet
Accessibility aka Rocky Balboa
- der Underdog / unbekannter Außenseiter
- klein, durchschnittlich, Rechtsausleger
- Sehschwäche auf dem rechten Auge
Was macht Ajax so besonders?
Eine Definition aus Sicht des Users oder des User-Interfaces.
Teile einer Seite werden erneuert, ausgetauscht
oder verändert, ohne dass die Seite neu lädt.
Ajax ist bekannt als:
- die coole Hype-Maschine
- Der große Innovator
- Mr. OnTheFly
- Drag&Drop-Wunder
- Fast & Glamorous
Die Stärken von Ajax:
- Reaktionszeit / Real time
- Schnelligkeit / kein Reload
- Interaktivität
- Experience
- Feature-Rich
Die Schwächen von Ajax:
- Ähnlich wie früher bei Framesites: Immer die gleiche URL
- gelegentliche Blackouts: Versagen bei Nutzung des Back-Buttons
- Benutzbarkeitsprobleme außerhalb von eines klassischen Computers mit relativ großem Monitor
Ajax wird gefürchtet für:
- Schnelligkeit
- Show-Effekte und Eleganz
- Bricht mit allen Konventionen und Erwartungen
Ajax’ glorreiche Siege:
- Flickr: Fotoalben live editieren
- Amazon Diamond Search
- Netvibes: Alles auf meiner Seite
- Google Suggest: Live Suche
Der Gegner: Accessibility
Accessibility heißt Zugang…
- für alle Nutzer
- mit allen Browsern und Plattformen
- zu allen Daten und Informationen
Accessibility ist bekannt für:
- Das Gute
- Der Ur-Gedanke des World Wide Webs
„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
Die Stärken von Accessibility
- Liebling der Massen, da die Inhalte für die größtmögliche Anzahl von Nutzern leicht zugänglich gemacht werden.
- Schnelle Ladezeit
- Findability
- Plattformunabhängigkeit
Die Schwächen von Accessibility
- Wenig Show-Effekte
- User Experience
- Regel-Fetischismus
- Design (oftmals sieht man schon am Aktions-Sorge-Design, dass die Website barrierefrei ist - das muss nicht sein. Ein Website kann cool aussehen und leicht zugänglich sein.
Accessibility ist gefürchtet für
- Moralische Überlegenheit
- “The right thing to do”
Accessibility: Die glorreichen Siege
Einige der folgenden Websites sind nicht absolut und bis in letzter Instanz barrierefrei, aber zumindest größtenteils gut und leicht zugänglich.
- tagesschau: Nachrichten für alle
- News.com: Kommerzielles Newsportal
- Postbank: Banking ohne Zugangshürden
- Baden Württemberg: Bundesland für alle Bürger
- BVG – Berliner Verkehrsbetriebe: öffentlicher Nahverkehr ohne Barrieren
- Yahoo.com: Suchportal leicht zugänglich
der Kampf beginnt…
Ein Kampf in 4 Runden
Runde 1: Suche
Klassische Suche
besteht aus:
Textfeld mit Button label / input / input
Nutzung:
- Suchwort eingeben
- Suchen-Button drücken
- Laden der Suchergebnisseite
Live-Suche
besteht nur aus einem Textfeld
Nutzung:
- Während Eingabe erscheinen die Suchergebnisse
- Live-Ergebnisse verfeinern sich automatisch beim Weiterschreiben
- Auswahl des Ergebnisses oder des Suchwortes während der Eingabe
Rundenbewertung
- Klassische Suche: Dauert lange und zeigt Tippfehler oder falsche Eingaben erst spät
- Live-Suche: kann Suchprozess immens beschleunigen, schnelles Finden, schnelles ändern der Suchanfrage möglich (z.B. Mac-Suche „SPOTLIGHT“)
- hat aber auch Usability-Probleme
- und vor allem Accessibilty-Probleme: Screen-Reader lesen Live-Ergebnisse nicht vor.
Lösung: Das Beste aus beidem - accessible Ajax
- Live-Suche-Funktionalität + klassischer Button
Das beste aus beidem: Ein Suche die jeder benutzen kann. Und eine Ergebnisseite, die man bookmarken und verschicken kann.
Runde 2: Dynamische Inhalte
Ajax
Neue Inhalte werden auf einer Seite dynamisch aktualisiert (ohne Reload)
Beispiele
Accessibility
Wie werden die Nutzer informiert, dass sich auf der Seite etwas verändert hat?
- Sehende Nutzer mit herkömmlichen PC: Keine Probleme: Überblicken die ganze Seite
- Nutzer mit Handy oder Palm: Probleme mit der Übersicht
- Screenreader-Nutzer: linearer Nutzungsweg / kein Hinweis auf neue Inhalte
Rundenbewertung
Neue Inhalte ohne Reload können Bestell- und Navigationsprozesse oder die Aneignung von Informationen immens beschleunigen.
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
Fallback
- Amazon Diamond Search funktioniert auch ohne JavaScript - nur nicht mehr so schön und lässig.
- Benachrichtung per Alert Ajax-Rechner: The accessible AJAX calculator
- Inhalte werden bereits geladen und per Klick eingeblendet Dom-Tabs
Runde 3: Formulare
Ajax-Formulare
- sind dynamisch
- geben sofort Feedback
- machen Live-Änderungen möglich (Edit-In-Place)
Ist mein Benutzernamen noch frei
Anmeldung Remeber the Milk
Edit in place: flickr
Edit in place: Backpack
Accessibility
Wie werden die Nutzer informiert, dass
- der Username schon vergeben ist?
- die to-do-list ergänzt wurde?
Rundenbewertung
Ajax-Formulare bieten einen hohen Komfort
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
Accessibility-Studie:
Joe Clark: Usability tests of Basecamp with screen readers and other adaptive technology
Runde 4: URLs
Klassische HTML-Seiten
- 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
Ajax-Seiten haben immer die gleiche URL
Probleme
- Bookmarken nicht möglich
- Links verschicken nicht möglich
- Back-Button funktioniert nicht
Zusätzliches Problem:
- Auffindbarkeit: Inhalte, die über Ajax generiert werden, können von Suchmaschinen nicht gefunden werden
Rundenbewertung
Back-Button, URLs und Auffindbarkeit sind fundamentale Elemente des Webs
Lösung: Ajax und Accessibility
Ajax-Seiten mit Urls und funktionierenden 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
Der Ausgang des Kampfes
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
Ajax-Anwendungen scheitern an ihrer eigenen Show
- Schillernde Oberfläche statt guter Benutzerführung
- Effekthascherei nervt die Nutzer
- Nutzer suchen Einfachheit und gute Inhalte
3. Ausgang: Harmonie
- Graceful Degradation
- Ajaxibility Hijax
- Build Ajax on top: Unobtrusive JavaScript for Ruby on Rails
Nachbetrachtung
Wieso eigentlich barrierefrei?
Wir haben nichts gegen Barrierefreiheit, aber wir haben mit unserer Technik schon genug Probleme.
Unsere Zielgruppe sind normale, jüngere, internetaffine Menschen. Wir können also auf Barrierefreiheit verzichten.
klar, damit verzichten Sie auch auf:
- Ältere Nutzer
- Nutzer mit körperlichen Einschränkungen
- Internet-Newbies
- Nutzer, die mit Handy, Palm, Blackberry surfen
Barrierefreiheit heißt mehr Komfort für alle Nutzer:
Die Rechnung ist einfach: Mehr Nutzer, mehr zufriedene Nutzer, die mehr klicken und öfter wieder kommen.
Wird Accessibility also im Web 2.0 ein Comeback erleben?
Das Comeback: Rocky VI
30 Jahre nach Rocky I steigt er wieder in den Ring. “Rocky Balboa” ab Dezember im Kino.
