Maßnahmenkatalog zur Barrierefreiheit von Webanwendungen
Die Barrierefreiheit unserer Webanwendungen basiert auf dem Standard "Web Content Accessibility Guidelines (WCAG) 2.0" des World Wide Web Consortium. Ausgehend von diesem werden Anforderungen aufgegriffen und mit entsprechenden Maßnahmen versehen.
1.1.1 Grafische Inhalte besitzen äquivalente Alternativtexte
BITV: 1.1.1
Maßnahme
Zentral wird für jedes Bitmap, die je eine eigene Bedeutung haben, ein Alternativtext verwaltet.
Werden Bilder auf Buttons verwendet, so wird entweder an dem Element des Buttons ein Attribut aria-label angebracht oder aber innerhalb des Buttons ein unsichtbares span-Element mit dem Button-Text eingefügt:
<div role="button" aria-label="Klick mich!"> <img src="click.png"/> </div>
<div role="button"> <img src="click.png"/> <span class="sr-only">Klick mich!</span> </div>
Alternativ kann natürlich auch der Text selbst oder aber ein Attribut "title" eingefügt werden. Ersteres ist jedoch immer zu sehen, zweiteres führt zu einem vom Browser erzeugten Tooltip.
<div role="button" title="Klick mich!"> <img src="click.png"/> </div>
a
1.1.1 Hintergrundgrafiken übermitteln keine Informationen
BITV: 1.1.1
Maßnahme
Programmierrichtlinien sehen vor, keine Informationen in der Hintergrundgrafik zu vermitteln. Diese werden nur des Designs wegen eingesetzt.
1.1.1 Layoutgrafiken besitzen leere Alternativtexte
BITV: 1.1.1
Maßnahme
AppsWH: Nicht einsetzbar. Basis: Nicht zu verwenden.
1.1.1 CAPTCHAs werden auch alternativ ausgegeben
BITV: 1.1.1
Maßnahme
Es werden keine CAPTCHAs eingesetzt.
1.2.1 Audioinformationen besitzen Textalternative
BITV: 1.2.1, 1.2.6
Maßnahme
Audioinhalte werden nicht genutzt
1.2.3 Video enthält Audiobeschreibung bzw. Textalternative
BITV: 1.2
Maßnahme
Videoinhalte werden nicht genutzt
1.3.1 Eingabefelder und Beschriftungen sind verknüpft
BITV: 2.4.6, 1.3.1, 4.1.2
Maßnahme
Beschriftungen werden im HTML-Element label eingefasst und über das Attribut for mit dem Eingabefeld verknüpft.
1.3.1 Listen sind logisch mit Strukturelementen ausgezeichnet
BITV: 1.3.1, 2.4.1
Siehe Technik H48
Maßnahme
Menü, ObjectListView, ObjectList
1.3.1 Datentabellen sind mit Spalten- bzw. Zeilenüberschriften ausgezeichnet
BITV: 1.3.1, 2.4.1
Maßnahme
Beim Anlegen einer Spalte wird stets eine entsprechende Überschrift angelegt
1.3.1 Layouttabellen enthalten kein Tabellen-Markup
BITV: 1.3.1, 2.4.1
Siehe "Additional Techniques (Advisory) for 1.3.1"
Maßnahme
Beim Layout werden keine Tabellen benutzt. Dies wird vor jedem Ausliefern kontrolliert.
1.3.2 Aussagekräftige Reihenfolge der Inhalte
BITV: 1.3.2
Maßnahme
Reihenfolge ist stets: Beschreibung, Eingabefeld, optionale Widgets Beschreibung wird als label mit for-Attribut implementiert
1.3.3 Sensorische Merkmale (Form, Größe, Position, Ton) sind nicht einziger Informationsträger
BITV: 1.3.3
Maßnahme
Form und Größe von Informationselementen sind genormt durch Layoutrichtlinie, Alle Schaltelemente haben Tooltips. Ton wird nicht eingesetzt.
1.4.1 Farbe ist nicht einziger Informationsträger
BITV: 1.4.1
Maßnahme
Farben werden eingesetzt, um auf bestimmte Bereiche/Unstände/Zustände aufmerksam zu machen. Dabei wird mittels Tooltips mehr Informationen diesbzgl. vermittelt.
1.4.2 Audio-Inhalte sind steuerbar
BITV: 2.2.2, 1.4.2, 1.4.7
Maßnahme
Audio-Inhalte werden nicht genutzt.
1.4.3 Kontrastabstände sind ausreichend
BITV: 1.4.3, 1.4.6
Maßnahme
Wird für jeden Widgettyp überprüft. Programmierrichtlinie sieht abnahme mithilfe des Color-Analyzers vor.
1.4.4 Schriftgröße kann angepasst werden
BITV: 1.4.4, 1.4.8
Maßnahme
Es kann über den Browser gezoomt werden.
1.4.5 Schriftgrafiken werden nicht eingesetzt
BITV: 1.4.5, 1.4.9
Maßnahme
Schriftgrafiken werden nicht genutzt
1.4.8 Kontraste können für Texte angepasst werden
BITV: 1.4.8
Maßnahme
Sehbehinderte Menschen können für die Kontrastanpassung in Windows 7 bspw. Designs mit hohem Kontrast („Systemsteuerung > Anpassung > Designs“) verwenden.
Hierfür werden Icons soweit möglich per Font-Icons realisiert, da diese auch unter Kontrast-Anpassung sichtbar bleiben.
2.1.1 Tastaturerreichbarkeit/-aktivierbarkeit interaktiver Element
BITV: 2.1.1, 2.1.3
Maßnahme
Jedes Eingabefeld und jeder Menüpunkt ist in die Tab-Reihenfolge eingebunden. Standard-Buttons werden mit Accesskeys ausgezeichnet.
2.1.2 Tastaturfallen werden vermieden
BITV: 2.1.2
Maßnahme
Die Tab-Reihenfolge ist vollständig.
2.2.2 Video-Inhalte sind steuerbar
BITV: 2.2.2, 1.4.2, 1.4.7
Maßnahme
Video-Inhalte werden nicht genutzt.
2.2.3 Zeitunabhängige Bedienung ist möglich
BITV: 2.2
Maßnahme
- Transaktionsabläufe müssen einen Timeout haben, werden aber so restriktiv wie möglich eingesetzt, Zeiten sind einstellbar -
2.3 Blinken wird vermieden
BITV: 2.3
Maßnahme
Blinken wird nicht genutzt.
2.4.1 Accesskeys sind eindeutig und dokumentiert
BITV: 3.3.5
Siehe "Additional Techniques (Advisory) for 2.4.1"
Maßnahme
s. Short cuts in Programmierrichtlinien AppsWH
2.4.1 Elementgruppen können übersprungen werden
BITV: 2.4.1
Maßnahme
Gruppenüberschriften werden als solche gekennzeichnet. In diesen ist ein Schalter enthalten, um die Gruppe auszublenden.
Der Fokus wird initial nicht in den Header, sondern in die Applikation gesetzt. Diese enthält keine sich wiederholenden Elemente.Über und unter Tabellen erscheint beim Fokussieren ein Link, mit dem diese übersprungen werden kann.
2.4.2 Fenster-/Seiten-/Frametitel sind sinnvoll und unterschiedlich benannt
BITV: 2.4.2
Maßnahme
Programmierrichtlinie sieht vor, dass keine zwei Titel auf einer Ebene gleich sein dürfen.
2.4.3 Fokusreihenfolge ist schlüssig
BITV: 2.4.3
Maßnahme
Programmierrichtlinie sieht vor, dass Felder entsprechend ihrer Position aufgereiht sind.
2.4.6 Überschriften werden verwendet
BITV: 2.4.6, 2.4.10
Maßnahme
Jede App hat eine Überschrift, die auch als solche dargestellt wird.
2.4.7 Tastaturfokus ist sichtbar
BITV: 2.4.7
Maßnahme
Wird durch hellblauen Rahmen hervorgehoben.
2.4.8 Position in der Anwendung ist erkennbar
BITV: 2.4.8
Maßnahme
Position ist die App, die durch die Überschrift angegeben wird. Freie Navigation zwischen Apps ist erwünscht.
2.4.9 Linkziel und -zweck sind erkennbar
BITV: 2.4.4, 2.4.9
Maßnahme
Für das Menü werden Alternativtexte implementiert
2.4.10 Überschriften werden zur logischen Strukturierung verwendet
BITV: 2.4.6, 2.4.10
Maßnahme
Jede Gruppe hat eine Überschrift, die auch als solche dargestellt wird.
3.1.1 Sprache ist ausgezeichnet
BITV: 3.1.1, 3.1.2
Maßnahme
Aktuell eingestellte Sprache wird oben rechts angezeigt, wie in Brand&Design.
3.1.4 Abkürzungen sind ausgezeichnet und erklärt
BITV: 3.1.3, 3.1.4
Maßnahme
Hilfeseite beschreibt Abkürzungen der entsprechende App
3.2.1 Tastaturnavigation und Aktivierung sind getrennt
BITV: 3.2.1
Maßnahme
on
3.2.2 Aktualisierungen sind wahrnehmbar und bedienbar
BITV: 3.2.2, 3.2.5
Maßnahme
Benutzer werden über entsprechende Muster geschult, bei denen eine Eingabe eine Änderung des Kontextes nach sich zieht.
3.2.3 Navigation ist einheitlich
BITV: 3.2.3
Maßnahme
Das Menü wird einmal implementiert und besitzt einen eindeutigen Platzhalter für das Untermenü.
3.3.1 Fehlerhafte Eingaben sind identifizierbar und korrigierbar
BITV: 3.3
Maßnahme
Beim Speichern werden Eingabefelder mit fehlerhaften Daten markiert, so dass eine differenzierte Ausgabe erfolgen kann.
3.3.2 Formularfeldgruppen sind ausgezeichnet und benannt
BITV: 2.4.6, 1.3.1
Siehe Technik H71
Maßnahme
Zusammengehörige Eingabefelder werden im HTML-Element fieldset zusammengefasst.
3.3.2 Pflichtfelder sind ausgezeichnet (H90)
BITV: 3.3.2
Maßnahme
Prompts von Pflichtfelder werden mit Stern versehen.
3.3.5 Dokumente und Hilfen werden in zugänglichem Format bereitgestellt
BITV: 3.3.5
Maßnahme
Jede Seite ist mit einem Hilfe-Link versehen, der auch per Tab erreichbar ist und in das mit ausgelieferte Wiki auf die entsprechende Seite verlinkt. Tooltips helfen bei der Bedienung von Eingabefeldern.
4.1.2 Rolle interaktiver Elemente ist wahrnehmbar
BITV: 4.1.2
Maßnahme
Umgesetzte ARIA-Konzepte:
- checkbox
- contentinfo
- main
- navigation
- tab / tabpanel