Implementierung
Festlegung Diskursbereich
Der umzusetzende Diskursbereich ist die „erweiterte Suche“ in OpenInfRA. Sie soll dem Nutzer die Möglichkeit geben, einen oder mehrere Suchbegriffe einzugeben, miteinander zu kombinieren und verschiedene Filter (erweiterte Suchoptionen, Quellenauswahl, Suche nach Zeit, Einschränkung der Trefferliste) anzuwenden.
Vorteil dieses Diskursbereiches ist zum einen, dass sich die geforderten BITV 2.0-Bedingungen zum Großteil prüfen lassen. Das betrifft insbesondere die Bedingungen, die zum einen für ganz OpenInfRA relevant sind (wie bspw. Strukturierung, Semantik, valide Daten, sensorische Merkmale/Kontrast, sichtbarer Fokus) sowie Bedingungen, die ausdrücklich an Formulare gestellt werden (Fehleridentifizierung, -vermeidung). Zum anderen ist die Berücksichtigung von Kontextänderungen wichtig, die sich durch eine Aktivität des Nutzers auslösen lassen. In der „erweiterten Suche“ sind solche Änderungen vorgesehen (bspw. Kombination verschiedener Suchbegriffe durch logische Operatoren; Hinzuladen neuer Eingabefelder).
Ein weiterer Vorteil ist die Übertragbarkeit auf andere Bereiche in OpenInfRA: Formularelemente werden u.a. im Admin-Client, in vielen Dialogen (Konfiguration, Suchen/Ersetzen, Datenzuordnung usw.), in anderen Suchtypen (Experten- und einfache Suche), Filterfunktionen oder auch innerhalb des Bearbeitungsmodus von Themeninstanzen verwendet (sog. input-Elemente).
Die Umsetzung wird für die Prioritätsstufe II durchgeführt.
Planung der Umsetzung
Für die Umsetzung des Diskursbereiches wird auf die Verwendung von WYSIWYG-Editoren bzw. HTML5-Editoren verzichtet. Begründet wird das durch zwei wesentliche Aspekte: zum einen unterliegt HTML5 aktuell kontinuierlichen Veränderungen, so dass der aktuelle Stand nicht in der Software implementiert sein muss und zum anderen darf die Kontrolle über die Strukturierung des Codes nicht aus der Hand gegeben werden. WYSIWYG-Editoren neigen dazu zusätzlichen Code zu generieren, der überflüssig ist und u.U. eine negative Auswirkung auf die Interpretation durch assistive Technologien zur Folge hat. Außerdem benötigt die Handhabung von WYSIWYG-Editoren nicht nur Kenntnisse in der Benutzerführung der jeweiligen Software, sondern ist ggf. sehr zeitaufwändig, um bestimmte Effekte zu erzielen, was sich durch Codekenntnisse einfacher und schneller realisieren lässt.
Für die Umsetzung wird demzufolge der frei verfügbare Code-Editor Notepad++ in der Version 6.2.2 verwendet.
Um den geforderten Kontrastverhältnis gerecht zu werden, werden die folgenden Farbkombinationen verwendet:
Technische Umsetzung
Um der Forderung nachzukommen, dass Inhalt und Präsentation getrennt behandelt werden müssen, wird zuerst der HTML5-Code umgesetzt. Der strukturelle Aufbau kann der nachfolgenden Abbildung entnommen werden.
HTML5 bietet nicht nur alle nötigen Formularelemente an, sondern auch die Möglichkeiten wie:
- Fehleridentifizierung (client-seitig),
- einfachste Funktionalitäten wie Checkbox/Radiobutton aktivieren/deaktivieren,
- Ein- oder Mehrfachauswahl in Auswahllisten,
- Datumsauswahl,
- Prozessfortschrittsanzeige und
- das Zurücksetzen und Abschicken des Formulars.
Umfangreichere Funktionalitäten, wie bspw. dynamisches Hinzuschalten neuer Eingabefelder oder die Aktivierung aller Checkboxen kann nicht über HTML5 realisiert werden. Hierfür wird die frei verfügbare, umfangreiche und leicht verständliche JavaScript-Bibliothek jQuery in der Version 1.8.2. verwendet. Diese alternative Technologie ist nötig, um auch die für diese Funktionalitäten vorgesehenen Bedingungen für die Prüfung verwenden zu können.
Die gestalterische Umsetzung wird mittels CSS 2.1 und CSS3 vorgenommen. CSS 2.1 ist bereits als Recommendation ausgerufen worden. CSS3, welches in Abgrenzung zu seinen Vorgängern modular aufgebaut ist, besitzt bereits einige empfohlene Module. Darunter das Selectors-Modul, welches für die Behandlung der Benutzeroberfläche notwendig ist und zudem auch Negationen als neue Pseudoklasse beinhaltet. Wichtig ist, dass nur CSS-Spezifikationen verwendet werden, die bereits empfohlen worden sind, um eine breite Unterstützung der verschiedenen Browser zu gewährleisten.
Mittels CSS ist es möglich, den sichtbaren Fokus (Maus- und Tastaturfokus) innerhalb des Formulars zu definieren. Hier kann der Nutzer jederzeit die aktuelle Position im Formular erkennen. Die Grenzen von CSS werden erreicht, wenn die Hervorhebung der ausgewählten Option innerhalb einer Auswahlliste (select-Element) beeinflusst werden soll. Die Art der Markierung ist abhängig von Betriebssystem und lässt sich demzufolge nicht beeinflussen. Es existieren verschiedene Plug-Ins für jQuery, die dieses Element in ein Listenelement mit Aufzählungen umwandelt und das Aussehen analog einer „echten“ Auswahlliste gestalten. Problematisch wird es, wenn CSS deaktiviert wird, dann kommt auch die eigentliche Listenansicht zum Vorschein. Da diese Lösung mehr Barrieren auf- als abbaut, sollte darauf verzichtet werden.
Das Ergebnis der „erweiterten Suche“ kann in den nachfolgenden Abbildungen betrachtet werden:
Test der Anwendung
Alle erstellten Dokumente sind erfolgreich auf Gültigkeit getestet worden. Genutzt wurde hierfür der W3C Validator Service.
Das Testverfahren des BIK BITV-Tests zur Überprüfung der Zugänglichkeit in der Prioritätsstufe I ist mit einer erreichten Punktzahl von 99 von 100 Punkten erfolgreich gewesen und als sehr gut zugänglich bewertet worden. 100% wurden nicht erreicht, weil zwar alle nötigen Kontextänderungen klar verständlich und sinnvoll sind, aber bei der Entfernung von Bedingungen über den Entfernen-Button (der mit entfernt wird) der Fokus gewechselt wird. In wieweit das kritisch zu bewerten ist, ist im Zuge der BITV-Selbstbewertung ein subjektives Empfinden. Ebenfalls Abzug gab es bei der Bedingung „ohne Bezug auf sensorische Merkmale nutzbar“, weil kein Einfluss auf die Hervorhebung einer Selektion innerhalb einer Auswahlliste (select-Element) genommen werden konnte. Die teilweise kommentierten Ergebnisse können online über:
- http://testen.bitvtest.de/selbstbewertung/
- Fragebogennummer: 1131
- Passwort: OIRAerwSuche
abgerufen werden.
Zusätzlich wurde eine Abfrage analog des BIK BITV-Tests zur Überprüfung der Prioritätsstufe II angefertigt. Hier sind alle vorhandenen Prüfschritte erfolgreich absolviert worden.
Sowohl die Konformitätsprüfung als auch das Web Accessibility Evaluation Tool (WAVE) wurden kontinuierlich zur Überprüfung bei der Erstellung des Projektes eingesetzt, um Fehler schnell zu identifizieren und beheben zu können. Das betrifft auch die Darstellung der Struktur, das Deaktivieren von CSS und die reine Textdarstellung der Inhalte, bei dem die strukturelle und inhaltliche Korrektheit überprüft wurde. Im abschließenden Test kann festgehalten werden, dass der WAVE-Accessibility-Test erfolgreich verlief.
Darüber hinaus wurde das Projekt in folgenden Browsern getestet:
- Mozilla Firefox Version 18.0.1,
- Opera Version 12.12,
- Google Chrome Version 23.0.1271.97 m,
- Internet Explorer 9.
Den verwendeten Funktionsumfang von HTML5 konnten dabei nur Google Chrome und Opera umsetzen. Firefox und der Internet Explorer haben zum aktuellen Zeitpunkt (Januar 2013) noch nicht den vollen Funktionsumfang für HTML5-Formularelemente implementiert. Die Anzeige scheitert dabei bei folgenden Elementen:
- input-Element vom Typ number (Einstellung der Relevanz mit Wertwechsel in 1er-Schritten von 1 bis 100 und Datensätze pro Seite in 10er-Schritten von 10 bis 50),
- input-Element vom Typ date (Datumseingabe).
Darüber hinaus wird die Fehleridentifizierung beim Internet Explorer nicht umgesetzt. Firefox bietet hier zwar die Fehlerüberprüfung an, nimmt aber zusätzlich zum definierten Style eine eigene, rote Hervorhebung des jeweiligen Eingabefeldes vor. Die unterschiedlichen Fehlermeldungen sind in der nachstehenden Abbildung (von oben Chrome, Opera, Firefox) ersichtlich.
Zusätzlich wurde zur Überprüfung der NVDA-Screen-Reader. Folgende Ergebnisse sind dabei zu nennen:
- alle Elemente können über die Tastaturschnittstelle erreicht werden,
- alle Bilder sind durch das alt-Attribut beschrieben,
- Listenelemente sind korrekt ausgezeichnet,
- sinnvolle Strukturierung der Seiten,
- Abkürzungen wurden mit dem abbr-Element ausgezeichnet und benannt,
- hinterlegte Eigenschaften von Buttons und input-Elementen (bspw. Pflichteingabefeld) wurden erfolgreich erkannt und übermittelt,
- Links sind sinnvoll benannt und durch title-Attribut beschrieben.