image
image
 
Bericht
Formloses Kurzfeedback zur Barrierefreiheit
Sächsisches Ministerium des Innern
https://www.einbuergerung.sachsen.de
BIKOSAX – Barrierefreie Informations- und Kommunikationsangebote des Freistaates Sachsen
Leipzig, 03.04.2020

 
DZB Leipzig | BIKOSAX
Seite 2
Auftragsdaten
Auftraggeber
Sächsisches Ministerium des Innern
Frau Isabelle Starruß
Presse, Öffentlichkeitsarbeit
Postanschrift: 01095 Dresden
Prüfgegenstand
https://www.einbuergerung.sachsen.de/
Prüfer
Antje Graf
Prüfzeitraum
02.03.2020 bis 06.03.2020

 
DZB Leipzig | BIKOSAX
Seite 3
Prüfmethode und Einschätzung
Prüfmethode
Das Kurzfeedback beinhaltet Prüfungen des BITV-/WCAG-Tests. Die Web Content
Accessibility Guidelines (WCAG), aktuell in der Version 2.1, sind international gültige
Standards, welche durch verschiedene Arbeitsgruppen des World Wide Web Consortium
(W3C) erstellt und weiterentwickelt werden.
Im formlosen Kurzfeedback wird der Internetauftritt stichprobenartig geprüft, wobei große
bzw. schwerwiegende Barrieren im Fokus stehen. Das Kurzfeedback soll einen groben
Überblick zur Barrierefreiheit des Internetauftritts und Hilfestellung für die weitere
Entwicklung geben.
Die in den folgenden Teilen des Berichts angegebenen Nummern bezeichnen die Prüfschritt-
Nummern des
BITV-/WCAG-Tests
.
Das Kurzfeedback bezieht sich ausschließlich auf die individuellen Seiteninhalte der jeweiligen
Auftritte. Auf Grund der seitenübergreifenden Gestaltung des Gesamtauftritts
www.sachsen.de
sind die übergreifenden Elemente von der Überprüfung ausgeschlossen (z.B.: die Portal- und
Portalübergreifende Navigation sowie der Fußbereich).

 
DZB Leipzig | BIKOSAX
Seite 4
Fehlerbeschreibung und Lösungsvorschläge
1.1.1a Alternativtexte für Bedienelemente
Startseite: Der Schalter zum Öffnen des Vollbildmodus der vergrößerbaren Bilder ist für sich
allein nicht aussagekräftig bzw. muss man das Bild davor im Zusammenhang kennen. Das img-
Element in das button-Element des Vollbild-Schalters einfügen. Alternativ im Attribut
aria-label
des Schalters die jeweilige Grafik erwähnen, z. B.
aria-label="Eben
gezeigte Grafik im Vollbildmodus
öffnen".
Außerdem die Höhe und Breite nicht auf 0 (height:0, width:0) setzen, weil manche
Screenreader den Schalter ohne Textinhalt als verstecktes Element interpretieren.
Stattdessen den Wert auf 1px setzen.
1.1.1b Alternativtexte für Grafiken und Objekte
Startseite: Die Bilder haben in der Vollbildansicht keinen aussagekräftigen Alternativtext. Die
Schrift auf dem Bild muss mit in den Alternativtext aufgenommen und der Bildinhalt sollte
kurz erläutert werden.
1.2.2a Aufgezeichnete Videos mit Untertiteln
Startseite: Die über YouTube eingebundenen Videos haben zuschaltbare Untertitel, die
allerdings automatisch erzeugt wurden und nicht immer korrekt sind. Am besten selbst
erstellte, korrekte Untertitel verwenden oder die automatisch erstellen Untertitel
korrigieren. Ausnahme ist das Video "Typisch sächsisch".
1.2.3a Audiodeskription oder Volltext-Alternative für Videos
Startseite: Die eingebundenen Videos haben keine Audiodeskription oder Volltext-
Alternativen. Für Videos Audiodeskription oder Volltext-Alternativen bereitstellen.

 
DZB Leipzig | BIKOSAX
Seite 5
1.2.5a Audiodeskription für Videos
Startseite: Die eingebundenen Videos haben keine Audiodeskription. Für Videos
Audiodeskription bereitstellen. Dabei auch die eingeblendeten Inhalte in Schriftform mit
aufnehmen.
1.3.1a HTML-Strukturelemente für Überschriften
Startseite: Die Überschriften sind über die gesamte Seite fast ausschließlich mit
h2
ausgezeichnet. Die Überschriften der Ausklappelemente müssen jedoch den jeweiligen
Abschnittsüberschriften untergeordnet werden und als
h3
ausgezeichnet sein.
1.3.1d Inhalte gegliedert
Startseite: Die Absätze unterhalb der Links wie z. B.: "Hier finden Sie eine Volkshochschule in
Ihrer Nähe." mit
p
auszeichnen.
1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar
Startseite - Dialog vergrößerte Bildansicht: Das Texteingabefeld ist nicht korrekt mit seiner
Beschriftung verknüpft, weil das Attribut
aria-labelledby
auf einem übergeordneten
div-Element steht. Das Attribut
aria-labelledby
auf das input-Element verschieben.

 
DZB Leipzig | BIKOSAX
Seite 6
1.3.2a Sinnvolle Reihenfolge
Startseite:
1. Die Kästen in denen einzelne Bürger vorgestellt werden sind in der Lesereihenfolge
enthalten, und stehen jeweils am Ende eines Inhaltsabschnittes, gehören jedoch nicht dazu.
Besser wäre es diese am Anfang oder am Ende der Seite nacheinander zu platzieren.
2. Dialog vergrößerte Bilder: Wenn der Teilen-Schalter aktiviert wird, erscheint das
zugehörige Eingabefeld oberhalb des Schalters im HTML-Dokument. Dadurch kann es zum
Beispiel ein Screenreadernutzer schwerer wahrnehmen. Das Eingabefeld im HTML hinter
dem Teilen-Schalter einblenden.
1.4.3a Kontraste von Texten ausreichend
Für das body-Element wurde zwar in CSS eine Text- und Hintergrundfarbe definiert. Die
Hintergrundfarbe wirkt sich jedoch nicht vollständig auf untergeordnete Elemente aus, weil
ebenfalls die Eigenschaft
height:100vh
angegeben wurde. Die Hintergrundfarbe wirkt
sich damit nur auf 100% der Viewport-Höhe (Fensterhöhe) aus. Falls ein Nutzer nun über ein
Userstylesheet bereits im HTML-Wurzelelement
background-color:black
und
color:white
definiert, kann er beim Scrollen die Texte nicht mehr lesen.
Entweder die Eigenschaft
height:100vh
entfernen oder auf allen dem body-Element
direkt untergeordneten Elementen (eine Ebene tiefer) die Hintergrundfarbe erneut
definieren.
1.4.11a Kontraste von Grafiken und Bedienelementen ausreichend
Startseite - Modaler Dialog: der Schließen- und Teilen-Schalter hat im fokussierten Zustand
nur einen Kontrast von 2,4:1 statt 3:1 hier muss der Kontrast verbessert werden.

 
DZB Leipzig | BIKOSAX
Seite 7
3.3.2a Beschriftungen von Formularelementen vorhanden
Atartseite: Im Vollbildmodus der Bilder erscheint nach dem Betätigen des Schalters "Bild in
sozialen Medien teilen" ein Formularfeld ohne Beschriftung. Diese muss ergänzt und mit
dem Formular verknüpft werden.
4.1.2a Name, Rolle, Wert verfügbar
Startseite: Akkordeon-Container: das Attribut
aria-expanded
ist sowohl beim
aufklappbaren a-Element (Überschrift) als auch beim Inhalt (tabpanel) der ausgeklappt ist
verwendet worden. Auf dem Inhalt muss das Attribut jedoch wieder entfernt werden, da
hier nichts zusätzlich ausgeklappt wird.
4.1.3a Statusmeldungen programmatisch verfügbar
https://www.einbuergerung.sachsen.de/suche.html
Sucheingabefeld: Assistive Technologie
muss informiert werden, dass es eine Autovervollständigung gibt. Die Verfügbarkeit der
Autovervollständigungsliste mittels einer Live-Region ansagen lassen. Das heißt, es wird ein
Element mit
role="status"
definiert, wodurch nach jeder Zeicheneingabe angesagt
wird, ob und wie viele Suchvorschläge eingeblendet werden. Zusätzlich sollte über die Live-
Region auch die Pfeiltastennavigation mit angesagt werden.

 
BIKOSAX – Barrierefreie Informations- und
Kommunikationsangebote des Freistaates Sachsen
Prüfstelle
Deutsches Zentrum für barrierefreies Lesen (dzb lesen)
Gustav-Adolf-Straße 7
04105 Leipzig
Kontakt
Dr. Julia Dobroschke
Medienmanagement | BIKOSAX
Telefon: 0341-7113 236
Telefax: 0341-7113 125
E-Mail: j.dobroschke@dzblesen.de
Internet:
www.dzblesen.de/bikosax
v1.00