image
image
 
Bericht
Formloses Kurzfeedback zur Barrierefreiheit
Sächsisches Ministerium des Innern
https://www.smi.sachsen.de
BIKOSAX – Barrierefreie Informations- und Kommunikationsangebote des Freistaates Sachsen
Leipzig, 12.03.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.smi.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
https://www.smi.sachsen.de/staatsminister-4003.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 (
hei ght : 0
,
wi dt h: 0
) setzen, weil
manche Screenreader den Schalter ohne Textinhalt als verstecktes Element interpretieren.
Stattdessen den Wert auf 1px setzen.
1.3.1a HTML-Strukturelemente für Überschriften
https://www.smi.sachsen.de/beauftragter-fur-vertriebene-und-spataussiedler-4126.html?
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 und als
h3
ausgezeichnet werden. Das gilt auch für weitere Seiten des
Auftritts. Im Bereich Wanderausstellungen sind die beiden Überschriften "Ansprechpartner"
und "Hinweise zu Wanderausstellungen" mit
h2
ausgezeichnet, gehören inhaltlich jedoch
zur Überschrift "Wanderausstellungen" (h2) und müssten damit eine Ebene tiefer mit
h3
ausgezeichnet werden.
1.3.1b HTML-Strukturelemente für Listen
https://www.smi.sachsen.de/datenschutz-informationspflichten.html
Die Linksliste unter
der Überschrift "Soziale Medien" ist nicht als Liste ausgezeichnet.

 
DZB Leipzig | BIKOSAX
Seite 5
1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar
https://www.smi.sachsen.de/staatsminister-4003.html
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
https://www.smi.sachsen.de/staatsminister-4003.html
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. Das gilt auch
für weitere Seiten des Auftritts.
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
hei ght : 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
backgr ound- col or : bl ack
und
col or : whi t e
definiert, kann er beim Scrollen die Texte nicht mehr lesen.
Entweder die Eigenschaft
hei ght : 100vh
entfernen oder auf allen dem
body-Element
direkt untergeordneten Elementen (eine Ebene tiefer) die Hintergrundfarbe erneut
definieren.
https://www.smi.sachsen.de/nachgeordnete-behoerden-4005.html
: Die Fließtextlink haben
zu ihrem umgebenen Text nur einen Kontrast von 1,6:1 der Kontrast muss jedoch
mindestens 3:1 betragen, wenn keine andere Kennzeichnung des Texts als Link außer der

 
DZB Leipzig | BIKOSAX
Seite 6
Farbe vorhanden ist. Entweder den Kontrast erhöhen oder den Links eine zusätzliche
Auszeichnung oder Markierung hinzufügen.
1.4.11a Kontraste von Grafiken und Bedienelementen ausreichend
https://www.smi.sachsen.de/staatsminister-4003.html
Modaler Dialog: der Schließen- und
Teilen-Schalter hat im fokussierten Zustand nur einen Kontrast von 1,6:1 statt 3:1 hier muss
der Kontrast verbessert werden.
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
Dialogs gesetzt werden.
2.4.2a Sinnvolle Dokumenttitel
https://www.smi.sachsen.de/staatsminister-4003.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 "Sächsisches Staatsministerium des Innern"
enthalten. Den individuellen Teil noch genauer beschreiben und den Titel z.B. ändern in:
"Sächsisches Staatsministerium des Innern - Staatsminister | sachsen.de".

 
DZB Leipzig | BIKOSAX
Seite 7
3.1.2a Anderssprachige Wörter und Abschnitte ausgezeichnet
Twitter + Facebook: "SMISachsen auf twitter"/"SMISachsen auf facebook" ist mit dem lang-
Attribut ausgezeichnet obwohl es sich nicht um einen andersprachigen Text handelt. Das
Attribut
lang="en"
nur für Facebook bzw. Twitter und nicht für den restlichen Text
verwenden.
3.2.3a Konsistente Navigation
In der Navigation (und Sitemap) befinden sich Links auf externe Auftritte (Beispiel:
Unterpunkte von „Nachgeordnete Behörden“) -> bei Auswahl Verwirrung des Nutzers, da
Navigation völlig verändert. Lösung: Links auf externe Auftritte nur im Seiteninhalt
aufführen.
3.3.2a Beschriftungen von Formularelementen vorhanden
https://www.smi.sachsen.de/staatsminister-4003.html
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.
4.1.2a Name, Rolle, Wert verfügbar
Startseite – Stellensuche: Ob in den Auswahlen Fachbereich oder Qualifikationsebene ein
Punkt ausgewählt ist, wird nicht an assistive Technologien ausgewiesen. Auf den
l i
-
Elementen muss das Attribut
ar i a- sel ect ed
entsprechend dem Auswahlstatus zwischen
true und false umgeschaltet werden.
https://www.smi.sachsen.de/organisation-und-aufgaben-4007.html
: Akkordeon-Container:
das Attribut
ar i a- expanded
ist sowohl beim aufklappbaren
a-Element
(Überschrift) als

 
DZB Leipzig | BIKOSAX
Seite 8
auch beim Inhalt (t
abpanel
) 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.smi.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
r ol e=" st at us"
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. Das gilt auch auf der Startseite
im Bereich Stellensuche für das Feld "Ihr Ort".

 
DZB Leipzig | BIKOSAX
Seite 9
Zusätzliche Hinweise
Allgemein
1. Leere Listen und Absätze sollten entfernt werden, Beispiel: Datenschutz-Seite
https://www.smi.sachsen.de/datenschutz-informationspflichten.html
, oberhalb der
Überschrift "Bewerberdatenverarbeitung".
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:
1. 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.
2. 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.
3. Die Fließtextlinks innerhalb der Meldungen haben zum umgebenen Text nur einen
Kontrast von 2,3:1. Den Kontrast auf 3:1 erhöhen.
4. Bei den Bildern ist der Tastaturfokus nicht sichtbar. Z. B. mit der CSS-Eigenschaft
outline einen gut sichtbaren Fokus erzeugen.
5. 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