Die Kriterien der BITV – Barrierefreie Information Technologie Verordnung korrekt umsetzen

3. Oktober 2019
Peggy

Um IT-Lösungen barrierefrei für alle Betroffenen adäquat gestaltet und programmiert werden, gibt es als hilfreiches Instrumentarium die Kritieren der BITV.

BITV heißt Barrieren Informations Technologie Verordnung und ist als Gesetzgebung und Regelwerk ein bisschen trocken, aber extrem wichtig. Wir versuchen das hier etwas vereinfacht auszuarbeiten, denn diese Kriterien gilt es zwingend zu erfüllen, wenn man sich “barrierefrei” nennen möchte bzw. als solches zertifizieren lassen will. Alles andere ist nur “barrierearm” – auch schön, reicht aber nicht. Wer sich also an barrierefreie Webseiten heran wagen möchte, findet hier Hilfe – durch Informationen oder gerne durch aktive Mitwirkung durch uns. Unsere IT-Lösung zur besseren Vereinbarkeit von Familie und Beruf steht gerade kurz vor der Zertifizierung. Daher zeigen wir an diesem Beispiel auf, wie der Stand der Dinge des Projektes ist und wie wir das eine doer andere gelöst haben.

Prinzip Wahrnehmbarkeit

1.1.1.1 Alt-Texte bei Nicht-Text-Inhalten
Layout-Grafiken haben leere Alt-Attribute.
FamJob-Seite: Design = OK | HTML = OK | WPF = OK | Apps = OK

1.1.1.2 Alt-Texte bei Bedienelementen
Grafische Bedienelemente haben sinnvolle Alternativtexte.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.1.1.3 Alt-Texte bei Grafiken
Informative Grafiken und Bilder haben sinnvolle Textalternativen. Objekte wie Video- und Audio-Dateien sowie Applets haben zumindest kurze beschreibende Textalternativen.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.1.1.4 Alt-Texte bei Captchas
Design = OK | HTML = — | WPF = — | Apps = —

1.2.1 Alt-Medien zu aufgezeichneten Audio- und Video-Dateien
Audiodateien und stumme Videodateien haben gleichwertige Medienalternativen.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.2.2 Erweiterte Untertitel
Aufgezeichnete Videos haben synchrone Untertitel.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.2.3 Audio-Deskription oder Volltext-Alternative
Videos sind mit Audiodeskription oder Volltext-Alternative versehen.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.2.4 Live-Untertitel
Live-Übertragungen haben synchrone Untertitel.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.2.5 Audio-Deskription
Videos sind mit Audiodeskription versehen.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.1.1 Überschriften – Informationspräsentation
Seiteninhalte sind durch Überschriften erschlossen.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.1.2 Listen – Informationspräsentation
Listen (einschließlich Menüs) sind als solche visuell erkennbar und mit den vorgesehenen HTML-Strukturelementen ausgezeichnet.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.1.3 Zitate – Informationspräsentation
Als eigenständige Abschnitte gefasste Zitate sind mit blockquote ausgezeichnet.
Design = OK | HTML = OK | WPF = — | Apps = —

1.3.1.4 Gliederung – Informationspräsentation
Absätze und Texthervorhebungen sind mit geeigneten Strukturelementen ausgezeichnet.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.1.5 Tabellen – Informationspräsentation
Datentabellen sind richtig aufgebaut und ausgezeichnet.
Design = OK | HTML = OK | WPF = — | Apps = —

1.3.1.5 Tabellenzellen – Informationspräsentation
In komplexen Datentabellen ist der Bezug von Überschriften und Inhalten (über scope oder über id und headers) definiert, Zuordnungen von Überschriften in einfachen Datentabellen sind korrekt.
Design = OK | HTML = OK | WPF = — | Apps = —

1.3.1.6 Keine Tabellen für Layout – Informationspräsentation
Für Datentabellen vorgesehenes Mark-up wird nicht für Layout-Tabellen verwendet.
Design = OK | HTML = OK | WPF = — | Apps = —

1.3.1.7 Beschriftung Formular – Informationspräsentation
Beschriftungen von Formularfeldern sind richtig verknüpft.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.2 Aussagekräftige Reihenfolge – Inhalte erfassen
Seiteninhalte stehen unabhängig von der Darstellung in einer sinnvollen Reihenfolge.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.3.3 Ohne sensorische Merkmale – Inhalte erfassen
Die Wahrnehmung von Farben, Formen, Position von Elementen oder Tönen ist für die Bedienung oder das Verständnis der Inhalte nicht erforderlich.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.4.1 Ohne Farben nutzbar
Die Wahrnehmung von Farben ist für die Bedienung oder das Verständnis der Inhalte nicht erforderlich.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.4.2 Audio-Kontrolle / Ton abschaltbar
Automatisch abgespielte Tonelemente dauern nicht länger als drei Sekunden, lassen sich abschalten, oder unabhängig von der Systemlautstärke herunter regeln.
Design = — | HTML = — | WPF = — | Apps = —

1.4.3 Kontrast
Farben sind angemessen kontrastreich ausgewählt.
Design = OK | HTML = OK | WPF = OK | Apps = OK

1.4.4 Veränderbare Textgröße (Text auf 200% vergrößerbar)
Text kann um bis zu 200 Prozent geändert werden, ohne dass dabei Inhalt oder Funktionalität verloren geht.
Design = OK | HTML = OK | WPF = NO | Apps = NO

1.4.5 Verzicht auf Schriftgrafiken
Schriftgrafiken werden nicht verwendet.
Design = OK | HTML = OK | WPF = OK | Apps = OK

Prinzip Bedienbarkeit

2.1.1 Tastaturbedienbarkeit
Auch ohne Maus können alle wesentlichen Funktionen und Inhalte genutzt werden.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.1.2 Keine Tastaturfalle
Der Inhalt führt nicht zu einer Tastaturfalle.
Design = OK | HTML = OK | WPF = OK | Apps = NO

2.2.1 Zeitbegrenzungen anpassbar
Zeitbegrenzungen sind nicht vorhanden, abschaltbar oder verlängerbar.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.2.2 (OK) Animationen anhalten, beenden, ausblenden
Bewegte oder blinkende Inhalte sind nicht vorhanden, stoppen spätestens nach 5 Sekunden, oder es gibt eine Möglichkeit, die Bewegung/das Blinken anzuhalten, zu beenden oder auszublenden.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.3.1 Verzicht auf Flackern und Aufblitzen
Webseiten enthalten kein Flackern.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.4.1 Bereiche überspringbar / Elementgruppen umgehen
Seitenbereiche sind durch Überschriften, Sprunglinks oder WAI ARIA document landmarks erschlossen, Frames und Iframes haben sinnvolle Titel.
Design = OK | HTML = OK | WPF = OK | Apps = NO

2.4.2 Webseiten-Titel / sinnvolle Dokumenten-Titel
Dokumenttitel sind eindeutig, sie bezeichnen Site und Seiteninhalt.
Design = OK | HTML = NO | WPF = — | Apps = —

2.4.3 Schlüssige Reihenfolge der Tastaturbedienung / Fokus-Reihenfolge
Links, Formularelemente und Objekte werden mit der Tabulatortaste in einer schlüssigen Reihenfolge angesteuert. Eingeblendete Inhalte sowie dynamisch eingefügte oder geänderte Inhalte erscheinen an sinnvoller Stelle in der Fokusreihenfolge.
Design = OK | HTML = OK | WPF = OK | Apps = —

2.4.4 Aussagefähige Linktexte / Zweck eines Links (im Kontext)
Linktexte sind durch den Linktext selbst oder über den programmatisch ermittelbaren Kontext aussagekräftig.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.4.5 Alternative Zugangswege
Zwei unterschiedliche Zugangswege zu den Inhalten des Angebots sind vorhanden.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.4.6 Aussagekräftige Überschriften und Beschreibungen
Überschriften und Beschriftungen sind klar und aussagekräftig.
Design = OK | HTML = OK | WPF = OK | Apps = OK

2.4.7 Aktuelle Position des Fokus deutlich / Sichtbarer Fokus
Der Tastaturfokus ist deutlich zu sehen.
Design = OK | HTML = OK | WPF = OK | Apps = NO

2.4.8 Standort / Position im Webauftritt klar
Das Webangebot zeigt dem Besucher, wo er sich gerade befindet.
Design = OK | HTML = OK | WPF = OK | Apps = OK

Prinzip Verständlichkeit

3.1.1 Hauptsprache angegeben
Die Hauptsprache der Webseite(n) ist angegeben.
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.1.2 Anderssprachige Wörter und Abschnitte ausgezeichnet
Anderssprachige Wörter und Abschnitte sind mit dem lang-Attribut ausgezeichnet.
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.2.1 Keine unerwartete Kontextänderung bei Fokus
Fokus führt nicht zu einer unerwarteten Kontextänderung.
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.2.2 Keine unerwartete Kontextänderung bei Eingabe
Eingabe führt nicht zu einer unerwarteten Kontextänderung.
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.2.3 Konsistente Navigation
Navigationsmechanismen sind einheitlich.
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.2.4 Konsistente Bezeichnung
Navigationsmechanismen und Funktionen sind einheitlich benannt.
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.3.1 Fehlererkennung
Wird ein Eingabefehler automatisch festgestellt, wird das fehlerhafte Element aufgezeigt und der Fehler wird in Textform beschrieben.
Design = OK | HTML = — | WPF = — | Apps = —

3.3.2 Beschriftungen von Formularelementen
Beschriftungen von Formularfeldern stehen vor den Eingabefeldern.
Design = OK | HTML = OK | WPF = OK | Apps = OK

3.3.3 Hilfe bei Fehlern
Wird ein Eingabefehler automatisch festgestellt, wird der Fehler in Textform beschrieben. Wo sinnvoll, werden Korrekturvorschläge gemacht.
Design = OK | HTML = — | WPF = — | Apps = —

3.3.4 Fehlervermeidung durch Hilfen
Verpflichtende Dateneingaben können rückgängig gemacht oder vor dem Abschicken überprüft und korrigiert werden.
Design = OK | HTML = — | WPF = — | Apps = —

Prinzip Robustheit

4.1.1 Korrekte Syntax
Das Prüfergebnis des W3C-HTML-Validators ist positiv.
Design = — | HTML = OK | WPF = — | Apps = —

4.1.2 >>> Name, Rolle, Wert verfügbar
Interaktive Bedienelemente wie Links und Schaltflächen haben programmatisch ermittelbare Namen und Rollen.
Design = — | HTML = OK | WPF = OK | Apps = OK

Unterstützung bei BITV-Umsetzung

Wir helfen Ihnen gerne bei der korrekten Umsetzung der BITV - ob als inklusives Design, in einem Pretest, als Beratung oder in der UI-Entwicklung.