Diplomarbeit

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

 

Mein Berufspraktisches Semester und Diplomarbeit habe ich bei der Full Service Internetagentur Namics am Standort Hamburg absolviert.

 

Mein Thema war die Entwicklung von einigen Applikationen zur barrierefreien Erstellung von Internetseiten. Diese Frontend Widgets wurden auf Basis von HTML, CSS und Java-Script entwickelt und sind unter einer Creative Commons Lizenz veröffentlicht. Sie können somit kostenlos eingesetz werden, auch kommerziell.

 

Die Diplomarbeit sowie die dazugehörigen Widgets sind unter Creative Commons Attribution-Share Alike 3.0 Unported Lizenz veröffentlicht und über GitHub, einem Portal zur gemeinschaftlichen Entwicklung auf Basis von Git (einer Art SVN), zu beziehen. Dort finden sich auch Demos der Applikationen, das Wiki und ein Bugtracking System. Alternativ kann die ganze PDF bei Google Docs online eingesehen werden.

 

Wende deinen Blick zur rechten oberen Seite, dort findest du Demos und den Link zur Projektseite.

  • WAI WCAG 2.0 and WAI ARIA konform
  • Eingebauter Workaround für ältere Screenreader *
  • Komplett durchkommentierter Code (Englisch)
  • Tutorial (Englisch)
  • Detaillierte Beschreibung udn Anleitung (Deutsch)
  • Minifizierte Version
  • Arbeitet out-of-the-box
  • Einfach zu erweitern

 

* Formular Änderung  Workaround von Gez Lemon um eine Aktualisierung des Virtuellen Buffers zu erzwingen.

 

Kompatibel und getestet mit

  • Firefox 2+
  • Internet Explorer 6+
  • Safari 3

 

Entwickelt in Übereinstimmung und mit Hilfe von

 

Basiert auf

  • valid XHTML 1.1 Strict
  • valid CSS 2.0
  • jQuery 1.3.2
  • jQuery UI 1.7.1

Anfang Januar 2010 wurde die Lizenz von CC-SA-BY geändert um Kompatibilität mit jQuery zu gewährleisten. Die Widgets sind jetzt unter MIT Lizenz veröffentlicht.

 

Die schriftliche Diplomarbeit steht nach wie vor unter Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz veröffentlicht.

 

Beide Lizenzen ermöglichen eine kommerzielle Verwendung.

Vorab erfolgte eine Definition der Zielgruppen und die Erörterung von Gründen für die Erstellung von barrierearmen bzw. barrierefreien Webseiten und deren Applikationen. Dies schließt eine Abwägung der geschäftlichen sowie ethischen Aspekte — anhand von Statistiken und Gesetzen bzw. Richtlinien — und technische Aspekte, zum Beispiel SEO und mobiles Internet ein.

Es wurden folgende Richtlinien untersucht:

 

  • ISO 9241-151 (Leitlinien zur Gestaltung von Benutzerschnittstellen für das World Wide Web)
  • ISO 9241-171 (Leitlinien für die Zugänglichkeit von Software)
  • BITV
  • WCAG 2.0

 

Dem schließt sich die Analyse der von den jeweiligen Zielgruppen verwendeten Hilfsmittel (AT) und der technischen Spezifikationen und Richtlinien an. Daraus ergeben sich mögliche Best-Practice, die für die praktische Umsetzung mit technischen Restriktionen verglichen wurden. Hierbei gehe ich speziell auf die verschiedenen Browserkompatibilität von Screenreadern ein.

Dem theoretischen Teil folgt die Beschreibung der praktischen Umsetzung, aus der eine Art Tool-Box entwickelt werden soll.Die einzelnen umzusetzenden Design Pattern und deren Probleme werden erörtert. Diese werden dann mit den Richtlinien und Spezifikationen verglichen und Lösungsmöglichkeiten werden erarbeitet.

 

Umgesetzt werden die Widgets in validem XHTML 1.1 Strict , validem CSS 2.0 sowie dem von Namics zumeist verwendeten Java-Script Framework JQuery 1.3.x umgesetzt werden. Die Arbeit entspricht den WCAG 2.0 Richtlinien des W3C.

 

Die Standard-Applikationen Formular (bzw. dessen Live-Validierung), Lightbox, sortierbare Table und Tabs wurden umgesetzt werden (Demo siehe rechts oben).

 

Am Ende steht ein Paket aus einfachen Muster-Templates zur Verwendung beim Entwickeln von Webseiten stehen, bestehend aus HTML und CSS sowie Java-Script-Klassen und Code-Elementen, die entsprechend angepasst werden können, um die jeweiligen Projekt-Spezifikationen zu erfüllen. Die Arbeit wurde für den internationalen Einsatz konzipiert, mit speziellem Augenmerk auf den deutschen Markt.

 

Es existiert eine ausführliche Dokumentation der Funktionsweise und Möglichkeiten der Erweiterung.

This is a short summery, please refer to the Wiki pages hosted on GitHub.

“Accessible, Java-Script based web applications in the field”

I wrote my Master Thesis at University of Applied Sciences Giessen-Friedberg with help from Namics, a full service web agency in Germany and Switzerland. As the thesis is in German Language there is no more English information available, but feel free to check out the result:

 

jQuery Accessible RIA, a collection of strictly WAI WCAG 2.0 and WAI ARIA conform web applications based on the popular Java-Script framework jQuery (using the UI Widget Factory).
They are developed to extend the frontend development best practice at Namics, a full service web agency in Germany and Switzerland. My goal was to provide some accessible, usable and easy to implement widgets to improve quality and working speed in frontend developers’ daily routine. So I picked some of the most seen design patterns on the web: currently a lightbox app, live form-validation, accessible tabs and sortable tables are ready to use.

Autor: Felix NagelSeite erstellt am: 05.10.09Zuletzt geändert am: 29.01.10