Das Prüfverfahren zur BITV


Sie sind hier: BIK BITV-Test > Prüfergebnisse > Regenbogenportal


Blättern: zum ersten Test zum vorhergehenden Test

Regenbogenportal

Prüfung

Anmerkungen zum Prüfgegenstand

Eine Cookie Nachricht war während der Testphase nicht vorhanden.

Ergebnis

0 von 6 Seiten BITV-konform

Geprüfte Seiten

Seite 1 (Startseite)

Seite 2 (Suche mit Filteroption)

Seite 3 (Slider)

Seite 4 (Detailseite)

Seite 5 (Akkordeon)

Seite 6 (Formular)

Bewertung und Anmerkungen zu einzelnen Prüfschritten

92 Prüfschritte prüfen 82 Anforderungen der BITV / EN 301 549.

Nicht erfüllt sind 18 von 92 Prüfschritten:

  • Prüfschritt 9.1.1.1a - Alternativtexte für Bedienelemente

    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
  • Prüfschritt 9.1.1.1c - Leere alt-Attribute für Layoutgrafiken

    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
  • Prüfschritt 9.1.3.1a - HTML-Strukturelemente für Überschriften

    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
  • Prüfschritt 9.1.3.1b - HTML-Strukturelemente für Listen

    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
  • Prüfschritt 9.1.3.1h - Beschriftung von Formularelementen programmatisch ermittelbar

    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
  • Prüfschritt 9.1.4.1 - Ohne Farben nutzbar

    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
  • Prüfschritt 9.1.4.13 - Eingeblendete Inhalte bedienbar

    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
  • Prüfschritt 9.2.1.1 - Ohne Maus nutzbar

    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
  • Prüfschritt 9.2.4.3 - Schlüssige Reihenfolge bei der Tastaturbedienung

    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
  • Prüfschritt 9.2.4.4 - Aussagekräftige Linktexte

    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
  • Prüfschritt 9.2.4.6 - Aussagekräftige Überschriften und Beschriftungen

    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
  • Prüfschritt 9.2.4.7 - Aktuelle Position des Fokus deutlich

    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
  • Prüfschritt 9.2.5.3 - Sichtbare Beschriftung Teil des zugänglichen Namens

    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
  • Prüfschritt 9.3.1.2 - Anderssprachige Wörter und Abschnitte ausgezeichnet

    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
  • Prüfschritt 9.3.2.3 - Konsistente Navigation

    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
  • Prüfschritt 9.4.1.1 - Korrekte Syntax

    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
  • Prüfschritt 9.4.1.2 - Name, Rolle, Wert verfügbar

    • 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.
  • Prüfschritt 11.7 - Benutzerdefinierte Einstellungen

    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

Erfüllt sind 28 von 92 Prüfschritten:

Nicht anwendbar sind 46 von 92 Prüfschritten:

Blättern: zum ersten Test zum vorhergehenden Test