Barrierefreie, Java-Script gestützte Webapplikationen im … · 08-01-2011 · Barrierefreie,...
83
Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld Felix Nagel IKT Forum 2012, Linz
Barrierefreie, Java-Script gestützte Webapplikationen im … · 08-01-2011 · Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld Felix Nagel IKT Forum
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 In 2 Teile gesplittet
Einführung
Thema und Aufbau
Vorführender
Präsentationsnotizen
Einige warme Worte zur technische Entwicklung Ein paar Beispiele für moderne Webentwicklung
Grundlagen und Problemfelder
Thema und Aufbau
Vorführender
Präsentationsnotizen
Wie funktionieren moderne JS gestützte Techniken? Wo liegen die Probleme in Verbindung mit a11y?
Theorie und Praxis
Thema und Aufbau
Vorführender
Präsentationsnotizen
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
Ausflug in die Praxis:
Vorstellung Diplomarbeit
Thema und Aufbau
Vorführender
Präsentationsnotizen
2. Teil: Wie von Herrn Nussbaum gebeten… Kurz: Entstehung & Aufbau Hands on code: Lightbox, Table, Tabs, Form
Einführung
Vorführender
Präsentationsnotizen
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
Technische Entwicklung
Einführung
Vorführender
Präsentationsnotizen
Möglich wurden diese immer komplexeren Webanwendungen vor allem durch die techn. Entwicklung Abgesehen von der reinen Serverleistung und Bandbreite
Technische Entwicklung
> Geräte und Plattformen
Vorführender
Präsentationsnotizen
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
Technische Entwicklung
> Geräte und Plattformen > Browserentwicklung
Vorführender
Präsentationsnotizen
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
Technische Entwicklung
> Geräte und Plattformen > Browserentwicklung > Frameworks & Bibliotheken
Vorführender
Präsentationsnotizen
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
Beispiele
Einführung
Vorführender
Präsentationsnotizen
Zu welcher Art von Webapplikationen uns diese Entwicklung geführt hat zeige ich im folgenden exemplarisch an einigen Screenshots
Tabs
Auch Reiternavigation http://bahn.de, Startseite
Tabs
Auch Reiternavigation http://bahn.de, Startseite
Tabs
Auch Reiternavigation http://bahn.de, Startseite
Modalbox
Modalbox oder auch Lightbox http://facebook.com, hier: Einstellung der Privatsphäre eines Status
Vorführender
Präsentationsnotizen
Eine weitere Möglichkeit Informationen erst auf Verlangen zu präsentieren sind die Modalboxen Im Prinzip Pop-Ups innerhalb der Seite
Modalbox
Modalbox oder auch Lightbox http:// twitter.com , hier: Vorschau auf ein Profil
Interaktiver Kalender
Intelligentes Formular zur kollaborativen Terminfindung http://www.doodle.com/6gzsvhhxzkh3c69e
Vorführender
Präsentationsnotizen
Benutzereingabe / Benutzerschnittstellen
Interaktive Tabelle
Intelligentes Formular zur kollaborativen Terminfindung http://www.doodle.com/6gzsvhhxzkh3c69e
Autocomplete
Auch Autovervollständigung http://bahn.de, Startseite
Audio Player
„Social“ Audio Playe http:// soundcloud.com
Vorführender
Präsentationsnotizen
Beispiel aus dem Bereich Multimedia
Grundlagen
Vorführender
Präsentationsnotizen
Einige grundlegende Techniken der eben gesehenen Anwendungen stelle ich jetzt vor
Techniken
> AJAX > DOM Manipulation > CSS (Animation)
Vorführender
Präsentationsnotizen
Zeigen werde ich Ihnen folgende Techniken erläutern Anfangen werde wir mit AJAX
AJAX
Grundlagen
AJAX
> Asynchronous JavaScript and XML > Sammelbegriff „Inhalte im Hintergrund laden“ > Ergebnis der Anfrage: z.B. XML, HTML, JSON
Vorführender
Präsentationsnotizen
AJAX beschreibt _nur_ den eigentlichen Datenaustausch
AJAX
Browser Java-Script Server
Browser . Java-Script Server
Event HTTP-Request
Vorführender
Präsentationsnotizen
Benutzeroberfläche, Event, Engine, HTTP Verkehr, Webserver Was machen wir mit den so erhaltenen Daten?
DOM Manipulation
Grundlagen
DOM Manipulation
> Hinzufügen von HTML > Entfernen von HTML > Änderung von bestehendem HTML
DOM Manipulation
<html>
<head>
<title> <meta>
<link> <script>
<body>
<div id=head>
<h1> <ul>
<div id=content>
<p> <a> <img>
<div id=foot>
<p>
Vorführender
Präsentationsnotizen
Schematischer Aufbau eines HTML DOM. Alle Elemente können verändert, entfernt oder hinzugefügt werden.
CSS (Animation)
Grundlagen
CSS (Animation)
> Änderungen zur Laufzeit > Zeitbasierte Animation
> Java-Script gestützt oder nativ (CSS3) > z. B. von Transparenz, Sichtbarkeit, Position,
Form, Farbe, …
Vorführender
Präsentationsnotizen
Stufenlose, dynamische Anpassung der CSS Werte bzw. Nutzung vorhandener CSS Animationen (CSS3)
Problemfelder
Vorführender
Präsentationsnotizen
Die Grundlagen sind vorhanden, weiter zu den daraus entstehenden Problemen
Sichtbarkeit und Fokus
Problemfelder
Vorführender
Präsentationsnotizen
Am Beispiel der Lightbox
Beispiel Lightbox
Beispielhafte Darstellung einer HTML Struktur in Firebug http://www.w3.org/TR/WCAG/)
Auslösendes Element
Vorführender
Präsentationsnotizen
Event, AJAX, DOM Manip, CSS Ani Vers. Problematiken für zB Nutzer eines Screenreaders
Sichtbarkeit und Fokus
> Sichtbarkeit im DOM > Reihenfolge im DOM > Fokus und Tabreihenfolge > Visuell Sichtbarkeit (CSS)
Vorführender
Präsentationsnotizen
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)
Semantik
Problemfelder
Vorführender
Präsentationsnotizen
Komplexe UIs lassen sich nicht ohne weiteres abbilden
Native Semantik
> Standard Elemente wie z.B. > Überschriften, Absätze, Zitate > Links, Listen, Tabellen > Textfelder, Checkboxen, Selectboxen
Vorführender
Präsentationsnotizen
Native Elemente mit Semantik
User Interfaces
> „nachgebaute“ Bedienelemente wie z.B. > Tabs (Reiternavigation) > Progress Bar (Fortschtrittsbalken) > Slider (Schieberegler)
Vorführender
Präsentationsnotizen
Die Nutzung, der Zweck eines UIs muss AT verständlich kommuniziert werden
Beispiel Slider
jQuery UI Slider Widget Range Slider Demo
Beispiel Slider
jQuery UI Slider Widget, DOM im Firebug Keine programmatisch auslesbare Information
Vorführender
Präsentationsnotizen
Überleitung: Semantik führt uns zu dem übergreifenden Problem…
Vom Browser zur AT
Problemfelder
Vorführender
Präsentationsnotizen
Wie funktioniert eigentlich die Kommunikation von Browser bis hin zum Screenreader?
Vom Browser zur AT
Webapplikation Browser Betriebs-System
Assistive Technology
Vorführender
Präsentationsnotizen
Beteiligte Komponenten Abbildung von Informationen und Eigenschaften hängt von der Kompatibilität der einzelnen Komponenten ab
Vom Browser zur AT
Webapplikation Browser Betriebs-System
Assistive Technology
Vorführender
Präsentationsnotizen
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
Vom Browser zur AT
Webapplikation Browser Betriebs-System
Assistive Technology
Vorführender
Präsentationsnotizen
Korrekte Implementierung in der WebApp Unterstützte Features Abhängig von Programm und Version
Vom Browser zur AT
Webapplikation Browser Betriebs-System
Assistive Technology
Vorführender
Präsentationsnotizen
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.
Vom Browser zur AT
Webapplikation Browser Betriebs-System
Assistive Technology
Vorführender
Präsentationsnotizen
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
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
Vorführender
Präsentationsnotizen
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
Richtlinien und Standards
Richtlinien und Standards
> Umsetzung durch die Entwickler > Fördert Implementation in Software
> Kontrollmöglichkeit für Käufer > Arbeiten und Verkaufen im Ausland
Richtlinien, Standards und Gesetze
WCAG
WAI ARIA BITV (DE)
BGStG & E-GovG
(AT)
ISO
PAS-78 + BS8878
(UK)
Web Guidelines
(NL)
Swedish National
Guidelines for Public Sector
Websites
BehiG (CH)
JIS (JP)
Common Look and Feel
Standards for the Internet
(CA)
Section 508 (USA)
Vorführender
Präsentationsnotizen
Beispiele für internationale und nationale Richtlinien und Standards Bei Analyse wird schnell klar…
WAI ARIA WCAG
BITV (DE) BGStG
& E-GovG (AT)
ISO
PAS-78 + BS8878
(UK)
Web Guidelines (NL)
Swedish National
Guidelines for Public Sector
Websites EuropäisceUnion
JIS (JP)
Common Look and Feel
Standards for the Internet
(CA)
Section 508
Standards (USA)
BehiG (CH)
EU
Relevanz
Vorführender
Präsentationsnotizen
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)
Grenzen der Anwendbarkeit
> Entwurfsmuster / Techniken oft unzureichend > Adaption für bestimmte UIs > Unterstützung der Implementation
Vorführender
Präsentationsnotizen
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?)
Theorie und Praxis
Vorführender
Präsentationsnotizen
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
Agenturalltag
> Knappe Fristen und Finanzen > Zeitaufwendiger Know-How Aufbau
> Fokus nicht auf a11y
Vorführender
Präsentationsnotizen
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…
Diplomarbeit
Vorführender
Präsentationsnotizen
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
Diplomarbeit
> „Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld“ > Namics Deutschland GmbH > Technische Hochschule Mittelhessen > Veröffentlichung Sommer 2009
Vorführender
Präsentationsnotizen
Die Idee: Vereinfachung und Verbesserung der Frontend Practice bei Namics Grundlagen erarbeiten, Fachwissen und Argumentationshilfen sammeln und als Ergebnis eine Art Toolbox bereitstellen
Aufbau Diplomarbeit
Definition der Zielgruppen
Erörterung von Gründen
Technische Grundlagen
Technische Richtlinien
Toolbox zur Erstellung von barrierefreien Internetseiten
> Für alle Standard Formular Elemente > Live-Validierung > AJAX > Eigene Validierungen möglich > Captcha möglich
Form Validator
> Fehlermeldung WCAG konform > Bedienbar per Tastatur > ARIA:
> required, invalid, relevant, live, labelledby
Hands on code
Form Validator
Vorführender
Präsentationsnotizen
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
Lightbox
Applikationen
Vorführender
Präsentationsnotizen
Standard Lightbox Applikation
Lightbox
> Bildergalerie oder Einzelbild Funktionalität > Gewohnter Funtkionsumfangs > jQuerry Address (browser history and title
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.
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
