image
image
 
Bericht
Formloses Kurzfeedback zur Barrierefreiheit
Sächsisches Ministerium des Innern
https://www.asskomm.sachsen.de
BIKOSAX – Barrierefreie Informations- und Kommunikationsangebote des Freistaates Sachsen
Leipzig, 08.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.asskomm.sachsen.de
Prüfer
Antje Graf
Prüfzeitraum
04.04.2020 bis 08.04.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 - Vollbildmodus der vergrößerbaren Bilder: Die Pfeile um in der Bildershow vor-,
bzw. zurück zu blättern haben keine Beschriftung. Jeweils ein
aria-label
"zum
nächsten/vorherigen Bild" hinzufügen.
https://www.asskomm.sachsen.de/was-hat-sich-bewahrt-4014.html
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.
Randspalte: Das Copyright muss als
figcaption
ausgezeichnet werden, da es zum Bild
dazugehört. Das gilt auch für weitere Seiten des Auftritts z.B.
https://www.asskomm.sachsen.de/aus-fortbildung-4037.html
.
1.1.1b
Alternativtexte
für
Grafiken
und
Objekte
Allgemein: Die Alternativtexte der unverlinkten Bilder beginnen jeweils mit "Das Bild zeigt".
Dieser Zusatz muss entfernt werden, dass es sich um Bilder handelt muss dem
Screenreadernutzer nicht mitgeteilt werden. Einige Bilder haben ungenaue
Bildbeschreibungen, so z.B. ASSKomm-Strategie. Wenn die Bildinformation relevant ist, muss
sie auch vollständig vermittelt werden. In diesem Falle könnten sie jedoch auch als dekorativ
angesehen werden und nur ein leeres alt-Attribut erhalten.

 
DZB Leipzig | BIKOSAX
Seite 5
https://www.asskomm.sachsen.de/was-hat-sich-bewahrt-4014.html
Das vergrößerbare Bild
hat einen fehlerhaften Alternativtext, es ist kein Zahnrad darauf zu sehen. Das Copyright
muss als
figcaption
ausgezeichnet werden, da es zum Bild dazugehört. Das gilt auch für
die vergrößerte Ansicht im Vollbildmodus.
1.2.2a
Aufgezeichnete
Videos
mit
Untertiteln
https://www.asskomm.sachsen.de/videos-4367.html
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. Das gilt auch für das Video auf der Seite
https://www.asskomm.sachsen.de/aus-fortbildung-4037.html
.
1.2.3a
Audiodeskription
oder
Volltext-Alternative
für
Videos
https://www.asskomm.sachsen.de/videos-4367.html
Die eingebundenen Videos haben
keine Audiodeskription oder Volltext-Alternativen. Für Videos Audiodeskription oder
Volltext-Alternativen bereitstellen. Das gilt auch für das Video auf der Seite
https://www.asskomm.sachsen.de/aus-fortbildung-4037.html
.
1.2.5a
Audiodeskription
für
Videos
https://www.asskomm.sachsen.de/videos-4367.html
Die eingebundenen Videos haben
keine Audiodeskription. Für Videos Audiodeskription bereitstellen. Dabei auch die Inhalte in
Schriftform mit aufnehmen sowie die Informationen, die nur über Bild übertragen werden.
Das gilt auch für das Video auf der Seite
https://www.asskomm.sachsen.de/aus-fortbildung-
4037.html
.

 
DZB Leipzig | BIKOSAX
Seite 6
1.3.1a
HTML-Strukturelemente
für
Überschriften
Startseite: Die beiden Überschriften der Ebene 3 "Twitter" und "Facebook" sind der
Überschrift "Die ASSKomm-Konferenz in BILDERN." zugeordnet. Inhaltlich stehen sie jedoch
für sich und müssen ebenfalls als
h2
ausgezeichnet werden.
https://www.asskomm.sachsen.de/was-hat-sich-bewahrt-4014.html?
Die Zuordnung und
Reihenfolge der Überschriften ist nicht logisch. Z. B.: "Seniorensicherheitsberatung" =
h3
ist
ein inhaltlich abgegrenzter Bereich, der "Was hat sich bewährt" =
h1
untergeordnet ist. Die
Beschreibung des Projektes kommt nach der
h3
und die Überschrift ist mit
h2
ausgezeichnet. Es wäre besser die erste Erwähnung des jeweiligen Projektes mit
h2
und die
zugehörige Beschreibung mit
h3
auszuzeichnen. Die weiteren Überschriften innerhalb der
Beschreibung sollten zur besseren Navigation mit
h4
ausgezeichnet werden.
Zusätzlich sind der
h2
"Wo ZWICKt's?« – Ihr direkter Draht zur Stadtverwaltung Zwickau" die
beiden nachgeordneten Artikel mit der Überschriftenebene
h3
ausgezeichnet zugeordnet.
Jedoch gehört der Artikel über Görlitz inhaltlich nicht zum Thema "Wo ZWICKt's?« – Ihr
direkter Draht zur Stadtverwaltung Zwickau" und benötigt entweder eine vorangestellte
Überschrift der Ebene 2 oder sollte mit
h2
ausgezeichnet werden.
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.
1.3.2a
Sinnvolle
Reihenfolge
Startseite - 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

 
DZB Leipzig | BIKOSAX
Seite 7
Beispiel ein Screenreadernutzer schwerer wahrnehmen. Das Eingabefeld im HTML hinter
dem Teilen-Schalter einblenden. Das gilt auch für weitere Seiten des Auftritts.
1.3.5a
Eingabefelder
zu
Nutzerdaten
vermitteln
den
Zweck
Bei der Abfrage von Nutzerdaten wie z.B. im Kontaktformular Startseite und
https://www.asskomm.sachsen.de/newsletter4793.html
benötigen die Felder das
autocomplete-Attribut, da der Nutzer seine Daten einfach vervollständigen können soll. Für
die nutzerbezogenen Daten-Eingabefelder die jeweiligen Attribute ergänzen, wie z.B. Name-
Feld: autocomplete="family-name", E-Mail-Feld: autocomplete="email".
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.
2.1.1a
Ohne
Maus
nutzbar
Startseite: Der Link "Datenschutzerklärung" im Datenschutz-Hinweis-Dialog der Twitter-
/Facebook-Komponenten ist nicht mit der Tastatur bedienbar. Möglicherweise liegt es an der
Fokusreihenfolge im Dialog, dass der Fokus nach Verlassen des Inhalt-laden-Schalters bereits
wieder auf den Beginn des Dialogs gesetzt wird und der Datenschutzerklärung-Link als letztes
Element vergessen wurde. Der Fokus sollte erst nach diesem Link wieder an den Beginn des

 
DZB Leipzig | BIKOSAX
Seite 8
Dialogs gesetzt werden, das gilt auch für weitere Seiten des Auftritts
(
https://www.asskomm.sachsen.de/videos-4367.html
).
2.4.2a
Sinnvolle
Dokumenttitel
https://www.asskomm.sachsen.de/videos-4367.html
Dokumenttitel sind wichtig für die
Navigation und Orientierung in Webangeboten. Wenn das Angebot oder der Inhalt der Seite
nicht bezeichnet sind, ist die Orientierung beeinträchtigt. Er sollte zwei Bestandteile
enthalten: eine immer gleiche, allgemeine Bezeichnung des Webauftritts und eine
unterscheidende, individuelle Bezeichnung der jeweiligen Seite. Der individuelle Teil sollte,
wie auf der Startseite auch auf allen Unterseiten "Allianz Sichere Sächsische Kommunen"
enthalten. Den individuellen Teil noch genauer beschreiben und den Titel z.B. ändern in: "Allianz
Sichere Sächsische Kommunen - Videos | sachsen.de
3.3.2a
Beschriftungen
von
Formularelementen
vorhanden
Startseite: Im Vollbildmodus 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. Das gilt auch für weitere Seiten des Auftritts.
3.3.3a
Hilfe
bei
Fehlern
Startseite: Die Fehlerbehandlung bei Pflichtfeldern ist derzeit nur über das required-
Attribut und damit browserseitig eingebunden. Eine eigene Fehlerbehandlung, mit
sinnvollen Fehlermeldungen wäre immer zu empfehlen. Diese sollte auch länger
stehenbleiben und nicht nach 6 Sekunden (Chrome) oder Weitertabben (Firefox) wieder
verschwinden und die Fehlermeldung sollte sich mit vergrößern, wenn man die
Vergrößerungsfunktion des Browser nutzt.

 
DZB Leipzig | BIKOSAX
Seite 9
4.1.2a
Name,
Rolle,
Wert
verfügbar
https://www.asskomm.sachsen.de/was-hat-sich-bewahrt-4014.html?
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.asskomm.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.

 
DZB Leipzig | BIKOSAX
Seite 10
Zusätzliche Hinweise
Allgemein
1. Leere Listenelemente sollten entfernt werden siehe z.B. am Ende der Startseite vor der
Fußzeile.
2. Twitter- und Facebook-Komponenten: Diese eingebundenen Angebote sollten auch
barrierefrei zugänglich sein oder eine entsprechende Alternative bereitgestellt werden.
Derzeit gibt es einige Punkte, die nicht so gut umgesetzt sind. Zum Beispiel:
a) Die Bilder haben keine, bzw. keine aussagekräftigen Alternativtexte ("Bild auf Twitter
anzeigen"). Bei diesen Grafiken ist aber teilweise auch wichtig, was die Grafik
darstellt. Einen aussagekräftigen Alternativtext verwenden, der bei Grafiken neben
dem Ziel des Links auch den Inhalt der Grafik angibt.
b) Die Texte in grauer Schrift (Tweet Autor, Datum ...) haben fokussiert einen Kontrast
von 2,7:1 und unfokussiert 2,9:1. Die Beschriftung vom Button "Weitere Tweets
laden" hat fokussiert einen Kontrast von 1,9:1. Den Kontrast auf 4,5:1 erhöhen, am
besten wäre jedoch die Verwendung einer dunkleren Hintergrundfarbe unter
Einhaltung der Kontrastanforderung.
c) Die Fließtextlinks innerhalb der Meldungen haben zum umgebenen Text nur einen
Kontrast von 2,3:1. Den Kontrast auf 3:1 erhöhen.
d) Bei den Bildern ist der Tastaturfokus nicht sichtbar. Z. B. mit der CSS-Eigenschaft
outline
einen gut sichtbaren Fokus erzeugen.
e) Der Aufklappschalter Tweet-teilen stellt dem Screenreader nicht bereit, ob das Menü
aufgeklappt ist oder nicht. Das Attribut
aria-expanded
einfügen (und abhängig
vom Aufklappstatus mit JavaScript die Werte
true
und
false
setzen).
Vielleicht reicht hier auch jeweils ein Link zu den Sozialen Medien aus.

 
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