Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld
- 1. Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld Felix Nagel IKT Forum 2012, Linz
- 2. Zur Person > Dipl.Ing. (FH) Felix Nagel > Webentwickler in Hamburg & Dresden, bei Paints Multimedia GmbH > Aktiv in der TYPO3 Community & bei jQuery UI
- 3.
- 4.
- 5. Thema und Aufbau Grundlagenund Problemfelder
- 6. Thema und Aufbau Theorieund Praxis
- 7. Thema und Aufbau Ausflugin die Praxis: Vorstellung Diplomarbeit
- 8.
- 9.
- 10. Technische Entwicklung > Geräte und Plattformen
- 11. Technische Entwicklung > Geräteund Plattformen > Browserentwicklung
- 12. Technische Entwicklung > Geräteund Plattformen > Browserentwicklung > Frameworks & Bibliotheken
- 13.
- 14.
- 15.
- 16.
- 17. Modalbox Modalbox oder auchLightbox http://facebook.com, hier: Einstellung der Privatsphäre eines Status
- 18. Modalbox Modalbox oder auchLightbox http:// twitter.com , hier: Vorschau auf ein Profil
- 19. Interaktiver Kalender Intelligentes Formularzur kollaborativen Terminfindung http://www.doodle.com/6gzsvhhxzkh3c69e
- 20. Interaktive Tabelle Intelligentes Formularzur kollaborativen Terminfindung http://www.doodle.com/6gzsvhhxzkh3c69e
- 21.
- 22. Audio Player „Social“ AudioPlaye http:// soundcloud.com
- 23.
- 24. Techniken > AJAX > DOMManipulation > CSS (Animation)
- 25.
- 26. AJAX > Asynchronous JavaScriptand XML > Sammelbegriff „Inhalte im Hintergrund laden“ > Ergebnis der Anfrage: z.B. XML, HTML, JSON
- 27. AJAX HTTP- Event Reques t Java- Browser Server Script Java- Browser . Server Script
- 28.
- 29. DOM Manipulation > Hinzufügenvon HTML > Entfernen von HTML > Änderung von bestehendem HTML
- 30. DOM Manipulation <html> <head> <body> <title> <link> <div <div id=head> <div id=content> <meta> <script> id=foot> <h1> <ul> <p> <a> <img> <p>
- 31.
- 32. CSS (Animation) > Änderungenzur Laufzeit > Zeitbasierte Animation > Java-Script gestützt oder nativ (CSS3) > z. B. von Transparenz, Sichtbarkeit, Position, Form, Farbe, …
- 33.
- 34.
- 35. Auslösendes Element Beispiel Lightbox Beispielhafte Darstellung einer HTML Struktur in Firebug http://www.w3.org/TR/WCAG/)
- 36. Sichtbarkeit und Fokus >Sichtbarkeit im DOM > Reihenfolge im DOM > Fokus und Tabreihenfolge > Visuell Sichtbarkeit (CSS)
- 37.
- 38. Native Semantik > Standard Elemente wie z.B. > Überschriften, Absätze, Zitate > Links, Listen, Tabellen > Textfelder, Checkboxen, Selectboxen
- 39. User Interfaces > „nachgebaute“ Bedienelemente wie z.B. > Tabs (Reiternavigation) > Progress Bar (Fortschtrittsbalken) > Slider (Schieberegler)
- 40. Beispiel Slider jQuery UISlider Widget Range Slider Demo
- 41. Beispiel Slider jQuery UISlider Widget, DOM im Firebug Keine programmatisch auslesbare Information
- 42.
- 43. Vom Browser zurAT Betriebs- Assistive Webapplikation Browser System Technology
- 44. Vom Browser zurAT Betriebs- Assistive Webapplikation Browser System Technology
- 45. Vom Browser zurAT Betriebs- Assistive Webapplikation Browser System Technology
- 46. Vom Browser zurAT Betriebs- Assistive Webapplikation Browser System Technology
- 47. Vom Browser zurAT Betriebs- Assistive Webapplikation Browser System Technology
- 48. Vom Browser zurAT “A brief history of browser accessibility support” Quelle: Steve Faulkner (The Paciello Group), Lizenz: CC-BY-SA, http://www.html5accessibility.com/browser-acc.html
- 49.
- 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 undGesetze 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
- 54.
- 55. Anforderung > Komplexe Umgebung >Anspruchsvolle Implementierung > Umfangreiche Fachkenntnis > Intensives Testing
- 56. Agenturalltag > Knappe Fristenund Finanzen > Zeitaufwendiger Know-How Aufbau > Fokus nicht auf a11y
- 57.
- 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
- 60. Applikationen > Basierend auf > XHTML & CSS > jQuery 1.7.2 & jQuery UI 1.8.19 > WAI WCAG 2.0 und WAI ARIA konform > Kompatibel mit IE, FF, Chrome, Safari
- 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
- 62.
- 63. Form Validator > Für alle Standard Formular Elemente > Live-Validierung > AJAX > Eigene Validierungen möglich > Captcha möglich
- 64. Form Validator > FehlermeldungWCAG konform > Bedienbar per Tastatur > ARIA: > required, invalid, relevant, live, labelledby
- 65.
- 66.
- 67. Lightbox > Bildergalerie oderEinzelbild Funktionalität > Gewohnter Funtkionsumfangs > jQuerry Address (browser history and title support )
- 68. Lightbox > Bedienbar per Tastatur > Skalierbar (Text) > Deaktiviert bei zu kleinem Screen > Fokus Wiederherstellung > ARIA > role, live, relevant, busy, describedby, labelledby
- 69.
- 70.
- 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 )
- 72. Sortable Table > Barrierefreiheit > Bedienbar per Tastatur > ARIA > live, role, labelledby, live, relevant, selected, controls, value… > HTML Tabellen Relationen
- 73.
- 74.
- 75. Tabs > jQuery UITabs Widget Addon > Unterstützt alle Optionen, Methoden und Funktionen > jQuerry Address (browser history and title support )
- 76. Tabs > Bedienbar perTastatur > Fokus Steuerung > ARIA > role, live-regions, controls, labeled-by, selected, hidden, expanded, busy, live, relevant
- 77.
- 78. jQuery UI Tabs > Addon Version: jQuery 1.4.4 / UI 1.8.7 > https://github.com/fnagel/jQuery-Accessible-RIA/zipball/jquery1.4.4_ui1.8.7 > Standalone Version: jQuery 1.4.4 / UI 1.8.11 > https://github.com/fnagel/jquery-ui/tree/tabs-accessibility
- 79. a11y @ jQueryUI > jQuery UI 1.9 > Selectmenu Widget > Tabs Widget > Hans Hillen jQuery UI fork > https://github.com/hanshillen/jqtest
- 80. Fragen? Kommentare? Anregungen? VielenDank für Ihre Aufmerksamkeit
- 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
- 83. Credits > Font: Androgyne, http://www.thebend.be > “History” Grafik: Steve Faulkner (TPG), http://www.html5accessibility.com/browser-acc.html
Hinweis der Redaktion
- #3 Erfahrung weitergeben, spannendes Feedback und konstruktive Diskussionen
- #4 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
- #5 Einige warme Worte zur technische Entwicklung Ein paar Beispiele für moderne Webentwicklung
- #6 Wie funktionieren moderne JS gestützte Techniken? Wo liegen die Probleme in Verbindung mit a11y?
- #7 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
- #8 2. Teil: Wie von Herrn Nussbaum gebeten… Kurz: Entstehung & Aufbau Hands on code: Lightbox, Table, Tabs, Form
- #9 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
- #10 Möglich wurden diese immer komplexeren Webanwendungen vor allem durch die techn. Entwicklung Abgesehen von der reinen Serverleistung und Bandbreite
- #11 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
- #12 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
- #13 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
- #14 Zu welcher Art von Webapplikationen uns diese Entwicklung geführt hat zeige ich im folgenden exemplarisch an einigen Screenshots
- #18 Eine weitere Möglichkeit Informationen erst auf Verlangen zu präsentieren sind die Modalboxen Im Prinzip Pop-Ups innerhalb der Seite
- #20 Benutzereingabe / Benutzerschnittstellen
- #23 Beispiel aus dem Bereich Multimedia
- #24 Einige grundlegende Techniken der eben gesehenen Anwendungen stelle ich jetzt vor
- #25 Zeigen werde ich Ihnen folgende Techniken erläutern Anfangen werde wir mit AJAX
- #27 AJAX beschreibt _nur_ den eigentlichen Datenaustausch
- #28 Benutzeroberfläche, Event, Engine, HTTP Verkehr, Webserver Was machen wir mit den so erhaltenen Daten?
- #31 Schematischer Aufbau eines HTML DOM. Alle Elemente können verändert, entfernt oder hinzugefügt werden.
- #33 Stufenlose, dynamische Anpassung der CSS Werte bzw. Nutzung vorhandener CSS Animationen (CSS3)
- #34 Die Grundlagen sind vorhanden, weiter zu den daraus entstehenden Problemen
- #35 Am Beispiel der Lightbox
- #36 Event, AJAX, DOM Manip, CSS Ani Vers. Problematiken für zB Nutzer eines Screenreaders
- #37 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)
- #38 Komplexe UIs lassen sich nicht ohne weiteres abbilden
- #39 Native Elemente mit Semantik
- #40 Die Nutzung, der Zweck eines UIs muss AT verständlich kommuniziert werden
- #42 Überleitung: Semantik führt uns zu dem übergreifenden Problem…
- #43 Wie funktioniert eigentlich die Kommunikation von Browser bis hin zum Screenreader?
- #44 Beteiligte Komponenten Abbildung von Informationen und Eigenschaften hängt von der Kompatibilität der einzelnen Komponenten ab
- #45 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
- #46 Korrekte Implementierung in der WebApp Unterstützte Features Abhängig von Programm und Version
- #47 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.
- #48 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
- #49 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
- #52 Beispiele für internationale und nationale Richtlinien und Standards Bei Analyse wird schnell klar…
- #53 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)
- #54 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?)
- #55 Nachdem wir jetzt viel über Grundlagen und technische Abläufe gehört haben, was bedeutet das im Berufsalltag?
- #56 Viele Geräte, Browser, ATs, Betriebssysteme, Versionen Nicht immer anwendbare Standards, komplexe UIs Umfangreiches Know-How, zahlreiche Richtlinien, Erfahrung Erfordert umfangreiches, aufwändiges Testing
- #57 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…
- #58 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
- #59 Die Idee: Vereinfachung und Verbesserung der Frontend Practice bei Namics Grundlagen erarbeiten, Fachwissen und Argumentationshilfen sammeln und als Ergebnis eine Art Toolbox bereitstellen
- #60 Definition der Zielgruppen (Sensorisch, Motorisch, Mental) Erörterung von Gründen (Geschäftlich, Gesetzlich, Ethisch, Technisch) Technische Grundlagen (AT, jQuery, Schnittstellen, etc.) Technische Richtlinien (BITV, ISO, WCAG, ARIA) Toolbox (die eigentlichen Applikationen)
- #61 jQuery JavaScript Library jQuery User Interface Library
- #62 Standard jQuery UI Verhalten: Initialisierung, Options setzen, öffentliche Methoden aufrufen (disable, enable, destroy, …), Callbacks
- #63 Validierung für Formulare
- #66 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
- #67 Standard Lightbox Applikation
- #69 ARIA Live-Regions und ARIA Relationen
- #70 Funktionen zeigen: Galerie, Themeswitcher, Galerie mit History Benötigte Dateien, HTML Basis zeigen, Aufruf, Optionen (Abwandlung: http://shop.labbe.de )
- #72 Sortierung in vers. Formaten: de, ISO und US
- #74 Funktionen zeigen: Sortierung, Pager, Erweiterbarkeit (API) Benötigte Dateien, HTML Basis zeigen, Aufruf, Optionen
- #75 Ursprünglich Erweiterung des Standard jQuery Widget
- #76 Funktionen: rotating, collapsible, AJAX Methoden: renaming, adding or deleting a tab
- #78 Benötigte Dateien, HTML Basis zeigen Mit und ohne Addon : ARIA im Firebug
- #80 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 .