Vortrag auf dem IKT Forum in Linz zur gleichnahmigen Diplomarbeit.
Bitte die Notizen beachten!
Mehr Infos:
http://www.iktforum.at/
http://www.felixnagel.com
fnagel.github.com/jQuery-Accessible-RIA/
Download: http://www.felixnagel.com/blog/permalink/143/
2. Zur Person
> Dipl. Ing. (FH) Felix Nagel
> Webentwickler in Hamburg & Dresden, bei
Paints Multimedia GmbH
> Aktiv in der TYPO3 Community & bei jQuery UI
32. CSS (Animation)
> Änderungen zur Laufzeit
> Zeitbasierte Animation
> Java-Script gestützt oder nativ (CSS3)
> z. B. von Transparenz, Sichtbarkeit, Position,
Form, Farbe, …
43. Vom Browser zur AT
Betriebs- Assistive
Webapplikation Browser
System Technology
44. Vom Browser zur AT
Betriebs- Assistive
Webapplikation Browser
System Technology
45. Vom Browser zur AT
Betriebs- Assistive
Webapplikation Browser
System Technology
46. Vom Browser zur AT
Betriebs- Assistive
Webapplikation Browser
System Technology
47. Vom Browser zur AT
Betriebs- Assistive
Webapplikation Browser
System Technology
48. Vom Browser zur AT
“A brief history of browser accessibility support”
Quelle: Steve Faulkner (The Paciello Group), Lizenz: CC-BY-SA,
http://www.html5accessibility.com/browser-acc.html
50. Richtlinien und Standards
> Umsetzung durch die Entwickler
> Fördert Implementation in Software
> Kontrollmöglichkeit für Käufer
> Arbeiten und Verkaufen im Ausland
51. Richtlinien, Standards und Gesetze
Swedish
BGStG & National
E-GovG Guidelines for JIS (JP) Section 508
(AT) Public Sector (USA)
Websites
PAS-78 +
BehiG
WAI ARIA BITV (DE) BS8878
(UK) (CH)
Common Look
Web and Feel
WCAG ISO Guidelines Standards for
(NL) the Internet
(CA)
52. Relevanz
BITV
BGStG
(DE)
& E-
EU
GovG
(AT)
BehiG
(CH)
ISO
Section WAI
ARIA PAS-78 +
508
Standard WCAG BS8878
(UK)
s (USA)
Common Look
and Feel
Web
Standards for Guidelin
the Internet
(CA) es (NL)
Swedish
National
JIS (JP) Guidelines for
Public Sector
Europäis Websites
ceUnion
53. Grenzen der Anwendbarkeit
> Entwurfsmuster / Techniken oft unzureichend
> Adaption für bestimmte UIs
> Unterstützung der Implementation
58. Diplomarbeit
> „Barrierefreie, Java-Script gestützte
Webapplikationen im praxisnahen Umfeld“
> Namics Deutschland GmbH
> Technische Hochschule Mittelhessen
> Veröffentlichung Sommer 2009
59. Aufbau Diplomarbeit
Toolbox zur Erstellung
von barrierefreien
Technische
Internetseiten
Richtlinien
Technische
Grundlagen
Erörterung von
Gründen
Definition der
Zielgruppen
61. Applikationen
> Programmiert nach und mit Hilfe
> jQuery UI API Developer Guide
> jQuery UI CSS Framework
> Standard jQuery UI Verhalten und Methoden
> jQuery UI Theme Switcher kompatibel
71. Sortable Table
> Sortiert Tabellen nach: Zahl, Datum, Text
> Ausblenden von Reihen und Spalten
> Pager-Funktionalität
> Performance – auch für große Tabellen
geeignet
> jQuerry Address (browser history and title
support )
81. Links
> https://github.com/fnagel/jQuery-Accessible-RIA/
> Projekt Wiki
> Letzte Version als zip
> Bugtracker
> Diplomarbeit als PDF
> http://www.felixnagel.com
> http://www.paints.de
> http://namics.com
82. Dieses Werk bzw. Inhalt steht unter einer
Creative Commons Namensnennung-Weitergabe unter
gleichen Bedingungen 3.0 Deutschland Lizenz.
Namensnennung in folgender Form:
Felix Nagel, http://www.felixnagel.com
Erfahrung weitergeben, spannendes Feedback und konstruktive Diskussionen
Einige grundlegende technische Konzepte der modernen Webentwicklung erklären Gefühl für die Probleme vermitteln denen der Entwickler bei der täglichen Arbeit begegnet Nur ein Ausschnitt In 2 Teile gesplittet
Einige warme Worte zur technische Entwicklung Ein paar Beispiele für moderne Webentwicklung
Wie funktionieren moderne JS gestützte Techniken? Wo liegen die Probleme in Verbindung mit a11y?
Warum Richtlinien wichtig sind? Welche Richtlinien gibt es? Welche sind relevant? Warum a11y oft zu kurz kommt Woran a11y oftmals scheitert Wie man dieses Problem angehen kann
2. Teil: Wie von Herrn Nussbaum gebeten… Kurz: Entstehung & Aufbau Hands on code: Lightbox, Table, Tabs, Form
FE Entwicklung hat sich die Jahre stark verändert Früher stiefmütterlich behandelt und als Disziplin belächelt, heute professionalisiert Trend Inhalte und Anwendungen in Webapplikationen zu verlagern, um das Buzzword „Cloud“ kommt man nicht drum rum FE ist deutlich komplexer und ähnelt immer mehr Desktop Anwendungen
Möglich wurden diese immer komplexeren Webanwendungen vor allem durch die techn. Entwicklung Abgesehen von der reinen Serverleistung und Bandbreite
Mehr und leistungsstärkere Geräte machen das Web omnipräsent (klassischer Desktop, Laptops, Netbooks, Tablets, Smartphones, TV, etc.) OS: Win, Mac, Linux (Android), einige Mobile-Plattformen Browser (IE, FF, Chrome, Safari, Mobile Browser, etc.) Alles in verschiedenen Versionen → Entwicklungsumgebung ist sehr vielschichtig
Trotzdem haben sich im allg. die Browser deutlich weiterentwickelt Leistungsstärkeres Rendering Schnellere Java-Script Engines Unterstützung von Features: HTML5 (inkl. Standortbestimmung, video, audio, landmarks), CSS3, ARIA Vielleicht wird ja ganz langsam die Standardskompatibilität wird besser? mobil oft mit Einschränkungen
Das alles wird erst möglich durch verschiedene Frameworks & Bibliotheken Low-Level Java-Script, UI Komponenten oder auch reine CSS Beispiele: jQuery, MooTools, ExtJs, YahooUI, Google Closure
Zu welcher Art von Webapplikationen uns diese Entwicklung geführt hat zeige ich im folgenden exemplarisch an einigen Screenshots
Eine weitere Möglichkeit Informationen erst auf Verlangen zu präsentieren sind die Modalboxen Im Prinzip Pop-Ups innerhalb der Seite
Benutzereingabe / Benutzerschnittstellen
Beispiel aus dem Bereich Multimedia
Einige grundlegende Techniken der eben gesehenen Anwendungen stelle ich jetzt vor
Zeigen werde ich Ihnen folgende Techniken erläutern Anfangen werde wir mit AJAX
AJAX beschreibt _nur_ den eigentlichen Datenaustausch
Benutzeroberfläche, Event, Engine, HTTP Verkehr, Webserver Was machen wir mit den so erhaltenen Daten?
Schematischer Aufbau eines HTML DOM. Alle Elemente können verändert, entfernt oder hinzugefügt werden.
Stufenlose, dynamische Anpassung der CSS Werte bzw. Nutzung vorhandener CSS Animationen (CSS3)
Die Grundlagen sind vorhanden, weiter zu den daraus entstehenden Problemen
Am Beispiel der Lightbox
Event, AJAX, DOM Manip, CSS Ani Vers. Problematiken für zB Nutzer eines Screenreaders
Wenn hinzugefügt, ist das Element der AT bekannt? Reihenfolge im DOM, Relation Fokus liegt woanders, hinzugefügtes Element liegt im Tabindex am Ende der Seites CSS: visuelle Reihenfolge und Sichtbarkeit (display: none)
Komplexe UIs lassen sich nicht ohne weiteres abbilden
Native Elemente mit Semantik
Die Nutzung, der Zweck eines UIs muss AT verständlich kommuniziert werden
Überleitung: Semantik führt uns zu dem übergreifenden Problem…
Wie funktioniert eigentlich die Kommunikation von Browser bis hin zum Screenreader?
Beteiligte Komponenten Abbildung von Informationen und Eigenschaften hängt von der Kompatibilität der einzelnen Komponenten ab
Inhalte und Eigenschaften abbilden Korrekte Umsetzung der Standards Anpassung für vers. Browser & AT: Unterstützt man die Browser/AT Kombination, verliert man die Kompatibilität in der anderen Kombination
Korrekte Implementierung in der WebApp Unterstützte Features Abhängig von Programm und Version
Auf Ebene des OS gibt es dann die a11y API Unterstützte Features der Accessability APIs Abhängig von Plattform und Version des OS Aber: Beispiel Screenreader neuerer Version (z.B. NVDA), auch direkt auf Eigenschaften des Browsers zu.
Abhängig vom Typ, Unterstützte Features, Abhängig von Version und Plattform Stichworte: Accessible Tree & Virtual Buffer Kaum Statistiken zur Verbreitung der vers. ATs, geschweige denn zur verwendeten Version
Oben Standards, Unten a11y APIs User Agent Accessibility Guidelines Accessability APIs des OS Microsoft Active Accessability (MSAA) UI Automation (UIA), Weiterentwicklung der MSAA IAccessible2, von IBM, Open-Source, MSAA Erweiterung (IA2) Assistive Technology Service Provider (AT-SPI), Linux Mac OS X Accessibility Protocol (Ax/uiA) Access Bridge, JAVA, OS unabhängig PG Blog
Beispiele für internationale und nationale Richtlinien und Standards Bei Analyse wird schnell klar…
Die meisten nationalen Richtlinien beziehen sich auf die W3C WCAG. Oftmals nur Übersetzung, Einarbeitung lokaler, kultureller Eigenheiten und eine Neubewertung der Erfolgskriterien Umfangreich WCAG (30 Seiten) + Techniques (400 Seiten) + Best Practice (90 Seiten) + Understanding (200 Seiten) + ARIA (90 Seiten)
ISO, BITV, etc. im Praxisalltag kaum zu gebrauchen (selbst die WCAG Techniques bieten nicht immer passende Beispiele / Lösungen) Vorhandene Möglichkeiten müssen adaptiert werden, zum Beispiel die vorhandenen ARIA Attribute Umgesetzte Implementation muss unterstützt werden (Browser/AT Kombinationen oder nach Standard?)
Nachdem wir jetzt viel über Grundlagen und technische Abläufe gehört haben, was bedeutet das im Berufsalltag?
Viele Geräte, Browser, ATs, Betriebssysteme, Versionen Nicht immer anwendbare Standards, komplexe UIs Umfangreiches Know-How, zahlreiche Richtlinien, Erfahrung Erfordert umfangreiches, aufwändiges Testing
Im Projekt selbst scheitert es oft an knappen Fristen und Budget a11y Umzusetzen und zu Testen Fehlende Zeit für ~ 800 Seiten WCAG , Zeit zur Erarbeitung und zum Aufbau von Erfahrung fehlt Wenige Agenturen haben ständig den Kundenwunsch nach a11y Konzept und Design müssen a11y ermöglichen Oft sind andere Dinge wichtiger als explizit Barrierefreiheit Hype: Mobile Devices, Tablets, HTML5, „Eye Candy“ An letztgenanntem können wir wenig ändern, aber die Sachen die aus dem Baukasten kommen… Genau daraus entstand die Idee…
Dem Entwickler für bestimmte Aufgaben Applikationen an die Hand geben die out-of-the-box möglichst barrierefrei sind Und keinen zusätzlichen Aufwand bedeuten
Die Idee: Vereinfachung und Verbesserung der Frontend Practice bei Namics Grundlagen erarbeiten, Fachwissen und Argumentationshilfen sammeln und als Ergebnis eine Art Toolbox bereitstellen
Funktionen zeigen (vers. Validierungen, etc.), Live Validierung, Submit ARIA Eigenschaften im DOM zeigen: required invalid am Feld, live assertive an der Fehlermeldung Grundlegend jQuery UI: Benötigte Dateien, HTML Basis zeigen, Aufruf, Optionen (besonders: Forms Array), Callbacks
Standard Lightbox Applikation
ARIA Live-Regions und ARIA Relationen
Funktionen zeigen: Galerie, Themeswitcher, Galerie mit History Benötigte Dateien, HTML Basis zeigen, Aufruf, Optionen (Abwandlung: http://shop.labbe.de )
Ursprünglich Erweiterung des Standard jQuery Widget
Funktionen: rotating, collapsible, AJAX Methoden: renaming, adding or deleting a tab
Benötigte Dateien, HTML Basis zeigen Mit und ohne Addon : ARIA im Firebug
Finale 1.9er Version einige neue barrierefreie UI Komponenten enthalten, z.B. Selectmenu, Autocomplete, Menu Beta hat a11y (inkl. ARIA) integriert: Tabs, Tooltip Tip: Hans Hillens fork: Accessibility work was implemented by The Paciello Group (TPG) and funded by AOL and AEGIS .