Lade...
 

Maßnahmenkatalog Barrierefreiheit

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

onfocus ist nicht implementiert.

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