Eine Cookie Nachricht war während der Testphase nicht vorhanden.
92 Prüfschritte prüfen 82 Anforderungen der BITV / EN 301 549.
-
Seite 2: nicht BITV-konform
- Die Pfeile zum Weiterblättern der "Weiteren Anlaufstellen" haben englische Textalternativen "Previous/Next", sollten aber auf Deutsch sein.
- Der Schließen Button (X) der Filteroptionen in der responsiven Ansicht hat eine englische Textalternative "Close".
Seite 3: nicht BITV-konform
- Pfeile zum Weiterblättern des Sliders siehe Seite 2.
- Schließen Button (X) für den Dialog "I" neben dem Suchbegriff Siehe Seite 2.
- Leerer Alternativtext Grafik "i" siehe Seite 1.
Seite 1: BITV-konform
- Der Alternativtext der Grafik "i" sollte leer sein
(alt="") da die Textalternative bereits über ein aria-label zur Verfügung gestellt wird. Eine Textalternative "Modal icon" ist in jedem Fall zu technisch und nicht aussagekräftig.
Seite 4, 5, 6: BITV-konform
-
Seite 2: BITV-konform
Die Grafiken vor den Ergebnissen für "Freizeitangebot", "Bildungsangebot" etc. sollten leere Alternativtexte haben. Sie wiederholen lediglich das, was direkt daneben steht. Redundanzen sollen vermieden werden.
Seite 1: nicht BITV-konform
Die erste Grafik mit dem Alternativtext:
"Zwei Personen, die zusammen über einen Laptop gebeugt an einem Tisch sitzen. Auf dem Tisch liegt ein Notizblock. Hinter dem Laptop steht eine Wasserflasche. Im Hintergrund ist ein großes Fenster. Rechts von dem Fenster steht eine Pflanze."
sollte ein leeres alt Attribut haben, wie auch die ähnlichen Grafiken im Auftritt. Die Grafik hat reinen Schmuck Charakter und keine inhaltliche Relevanz.
Seite 3, 4: BITV-konform
Seite 5, 6: nicht anwendbar
-
Seite 3: BITV-konform
- Leere
h2 über "Veranstaltungen und Bildungsangebote".
Seite 2: nicht BITV-konform
- Für Menschen ohne visuelle Wahrnehmung ist nicht deutlich, dass es sich bei den Schaltern "Thema" bis "Bundesland" um Filteroptionen handelt. Mit visueller Wahrnehmung wird dies durch den Schalter "Alle Filter zurücksetzen" deutlich der hinter den Filteroptionen steht. Es fehlt eine (unsichtbare) Überschrift
h2.
Als alternative und zu empfehlende Lösung kann auch die Liste der Filtermöglichkeiten mittels aria-describedby auf "Ergebnisse (nnn) verfeinern nach" verweisen. Siehe dazu https://www.w3.org/TR/WCAG20-TECHS/ARIA1.html - Sprung von
h1 "Anlaufstellen" auf h3 der Ergebnisse. Sinnvoll wäre hier eine (versteckte) h2 "Suchergebnisse" o.ä. - Die Dachzeilen der Ergebnisse sollen in die Überschriften integriert sein. Z.B. h3 Beratungsangebot 20099 Hamburg Antidiskriminierungsberatung /h3.
- Unter "Weitere Anlaufstellen":
"Über weitere Anlaufstellen... informieren" ist keine Überschrift und soll mit p ausgezeichnet sein. - Dachzeilen der Anlaufstellen siehe oben.
Seite 4: nicht BITV-konform
- Sprung von
h1 zu h3 und dann zu h6. Sprünge in der Überschriften Hierarchie sind zu vermeiden. Siehe richtige Umsetzung auf der Startseite. - "Quellen" ist nicht als Überschrift ausgezeichnet.
Seite 5: nicht BITV-konform
- Die Akkordeon Elemente (Begriffe) sind nicht als Überschriften mit
h2 ausgezeichnet.
Seite 1, 6: BITV-konform
-
Seite 3: BITV-konform
- Paginierung des Sliders siehe Seite 2.
Seite 2: nicht BITV-konform
- Bei dem Karussell "Weitere Anlaufstellen" befinden sich immer 5 Elemente in einem
li. Jedes Element soll in einem eigenen Listenelement stehen. Siehe dazu auch 9.4.1.2 - "Name, Rolle, Wert verfügbar". - Die Paginierung z.B. "1/17" soll nicht als Liste ausgezeichnet sein. Da die anderen Einträge mit
display: none versteckt sind, gibt ein Screenreader immer "Liste mit 1 Einträgen" aus. Das ist nicht sinnvoll. - Besser wäre, die "pagination"-Navigation für die Suchergebnisse als Liste auszuzeichnen. Siehe dazu
https://www.a11ymatters.com/pattern/pagination/.
Seite 4: nicht BITV-konform
- Die Quellen sind nicht als Liste ausgezeichnet.
Seite 1, 5, 6: BITV-konform
-
Seite 1: nicht BITV-konform
- Die Beschriftungen der Eingabefelder (Materialen bzw. Anlaufstellen finden) sind korrekt mittels
label/for mit den Eingabefeldern verknüpft, werden aber von den aria-label der Eingabefelder überschrieben. Die aria-label müssen entfernt werden.
Alternative Lösung: "Finden Sie ..." als Überschriften mit h2 auszeichnen aria-label der Suchfelder "Finden Sie geeignete Materialien und Informationen Suchbegriff eingeben".
Seite 2: nicht BITV-konform
Betrifft die responsive Ansicht (erscheint auch bei Vergrößerung auf dem Desktop):
- Das Suchfeld PLZ hat kein
aria-label. Siehe Umsetzung in der normalen Ansicht.
Seite 3: nicht BITV-konform
- Das Eingabefeld ist nicht wie auf Seite 1 mit dem
label verknüpft. Alternative Lösung siehe Seite 1. - Unter dem Suchfeld "Um die Ergebnisse weiter einzugrenzen..." ist nicht mit den Checkboxen mittels
fieldset/legend verknüpft
Seite 6: BITV-konform
Seite 4, 5: nicht anwendbar
-
Seite 2: nicht BITV-konform
- Nach Anwenden der Filteroptionen wird die Ergebnisseite neu geladen und die Bereiche der gewählten Filteroptionen sind grün hinterlegt. Für Menschen die Farben nicht gut wahrnehmen können ist eine zusätzliche Kennzeichnung notwendig oder der Kontrastunterschied zwischen den Zuständen beträgt mindestens 3,0:1. IST 1,3:1
Seite 5: BITV-konform
- Anders als auf Seite 2 erscheint hier zusätzlich ein Kreis um den Buchstaben.
Seite 1, 3, 4, 6: BITV-konform
-
Seite 4: nicht BITV-konform
- Die bei Fokuserhalt erscheinenden Begriffserklärungen (grün unterstrichene Links im Fließtext) lassen sich nicht schließen ohne den Fokus zu versetzen (z.B. über die ESC-Taste).
Seite 5: nicht BITV-konform
Siehe Seite 4.
Seite 1, 2, 3, 6: nicht anwendbar
-
Fließt in die Bewertungen aller Seiten:
Wenn die Seite nach unten gescrollt wir, verschwindet das Sprachmenü und ist über die Tastatur nicht mehr erreichbar.
Seite 2: nicht BITV-konform
- In der responsiven Ansicht sind die Schalter "weitere Filter" in den Filteroptionen und am Ende der Filteroptionen "Filter zurücksetzen" nicht über die Tastatur bedienbar. Es fehlt die Auszeichnung mit
tabindex="0" und bei "Filter zurücksetzen auch role="button".
Seite 1, 3, 4, 5, 6: BITV-konform
-
Seite 2: nicht BITV-konform
- Der Link "Angebote ohne PLZ" über den Filteroptionen schiebt zwar die "Anlaufstellen ohne Vor Ort Beratung" in den Viewport, mit dem nächsten Tab wird dann aber nicht das erste fokussierbare Element dieser Anlaufstellen fokussiert, sondern die erste Filteroption "Thema".
- Nach Anwenden eines Filters wird die Seite neu geladen und der Fokus wird an den Anfang der Seite gesetzt. Hilfreich wäre ein entsprechender Hinweis z.B. in einem
title Attribut des Schalters.
Hinweis: Die Filteroptionen in der responsiven Ansicht sind deutlich nutzerfreundlicher. Dort wählt man alle Filter aus allen Kategorien und wendet dann den Filter einmal auf alle Optionen an. Das lästige Neuladen der Seite passiert dann nur einmal. - Karussell "Weitere Anlaufstellen:
Die Tastaturreihenfolge ist schwer nachvollziehbar. In der "normalen" (nicht responsiven) Ansicht sind 3 Sliderelemente sichtbar. Bei der Bedienung über die Tabulator Taste schiebt sich dann das 4. und 5. Element in den Viewport, jeweils am Ende abgeschnitten. Nach dem 5. Element springt der Fokus aus dem Slider und die Paginierung wird fokussiert. Eine nachvollziehbare Reihenfolge wäre z.B. alle 17 Slider Elemente automatisch nacheinander über die Tastatur in den Viewport zu bringen, ohne dass dabei der aktuell fokussierte Slider abgeschnitten wird.
In der responsiven Ansicht wird nur 1 Sliderelement gezeigt, der Fokus wandert aber durch alle 17 Sliderelemente im Hintergrund, ohne dass die Slider dabei sichtbar sind. Siehe dazu auch Prüfschritt 9.1.3.1b "HTML-Strukturelemente für Listen". - In der responsiven Ansicht steht "Alle Filter zurücksetzen" im Code vor dem Schalter zum Öffnen der Filteroptionen. Das ist nicht sinnvoll und folgt auch nicht der visuellen Reihenfolge.
- Responsive Ansicht / Filtereinstellungen - Die Checkboxen in den Bereichen "Lebensbereich", "Angebotsart" und "Bundesland" bekommen durch die Auszeichnung des labels mit
tabindex="0" den Tastaturfokus zwei Mal.
Seite 1: nicht BITV-konform
- Der bounce-arrow hat keine sinnvolle Funktion. Er versetzt den Fokus lediglich dahin, wo der Fokus mit dem nächsten Tab eh landet. Das ist etwas irritierend, besonders aber für Screenreadernutzer, weil die Textalternative "zu ausgewählten Beiträgen" lautet.
Seite 6: nicht BITV-konform
Die Tastaturreihenfolge nach Auswahl des Formulars "Material empfehlen" entspricht nicht dem erwarteten Verhalten. Nach Auswahl des Formulars sollte der Fokus in den Inhaltsbereich des Formulars versetzt werden und nicht wie hier zur Auswahl des anderen Formulars "Anlaufstelle ... empfehlen". Siehe dazu auch Prüfschritt 9.4.1.2 - "Name, Rolle, Wert verfügbar".
Seite 5: BITV-konform
- Nach Auswahl eines Buchstabens wird die Seite neu geladen. Hilfreich wäre ein entsprechender Hinweis.
Seite 3, 4: BITV-konform
-
Seite 3: nicht BITV-konform
Bei den Download Links im Slider fehlt ein Hinweis auf das PDF Format.
Seite 1, 2, 4, 5, 6: BITV-konform
-
Seite 1: nicht BITV-konform
- "Finden Sie eine Anlaufstelle in Ihrer Nähe":
Es fehlt "Postleitzahl" in der Beschriftung. Nach Eingabe eines Zeichens in das Eingabefeld, ist die Textvorbelegung nicht mehr sichtbar. Wenn hier z.B. ein Städtename eingegeben wird, bekommt man eine falsche Ergebnisliste.
Seite 2, 3, 4, 5, 6: BITV-konform
-
Fließt in die Bewertungen aller Seiten:
Bei der Vergrößerung auf dem Desktop öffnet sich die responsive Ansicht. In der geöffneten Hauptnavigation wird der Fokus durch einen roten Rahmen auf dunkelgrünen Hintergrund dargestellt. Kontrastverhältnis IST 1,1:1; SOLL 3,0:1.
Seite 2: nicht BITV-konform
- Nach dem Schließen einer Filteroption wird der Fokus zwar auf den Schalter zum Öffnen zurückversetzt, der Fokus ist dabei aber nicht sichtbar.
- Die Fokushervorhebung für den "Teilen" Schalter neben den Filterergebnissen erstreckt sich über den gesamten Bildschirm. Das erschwert die Orientierung.
Seite 1, 3, 4, 5, 6: nicht BITV-konform
-
Fließt in die Bewertungen aller Seiten:
Bei Aufruf der Seite ist die sichtbare Beschriftung des Logos "Bundesministerium für Familie, Senioren, Frauen und Jugend". Der zugängliche Name wird von assistiven Technologien bei Grafiken über das alt Attribut ermittelt. IST: "BMFSFJ" SOLL: "Bundesministerium für Familie, Senioren, Frauen und Jugend".
Seite 1, 2, 3, 4, 5, 6: nicht BITV-konform
-
Seite 2: nicht BITV-konform
- Die englischsprachigen Filterergebnisse z.B. nach Eingabe der PLZ 45438 "together place to meet place to be", "Queer of Color Group" benötigen eine Sprachauszeichnung mit
lang="en".
Seite 1, 3, 4, 5, 6: nicht anwendbar
-
Seite 4: nicht BITV-konform
Bei Aktivierung der fettdargestellten grün unterstrichenen Begriffe landet man auf der Seite, wo dieser Begriff erklärt wird. Der Breadcrumb dieser Zielseite lautet Startseite Glossar und auch die h1 der Seite heißt "Glossar". Folgt man aber dem Breadcrumb von der Startseite und dann dem Link im Footer "Glossar", landet man auf einer ganz anderen Seite, nämlich der Seite 5 https://www.regenbogenportal.de/glossar.
Seite 1, 2, 3, 5, 6: BITV-konform
-
Die Prüfung erfolgt mit https://validator.w3.org/nu über das Bookmarklet "Check serialized DOM of current page". Die Ergebnisse werden danach mit "Check for WCAG 2.0 parsing compliance" gefiltert (siehe: https://validator.w3.org/nu/about.html#extras). Es werden nur WCAG relevante Fehler berücksichtigt.
Die Bookmarklets können von folgender Seite installiert werden: https://www.bitvtest.de/bitv_test/das_testverfahren_im_detail/werkzeugliste.html
Seite 3: nicht BITV-konform
Das Sucheingabefeld ist mit additionalattributes ausgezeichnet. Die Auszeichnung soll ersatzlos gestrichen werden. Siehe dazu auch Prüfschritt 9.1.3.1h - "Beschriftung von Formularelementen programmatisch ermittelbar".
Seite 2: nicht BITV-konform
Seite 1, 4, 5, 6: BITV-konform
-
- Das
aria-haspopup Attribut ist nur für Application Menüs vorgesehen. Da die Hauptnavigation ein ganz normales Navigations Menü ist, sollte das Attribut entfernt werden. Siehe dazu https://www.w3.org/TR/waiaria-
1.1/#aria-haspopup.
Fließt in die Bewertungen der Seiten 2 - 6:
- Die Social Media Buttons unter dem "Teilen" Schalter am Ende der Seiten sind mit der falschen Rolle
dialog ausgezeichnet. Hier ist keine zusätzliche Rolle notwendig. - Die korrekte native Rolle Link wird bei den Social Media Links mit
role="button" überschrieben.
Seite 1: nicht BITV-konform
- Die Bereitstellung der Textalternativen für die Hashtags in der Schlagwortsuche ist nicht richtig umgesetzt. Möglich ist dies z.B. durch die Auszeichnung des Hashtags mit
role="img" oder einem aria-label auf dem Link z.B. "Hashtag Behinderung".
Seite 2: nicht BITV-konform
- Nach Anwenden der Filteroptionen wird die Ergebnisseite neu geladen und die Bereiche der gewählten Filteroptionen sind grün hinterlegt. Diese Informationen müssen auch Screenreadernutzern zur Verfügung gestellt werden.
Z.B. könnte entsprechender versteckter Text mittels aria-describedby mit den Schaltern verknüpft sein. - "Teilen" Schalter neben den Anlaufstellen siehe allgemeine Anmerkungen.
- Bei der Seitennavigation unter den Filteroptionen sollte die aktuelle Seite in der Tastaturreihenfolge bleiben und mit
aria-current="page" ausgezeichnet sein. - Die fokussierbaren Ziffern für die Seitenauswahl sind als
span Elemente umgesetzt. Es fehlt die passende Rolle Link. - Falsche Rolle
listbox für die Elemente des Karussells "Weitere Anlaufstellen". listbox ist für Auswahloptionen wie bei einem select. Siehe dazu auch Prüfschritt 9.1.3.1b - "HTML-Strukturelemente für Listen" und https://inclusivecomponents.design/a-content-slider/ - In der responsiven Ansicht sind bis auf "Thema" die Checkboxen bzw. deren label nicht richtig umgesetzt. Die
label sind mit tabindex="0" ausgezeichnet. Bei Aktivierung wird die Checkbox markiert, es wird aber der Zustand in Screenreadern falsch ausgegeben.
Seite 3: nicht BITV-konform
- Der "i" Schalter ist nicht als
button ausgezeichnet. Das aria-expanded wird erst nach dem Öffnen hinzugefügt und hat den falschen Wert false.
Die Bedienung des Schließen Schalters ist inkonsistent. Mit zugeschaltetem Screenreader (getestet mit NVDA 2020.4 im Mozilla FireFox 87 Browser) lässt sich der Dialog nicht immer über das Kreuz schließen. Mit der ESC-Taste geht es aber.
Seite 4: nicht BITV-konform
- Zur richtigen Umsetzung für die Textalternativen der Hashtags vor den Schlagwörtern am Ende der Seite siehe Seite 1.
Seite 5: nicht BITV-konform
- Der gewählte Buchstabe erscheint nach dem Neuladen mit einem grünen Hintergrund und ist für Menschen mit visueller Wahrnehmung als aktueller Buchstabe erkennbar. Diese Information muss auch Screenreadern über
aria-current="true" zur Verfügung gestellt werden. - Die inaktiven Buchstaben sind ausgegraut und sollten vor Screenreadern mit
aria-hidden="true" versteckt werden. Da die Buchstaben als Liste ausgezeichnet ist, gäbe dann auch ein Screenreader nur die Anzahl der nicht ausgegrauten Buchstaben aus. - Die Akkordeon Elemente (Begriffe) sind nicht als
button mit aria-expanded ausgezeichnet. Siehe dazu https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html und Prüfschritt 9.1.3.1a - "HTML-Strukturelemente für Überschriften".
Seite 6: nicht BITV-konform
- Die Auswahl eines Formulars "Material empfehlen" oder "Anlaufstelle / ... empfehlen" ist ein Tabpanel und benötigt eine entsprechende Umsetzung. Siehe dazu https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html und auch https://inclusive-components.design/tabbed-interfaces.
Zur erwarteten Tastaturreihenfolge siehe auch Prüfschritt 9.2.4.3 - "Schlüssige Reihenfolge bei der Tastaturbedienung. - Falsche Auszeichnungen als
nav Bereich und role="toolbar" des "Nachricht absenden" Schalters.
-
Fließt in die Bewertungen aller Seiten:
Im Browser festgelegte benutzerdefinierte Farben und Schriftarten werden übernommen, nicht aber benutzerdefinierte Schriftgrößen.
Seite 1, 2, 3, 4, 5, 6: nicht BITV-konform
