image
image
 
Bericht
Formloses Kurzfeedback zur Barrierefreiheit
Sächsisches Ministerium des Innern
https://www.ehrenamt-mit-blaulicht.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.ehrenamt-mit-blaulicht.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.ehrenamt-mit-blaulicht.sachsen.de/blaulicht-aktuell-4059.html
issuu-
Dokument: Die Bedienelemente der Anwendung haben keine Alternativtexte. Da es sich um
ein Angebot Dritter handelt und ggf. entwicklerseitig keine Anpassung möglich ist, wäre es
sinnvoll das Blaulicht-Aktuell-Magazin in anderer Form barrierefrei darzustellen, am besten
als HTML-Dokument, aber auch eine barrierefreie PDF-Datei wäre denkbar. Das aktuell
eingebundene PDF-Magazin ist herunterladbar, aber nicht barrierefrei.
1.1.1b Alternativtexte für Grafiken und Objekte
Startseite
1. Die Bilder im Karussell haben keinen Alternativtext, damit weiß der Screenreadernutzer
nicht was er da eigentlich vor und zurückblättern kann. Entweder Alternativtexte ergänzen
oder das Karussell komplett mit
ar i a- hi dden=" t r ue"
für assistive Technologien
ausblenden.
2. Die Bilder innerhalb der Teaser haben nur teilweise Alternativtexte. Wenn Alternativtexte
vergeben sind, sind diese oftmals nicht aussagekräftig und vermitteln nicht den Bildinhalt.
Die Bilder können als dekorativ angesehen werden, dann muss das
al t
-Attribut jedoch leer
bleiben. Das sollte bei allen Bildern einheitlich praktiziert werden.
3. Die vergrößerbare Grafik hat in der Vollbildansicht keinen Alternativtext.
1.3.1a HTML-Strukturelemente für Überschriften
https://www.ehrenamt-mit-blaulicht.sachsen.de/einsatzbereiche-3916.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

 
DZB Leipzig | BIKOSAX
Seite 5
untergeordnet und als
h3
ausgezeichnet werden. Das gilt auch für die Seite:
https://www.ehrenamt-mit-blaulicht.sachsen.de/institutionen-3968.html
und weitere Seiten
mit Ausklappelementen.
1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar
https://www.ehrenamt-mit-blaulicht.sachsen.de/ueber-die-kampagne-3979.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.ehrenamt-mit-blaulicht.sachsen.de/ueber-die-kampagne-3979.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.3.5a Eingabefelder zu Nutzerdaten vermitteln den Zweck
Bei der Abfrage von Nutzerdaten wie z.B. im Kontaktformular
https://www.ehrenamt-mit-
blaulicht.sachsen.de/newsletter.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:
aut ocompl et e=" f ami l y- name"
, E-Mail-Feld:
aut ocompl et e=" emai l "
.
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

 
DZB Leipzig | BIKOSAX
Seite 6
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.ehrenamt-mit-blaulicht.sachsen.de/newsletter.html
Der Fließtextlink:
"
Datenschutz sachsen.de
" hat zu seinem 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 Farbe vorhanden ist. Entweder den Kontrast erhöhen oder dem Link
eine zusätzliche Auszeichnung oder Markierung hinzufügen, gilt ebenso für die Links auf
dieser Seite:
https://www.ehrenamt-mit-blaulicht.sachsen.de/ehrenamt-in-der-nahe-
3973.html
.
2.1.1a Ohne Maus nutzbar
https://www.ehrenamt-mit-blaulicht.sachsen.de/blaulicht-aktuell-4059.html
:
In der Dialogbox zum Datenschutz ist der Schalter zur Datenschutzerklärung nicht mit der
Tastatur bedienbar. Den Schalter mit in die Tab-Reihenfolge aufnehmen.
2.4.2a Sinnvolle Dokumenttitel
https://www.ehrenamt-mit-blaulicht.sachsen.de/einsatzbereiche-3916.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

 
DZB Leipzig | BIKOSAX
Seite 7
sollte, wie auf der Startseite auch auf allen Unterseiten "Ehrenamt mit Blaulicht" enthalten.
Den individuellen Teil noch genauer beschreiben und den Titel z.B. ändern in: "Ehrenamt mit
Blaulicht - Einsatzbereiche | sachsen.de".
2.4.7a Aktuelle Position des Fokus deutlich
https://www.ehrenamt-mit-blaulicht.sachsen.de/blaulicht-aktuell-4059.html
issuu-
Dokument: Der Tastaturfokus innerhalb der Anwendung ist nicht immer deutlich und muss
nachgebessert werden. Eine Gestaltung wie beim Rest der Seite wäre gut.
3.3.1a Fehlererkennung
https://www.ehrenamt-mit-blaulicht.sachsen.de/newsletter.html
Die Fehlerbehandlung bei
Pflichtfeldern ist derzeit nur über das
r equi r ed-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 Browsers nutzt. Mindestens jedoch
bei komplexeren Formularen ist eine eigene Fehlerbehandlung notwendig.
3.3.2a Beschriftungen von Formularelementen vorhanden
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.

 
DZB Leipzig | BIKOSAX
Seite 8
4.1.1a Korrekte Syntax
4.1.2a Name, Rolle, Wert verfügbar
https://www.ehrenamt-mit-blaulicht.sachsen.de/einsatzbereiche-3916.html?
: Akkordeon-
Container: das Attribut
ar i a- expanded
ist sowohl beim aufklappbaren
a-Element
(Überschrift) als 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.ehrenamt-mit-blaulicht.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.

 
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