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

2.135 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
  • Als Erste(r) kommentieren

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

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

×