Barrierefreie, Java-Scriptgestützte Webapplikationen  im praxisnahen Umfeld            Felix Nagel       IKT Forum 2012, L...
Zur Person> Dipl. Ing. (FH) Felix Nagel> Webentwickler in Hamburg & Dresden, bei  Paints Multimedia GmbH> Aktiv in der TYP...
Thema und Aufbau
Thema und AufbauEinführung
Thema und AufbauGrundlagen und Problemfelder
Thema und AufbauTheorie und Praxis
Thema und AufbauAusflug in die Praxis:Vorstellung Diplomarbeit
Einführung
EinführungTechnische Entwicklung
Technische Entwicklung>   Geräte und Plattformen
Technische Entwicklung> Geräte und Plattformen> Browserentwicklung
Technische Entwicklung> Geräte und Plattformen> Browserentwicklung> Frameworks & Bibliotheken
EinführungBeispiele
TabsAuch Reiternavigationhttp://bahn.de, Startseite
TabsAuch Reiternavigationhttp://bahn.de, Startseite
TabsAuch Reiternavigationhttp://bahn.de, Startseite
ModalboxModalbox oder auch Lightboxhttp://facebook.com, hier: Einstellung der Privatsphäre eines Status
ModalboxModalbox oder auch Lightboxhttp:// twitter.com , hier: Vorschau auf ein Profil
Interaktiver KalenderIntelligentes Formular zur kollaborativen Terminfindunghttp://www.doodle.com/6gzsvhhxzkh3c69e
Interaktive TabelleIntelligentes Formular zur kollaborativen Terminfindunghttp://www.doodle.com/6gzsvhhxzkh3c69e
AutocompleteAuch Autovervollständigunghttp://bahn.de, Startseite
Audio Player„Social“ Audio Playehttp:// soundcloud.com
Grundlagen
Techniken> AJAX> DOM Manipulation> CSS (Animation)
GrundlagenAJAX
AJAX> Asynchronous JavaScript and XML> Sammelbegriff „Inhalte im Hintergrund laden“> Ergebnis der Anfrage: z.B. XML, HTML,...
AJAX                            HTTP-          Event            Reques                              t                  Jav...
GrundlagenDOM Manipulation
DOM Manipulation> Hinzufügen von HTML> Entfernen von HTML> Änderung von bestehendem HTML
DOM Manipulation                               <html> <head>                              <body><title>    <link>         ...
GrundlagenCSS (Animation)
CSS (Animation)> Änderungen zur Laufzeit> Zeitbasierte Animation    >   Java-Script gestützt oder nativ (CSS3)    >   z. B...
Problemfelder
ProblemfelderSichtbarkeit und Fokus
Auslösendes                                                             ElementBeispiel LightboxBeispielhafte Darstellung ...
Sichtbarkeit und Fokus> Sichtbarkeit im DOM> Reihenfolge im DOM> Fokus und Tabreihenfolge>   Visuell Sichtbarkeit (CSS)
ProblemfelderSemantik
Native Semantik>   Standard Elemente wie z.B.    >   Überschriften, Absätze, Zitate    >   Links, Listen, Tabellen    >   ...
User Interfaces>   „nachgebaute“ Bedienelemente wie z.B.    >   Tabs (Reiternavigation)    >   Progress Bar (Fortschtritts...
Beispiel SliderjQuery UI Slider WidgetRange Slider Demo
Beispiel SliderjQuery UI Slider Widget, DOM im FirebugKeine programmatisch auslesbare Information
ProblemfelderVom Browser zur AT
Vom Browser zur AT                           Betriebs-    AssistiveWebapplikation   Browser                            Sys...
Vom Browser zur AT                           Betriebs-    AssistiveWebapplikation   Browser                            Sys...
Vom Browser zur AT                           Betriebs-    AssistiveWebapplikation   Browser                            Sys...
Vom Browser zur AT                           Betriebs-    AssistiveWebapplikation   Browser                            Sys...
Vom Browser zur AT                           Betriebs-    AssistiveWebapplikation   Browser                            Sys...
Vom Browser zur AT“A brief history of browser accessibility support”Quelle: Steve Faulkner (The Paciello Group), Lizenz: C...
Richtlinien und Standards
Richtlinien und Standards> Umsetzung durch die Entwickler> Fördert Implementation in Software> Kontrollmöglichkeit für Käu...
Richtlinien, Standards und Gesetze                    Swedish       BGStG &      National       E-GovG     Guidelines for ...
Relevanz                                   BITV                                              BGStG                        ...
Grenzen der Anwendbarkeit> Entwurfsmuster / Techniken oft unzureichend> Adaption für bestimmte UIs> Unterstützung der Impl...
Theorie und Praxis
Anforderung> Komplexe Umgebung> Anspruchsvolle Implementierung> Umfangreiche Fachkenntnis> Intensives Testing
Agenturalltag> Knappe Fristen und Finanzen> Zeitaufwendiger Know-How Aufbau>   Fokus nicht auf a11y
Diplomarbeit
Diplomarbeit>   „Barrierefreie, Java-Script gestützte    Webapplikationen im praxisnahen Umfeld“    >   Namics Deutschland...
Aufbau Diplomarbeit                                                   Toolbox zur Erstellung                              ...
Applikationen>   Basierend auf    >   XHTML & CSS    >   jQuery 1.7.2 & jQuery UI 1.8.19> WAI WCAG 2.0 und WAI ARIA konfor...
Applikationen>   Programmiert nach und mit Hilfe    >   jQuery UI API Developer Guide    >   jQuery UI CSS Framework> Stan...
ApplikationenForm Validator
Form Validator>   Für alle Standard Formular Elemente>   Live-Validierung>   AJAX>   Eigene Validierungen möglich>   Captc...
Form Validator> Fehlermeldung WCAG konform> Bedienbar per Tastatur> ARIA:    >   required, invalid, relevant, live, labell...
Form ValidatorHands on code
ApplikationenLightbox
Lightbox> Bildergalerie oder Einzelbild Funktionalität> Gewohnter Funtkionsumfangs> jQuerry Address (browser history and t...
Lightbox>   Bedienbar per Tastatur>   Skalierbar (Text)>   Deaktiviert bei zu kleinem Screen>   Fokus Wiederherstellung>  ...
LightboxHands on code
ApplikationenSortable Table
Sortable Table>   Sortiert Tabellen nach: Zahl, Datum, Text>   Ausblenden von Reihen und Spalten>   Pager-Funktionalität> ...
Sortable Table>   Barrierefreiheit    >   Bedienbar per Tastatur    >   ARIA         >   live, role, labelledby, live, rel...
Sortable TableHands on code
ApplikationenTabs
Tabs> jQuery UI Tabs Widget Addon> Unterstützt alle Optionen, Methoden und  Funktionen> jQuerry Address (browser history a...
Tabs> Bedienbar per Tastatur> Fokus Steuerung> ARIA    >   role, live-regions, controls, labeled-by,        selected, hidd...
TabsHands on code
jQuery UI Tabs>   Addon Version: jQuery 1.4.4 / UI 1.8.7    >   https://github.com/fnagel/jQuery-Accessible-RIA/zipball/jq...
a11y @ jQuery UI>   jQuery UI 1.9    >   Selectmenu Widget    >   Tabs Widget>   Hans Hillen jQuery UI fork    >   https:/...
Fragen? Kommentare? Anregungen?Vielen Dank für IhreAufmerksamkeit
Links>   https://github.com/fnagel/jQuery-Accessible-RIA/    >   Projekt Wiki    >   Letzte Version als zip    >   Bugtrac...
Dieses Werk bzw. Inhalt steht unter einerCreative Commons Namensnennung-Weitergabe untergleichen Bedingungen 3.0 Deutschla...
Credits>   Font: Androgyne, http://www.thebend.be>   “History” Grafik: Steve Faulkner (TPG), http://www.html5accessibility...
Nächste SlideShare
Wird geladen in …5
×

Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld

1.977 Aufrufe

Veröffentlicht am

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/

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.977
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
362
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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
  • 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)
  • jQuery JavaScript Library jQuery User Interface Library
  • Standard jQuery UI Verhalten: Initialisierung, Options setzen, öffentliche Methoden aufrufen (disable, enable, destroy, …), Callbacks
  • Validierung für Formulare
  • 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 )
  • Sortierung in vers. Formaten: de, ISO und US
  • Funktionen zeigen: Sortierung, Pager, Erweiterbarkeit (API) Benötigte Dateien, HTML Basis zeigen, Aufruf, Optionen
  • 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 .
  • Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld

    1. 1. Barrierefreie, Java-Scriptgestützte Webapplikationen im praxisnahen Umfeld Felix Nagel IKT Forum 2012, Linz
    2. 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. 3. Thema und Aufbau
    4. 4. Thema und AufbauEinführung
    5. 5. Thema und AufbauGrundlagen und Problemfelder
    6. 6. Thema und AufbauTheorie und Praxis
    7. 7. Thema und AufbauAusflug in die Praxis:Vorstellung Diplomarbeit
    8. 8. Einführung
    9. 9. EinführungTechnische Entwicklung
    10. 10. Technische Entwicklung> Geräte und Plattformen
    11. 11. Technische Entwicklung> Geräte und Plattformen> Browserentwicklung
    12. 12. Technische Entwicklung> Geräte und Plattformen> Browserentwicklung> Frameworks & Bibliotheken
    13. 13. EinführungBeispiele
    14. 14. TabsAuch Reiternavigationhttp://bahn.de, Startseite
    15. 15. TabsAuch Reiternavigationhttp://bahn.de, Startseite
    16. 16. TabsAuch Reiternavigationhttp://bahn.de, Startseite
    17. 17. ModalboxModalbox oder auch Lightboxhttp://facebook.com, hier: Einstellung der Privatsphäre eines Status
    18. 18. ModalboxModalbox oder auch Lightboxhttp:// twitter.com , hier: Vorschau auf ein Profil
    19. 19. Interaktiver KalenderIntelligentes Formular zur kollaborativen Terminfindunghttp://www.doodle.com/6gzsvhhxzkh3c69e
    20. 20. Interaktive TabelleIntelligentes Formular zur kollaborativen Terminfindunghttp://www.doodle.com/6gzsvhhxzkh3c69e
    21. 21. AutocompleteAuch Autovervollständigunghttp://bahn.de, Startseite
    22. 22. Audio Player„Social“ Audio Playehttp:// soundcloud.com
    23. 23. Grundlagen
    24. 24. Techniken> AJAX> DOM Manipulation> CSS (Animation)
    25. 25. GrundlagenAJAX
    26. 26. AJAX> Asynchronous JavaScript and XML> Sammelbegriff „Inhalte im Hintergrund laden“> Ergebnis der Anfrage: z.B. XML, HTML, JSON
    27. 27. AJAX HTTP- Event Reques t Java-Browser Server Script Java-Browser . Server Script
    28. 28. GrundlagenDOM Manipulation
    29. 29. DOM Manipulation> Hinzufügen von HTML> Entfernen von HTML> Änderung von bestehendem HTML
    30. 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. 31. GrundlagenCSS (Animation)
    32. 32. CSS (Animation)> Änderungen zur Laufzeit> Zeitbasierte Animation > Java-Script gestützt oder nativ (CSS3) > z. B. von Transparenz, Sichtbarkeit, Position, Form, Farbe, …
    33. 33. Problemfelder
    34. 34. ProblemfelderSichtbarkeit und Fokus
    35. 35. Auslösendes ElementBeispiel LightboxBeispielhafte Darstellung einer HTML Struktur in Firebughttp://www.w3.org/TR/WCAG/)
    36. 36. Sichtbarkeit und Fokus> Sichtbarkeit im DOM> Reihenfolge im DOM> Fokus und Tabreihenfolge> Visuell Sichtbarkeit (CSS)
    37. 37. ProblemfelderSemantik
    38. 38. Native Semantik> Standard Elemente wie z.B. > Überschriften, Absätze, Zitate > Links, Listen, Tabellen > Textfelder, Checkboxen, Selectboxen
    39. 39. User Interfaces> „nachgebaute“ Bedienelemente wie z.B. > Tabs (Reiternavigation) > Progress Bar (Fortschtrittsbalken) > Slider (Schieberegler)
    40. 40. Beispiel SliderjQuery UI Slider WidgetRange Slider Demo
    41. 41. Beispiel SliderjQuery UI Slider Widget, DOM im FirebugKeine programmatisch auslesbare Information
    42. 42. ProblemfelderVom Browser zur AT
    43. 43. Vom Browser zur AT Betriebs- AssistiveWebapplikation Browser System Technology
    44. 44. Vom Browser zur AT Betriebs- AssistiveWebapplikation Browser System Technology
    45. 45. Vom Browser zur AT Betriebs- AssistiveWebapplikation Browser System Technology
    46. 46. Vom Browser zur AT Betriebs- AssistiveWebapplikation Browser System Technology
    47. 47. Vom Browser zur AT Betriebs- AssistiveWebapplikation Browser System Technology
    48. 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
    49. 49. Richtlinien und Standards
    50. 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. 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. 52. Relevanz BITV BGStG (DE) & E- EU GovG (AT) BehiG (CH) ISO Section WAI ARIA PAS-78 + 508Standard 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. 53. Grenzen der Anwendbarkeit> Entwurfsmuster / Techniken oft unzureichend> Adaption für bestimmte UIs> Unterstützung der Implementation
    54. 54. Theorie und Praxis
    55. 55. Anforderung> Komplexe Umgebung> Anspruchsvolle Implementierung> Umfangreiche Fachkenntnis> Intensives Testing
    56. 56. Agenturalltag> Knappe Fristen und Finanzen> Zeitaufwendiger Know-How Aufbau> Fokus nicht auf a11y
    57. 57. Diplomarbeit
    58. 58. Diplomarbeit> „Barrierefreie, Java-Script gestützte Webapplikationen im praxisnahen Umfeld“ > Namics Deutschland GmbH > Technische Hochschule Mittelhessen > Veröffentlichung Sommer 2009
    59. 59. Aufbau Diplomarbeit Toolbox zur Erstellung von barrierefreien Technische Internetseiten Richtlinien Technische Grundlagen Erörterung von GründenDefinition derZielgruppen
    60. 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. 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. 62. ApplikationenForm Validator
    63. 63. Form Validator> Für alle Standard Formular Elemente> Live-Validierung> AJAX> Eigene Validierungen möglich> Captcha möglich
    64. 64. Form Validator> Fehlermeldung WCAG konform> Bedienbar per Tastatur> ARIA: > required, invalid, relevant, live, labelledby
    65. 65. Form ValidatorHands on code
    66. 66. ApplikationenLightbox
    67. 67. Lightbox> Bildergalerie oder Einzelbild Funktionalität> Gewohnter Funtkionsumfangs> jQuerry Address (browser history and title support )
    68. 68. Lightbox> Bedienbar per Tastatur> Skalierbar (Text)> Deaktiviert bei zu kleinem Screen> Fokus Wiederherstellung> ARIA > role, live, relevant, busy, describedby, labelledby
    69. 69. LightboxHands on code
    70. 70. ApplikationenSortable Table
    71. 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. 72. Sortable Table> Barrierefreiheit > Bedienbar per Tastatur > ARIA > live, role, labelledby, live, relevant, selected, controls, value… > HTML Tabellen Relationen
    73. 73. Sortable TableHands on code
    74. 74. ApplikationenTabs
    75. 75. Tabs> jQuery UI Tabs Widget Addon> Unterstützt alle Optionen, Methoden und Funktionen> jQuerry Address (browser history and title support )
    76. 76. Tabs> Bedienbar per Tastatur> Fokus Steuerung> ARIA > role, live-regions, controls, labeled-by, selected, hidden, expanded, busy, live, relevant
    77. 77. TabsHands on code
    78. 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. 79. a11y @ jQuery UI> jQuery UI 1.9 > Selectmenu Widget > Tabs Widget> Hans Hillen jQuery UI fork > https://github.com/hanshillen/jqtest
    80. 80. Fragen? Kommentare? Anregungen?Vielen Dank für IhreAufmerksamkeit
    81. 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. 82. Dieses Werk bzw. Inhalt steht unter einerCreative Commons Namensnennung-Weitergabe untergleichen Bedingungen 3.0 Deutschland Lizenz.Namensnennung in folgender Form:Felix Nagel, http://www.felixnagel.com
    83. 83. Credits> Font: Androgyne, http://www.thebend.be> “History” Grafik: Steve Faulkner (TPG), http://www.html5accessibility.com/browser-acc.html

    ×