Das Prüfverfahren zur BITV

Sie sind hier: BITV-Test > Prüfergebnisse für Webauftritte (Alle Tests) > Stark im Beruf

Blättern: zum ersten Test zum vorhergehenden Test zum nächsten Test zum letzten Test

Stark im Beruf

Prüfung

Anmerkungen zum Prüfgegenstand

Zum Zeitpunkt der Prüfung ist kein Cookie-Banner vorhanden.

Ergebnis

0 von 7 Seiten BITV-konform

Geprüfte Seiten

Seite 1 (Startseite)

Seite 2 (Aktuelles)

Seite 3 (Teaser (Praxisbeispiele))

Seite 4 (Video)

Seite 5 (Zahlen, Anteile)

Seite 6 (Newsletter)

Seite 7 (Projekt-Landkarte)

Bewertung und Anmerkungen zu einzelnen Prüfschritten

60 Prüfschritte prüfen 50 Anforderungen der BITV.

Nicht erfüllt sind 16 von 60 Prüfschritten:

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

    • Hinweis ohne negative Bewertung: Das title-Attribut ist laut Spezifikation für zusätzliche Informationen gedacht, die auch für Sehenden hilfreich sind. Es sollte nicht den Linktext oder den alt-Text wiederholen oder unnötigen ähnlichen Text bereitstellen. Es kann sonst zu langen, störenden Ausgaben im Screenreader kommen.
    • Anmerkung ohne negative Bewertung an dieser Stelle, siehe aber 2.5.3a: Navigation für kleine Bildschirme ("responsive Ansicht"): Der Menü-Button ist bereits ausreichend mit "Menü" beschriftet. Das aria-label "Mobile Navigation" sollte entfernt werden, es überschreibt die vorhandene Beschriftung und verursacht Probleme hinsichtlich Prüfschritt 2.5.3a. Es sollte hier kein aria-label-Attribut eingesetzt werden. Ist bereits eine ausreichende, sichtbare programmatische Beschriftung vorhanden, kann es durch einen falschen Einsatz leicht zu Problemen an anderer Stelle führen.
    Seite 7: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    • Das Icons "x" (Schließen-Schalter des eingeblendeten Inhalts "Projekt-Landkarte") bzw. das "i"-Icon ist per CSS Generated Content eingebunden und muss für Screenreader verborgen werden. NVDA (Firefox) liest die Glyphe vor (Ausgabe "j" bzw. "9").
    • Das "i" neben "Suchergebnisse als CSV-Datei" hat die Textalternative "Information öffnen", auch wenn die Information bereits geöffnet ist. Das ist verwirrend, denn der Bezug des Schalters zu der Infobox ist bei nicht-visueller Nutzung nur schwer zu erkennen. Besser wäre "Informationen zur Projekt-Landkarte öffnen".
      Zusätzlicher Hinweis ohne Bewertung, betrifft alle Nutzenden: Insbesondere aufgrund des schwer herstellbaren Zusammenhangs Schalter - Infobox, ist die Dysfunktionalität des Schalters bei eingeblendetem Inhalt schwer verständlich.
    • Das Icon Briefumschlag in der Infobox "Projekt-Landkarte" sollte vor Screenreadern versteckt sein.
    • Filteroptionen, "i"-Icon: Die Beschriftung des "i"-Buttons lautet "Region???bmfsfj.infoTooltip.label???" bzw. ""Thema???bmfsfj.infoTooltip.label???" etc. Das ist nicht aussagekräftig und verständlich.
    Seite 1, 2, 3, 4, 5, 6: BITV-konform

  • Prüfschritt 1.3.1a - HTML-Strukturelemente für Überschriften

    Seite 4: nicht BITV-konform
    • Bei den Überschriften oberhalb der Ausklapp-Elemente ("Weitere Infos zum Video....") handelt es sich um h3-Überschriften. Um dies umzusetzen, sollte der Text der h2-Überschriften ("Weitere Infos zum Video...") Inhalt der derzeit leeren h3-Überschriften (Ausklappelemente) sein. Damit wäre dann auch ein zugänglicher Name vorhanden (siehe 4.1.2a). Die h2-Überschriften "Weitere Infos..." sollten entfernt werden.
      d.h. [ h3 ] [ button ] Weitere Infos zum Video: Stark im Beruf – Starke Unternehmen [/ button ][/ h3 ]
    Seite 7: nicht BITV-konform
    • "Projekt-Landkarte" (eingeblendeter Inhalt über der Karte) sollte als Überschrift ausgezeichnet sein.
    • Bei den Links der Projektprofile handelt es sich semantisch nicht um Überschriften. Es folgt jeweils kein Inhalt. Das Überschriften-Markup sollte entfernt werden. Sie sollten als Liste ausgezeichnet sein. Siehe Prüfschritt 1.3.1b.
    Seite 3: BITV-konform
    • Sprung von h1 nach h3 nach der Hauptinhaltsüberschrift.
    Seite 1, 2, 5, 6: BITV-konform

  • Prüfschritt 1.3.1b - HTML-Strukturelemente für Listen

    Seite 7: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    • Die Linkliste der Projektprofile ist nicht als Liste ausgezeichnet.
    Seite 1, 2, 3, 4, 5, 6: BITV-konform

  • Prüfschritt 1.3.1e - Datentabellen richtig aufgebaut

    Seite 7: nicht BITV-konform
    • Ansicht für kleine Bildschirme ("responsive Ansicht"): Die Tabelle erscheint hier visuell nicht mehr als Tabelle, ist aber noch so ausgezeichnet.
      Eine Tabellen-Navigation im Screenreader funktioniert nicht mehr. D.h. beispielsweise von PLZ kann man nicht eine Zelle nach unten navigieren und ist dann in einer Datenzelle PLZ. Hinsichtlich einer Optimierung siehe https://adrianroselli.com/2017/11/a-responsive-accessible-table.html#Example
    Seite 5: BITV-konform
    Seite 1, 2, 3, 4, 6: nicht anwendbar

  • Prüfschritt 1.3.1h - Beschriftung von Formularelementen programmatisch ermittelbar

    Seite 7: nicht BITV-konform
    • Filteroptionen, "Region", Radio-Buttons: Die Hinweise, die visuell wie Textvorbelegungen wirken, (z.B. „Bitte 5-stellige Postleitzahl eingeben“, „Bitte 3-stellige Nummer des Wahlkreises eingeben“ etc.), werden bei Fokussierung der Felder nicht vorgelesen. Eine Möglichkeit wäre, das label zu erweitern (mit verstecktem Text oder mit Hilfe von aria-labelledby).
    • Nach Auswahl eines Radio Buttons ist bei Fokussierung des entsprechenden Eingabefeldes die programmatische Beschriftung nicht korrekt. Die programmatische Beschriftung sollte gleichlautend mit der Beschriftung des Radio Buttons sein. Derzeit lautete sie, egal welche Option ausgewählt wurde, jeweils "Region".
    • Bei Auswahl des Themas "Kinder und Jungend" gibt es die Schaltfläche "Sprach-Kitas", die das Feld "Einrichtungsart" einblendet. "Einrichtungsart" hat kein verknüpftes label.
    Seite 6: BITV-konform
    Seite 1, 2, 3, 4, 5: nicht anwendbar

  • Prüfschritt 1.3.2a - Sinnvolle Reihenfolge

    Seite 4: nicht BITV-konform
    • Das Video sollte im DOM unterhalb der Überschrift (oder unterhalb von Überschrift + Absatz) positioniert sein. Somit wäre für einen Screenreadernutzer leichter verständlich, was für ein Video ihn erwartet. Alternativ wäre es möglich, den Abspielen-Button aussagekräftiger zu beschriften (z.B. "Video Stark im Beruf – Starke Unternehmen abspielen").
    Seite 7: nicht BITV-konform
    • Auf Grund des inkonsistenten Verhaltens der "i"-Buttons in den Filteroptionen (die Popups werden manchmal bei Fokuserhalt automatisch vom Screenreadern ausgegeben, manchmal nur das label) muss der Inhalt der Infos nach dem auslösenden Element zum Öffnen im DOM platziert sein, damit bei nicht automatischer Ausgabe Screenreadernutzer mit der Pfeil-nach-unten Taste an den Inhalt gelangen.
    Seite 1, 2, 3, 5, 6: BITV-konform

  • Prüfschritt 1.4.11a - Kontraste von Grafiken und grafischen Bedienelementen ausreichend

    Seite 7: nicht BITV-konform
    • Das "i"-Icon hat einen Kontrast von nur 1,9:1. Gefordert sind 3,0:1.
    • Die Formularfelder der eingeblendeten Filteroptionen haben einen Kontrast von 1,2:1. Er sollte 3,0:1 betragen.
    Seite 1, 2, 3, 4, 5, 6: BITV-konform

  • Prüfschritt 1.4.12a - Textabstände anpassbar

    Seite 7: nicht BITV-konform
    • iframe Projektlandkarte: Der Schalter Filteroptionen ist bei Anwendung des Bookmarklets nicht mehr sichtbar (zur Prüfung wurde das iframe separat aufgerufen).
    Seite 1, 2, 3, 4, 5, 6: BITV-konform

  • Prüfschritt 1.4.3a - Kontraste von Texten ausreichend

    Seite 7: nicht BITV-konform
    • Suchvorschläge in der Filteroption "Programm" (nach Eingabe von "Kinder und Jugend" bei "Thema"): Im fokussierten Zustand kontrastiert der Text der ausgewählten Option zu schlecht (grau/weinrot). IST 1,4:1. SOLL 4,5:1.
    Seite 1, 2, 3, 4, 5, 6: BITV-konform

  • Prüfschritt 2.4.3a - Schlüssige Reihenfolge bei der Tastaturbedienung

    Mobile Ansicht:

    • Betrifft alle Seiten außer Seite 1: Die Tabreihenfolge entspricht nicht der visuellen Reihenfolge. Das bedeutet, der Menü-Schalter wird zuerst fokussiert, dann springt der Fokus ganz nach links zum Logo "Stark im Beruf", es folgt das Logo "BMBFSJ".
    • Betrifft alle Seiten: Zwischen Menü-Schaltfläche und den beiden Logos gibt es über 2 Stationen unsichtbare Tabstationen. Es handelt sich dabei um die beiden Links "Leichte Sprache" und "Gebärdensprache" der Standardansicht, die nur visuell und nicht für alle Nutzenden versteckt wurden (z.B. mit diplay:none ).
    Seite 1: nicht BITV-konform

    Siehe allg. Anmerkung.

    Seite 2: nicht BITV-konform

    Siehe allg. Anmerkung.

    Seite 3: nicht BITV-konform

    Siehe allg. Anmerkung.

    Seite 4: nicht BITV-konform

    Siehe allg. Anmerkung.

    Seite 5: nicht BITV-konform

    Siehe allg. Anmerkung.

    Seite 6: nicht BITV-konform

    Siehe allg. Anmerkung.

    Seite 7: nicht BITV-konform

    Siehe allg. Anmerkung.

    • Die Infobox ist default-mäßig eingeblendet. Derzeit kommt es zu Überlagerungen, wenn die Filteroptionen eingeblendet werden. Um die Filteroptionen nutzen zu können, muss der Nutzer die eingeblendete Infobox zuerst schließen. Dazu sind derzeit mehrere Tab-Schritte vorwärts nötig und dann wieder zurück zum Filtermodul. Das ist umständlich und schwierig zu verstehen. Eine Möglichkeit wäre, wie unter "Sinnvolle Reihenfolge" beschrieben wäre, den den "i-"-Button zum Öffnen/Schließen der Infobox "Projekt-Landkarte" VOR den Button "Filteroptionen" zu platzieren. Somit hat der Nutzer die Möglichkeit, die Infobox auszublenden BEVOR er die Filteroptionen einblendet. Dazu müsste er außerdem voll umfänglich als show/hide-Button umgesetzt werden (siehe Prüfschritt „Name, Rolle, Wert“).

  • Prüfschritt 2.4.6a - Aussagekräftige Überschriften und Beschriftungen

    Seite 7: nicht BITV-konform
    • Filteroptionen: Bei Auswahl des Themas "Kinder und Jungend" gibt es die Schaltfläche "Sprach-Kitas", die das Feld "Einrichtungsart" einblendet. Um die Aussagekraft der Schaltfläche zu gewährleisten, ist die Beschriftung um den Text "Zusätzliche Filteroptionen" zu erweitern (z.B. mit aria-labelledby ).
    Seite 1, 2, 3, 4, 5, 6: BITV-konform

  • Prüfschritt 2.4.7a - Aktuelle Position des Fokus deutlich

    Seite 7: nicht BITV-konform
    • Die Fokushervorhebung ist auf folgenden Elementen nicht ausreichend. Der Systemkranz kontrastiert zum Hintergrund zu schwach. IST 1,8:1 SOLL 3,0:1.
      "Liste", "Filteroptionen", Schaltflächen "Vollbild", "+", "-", "i", "Suchergebnisse als CSV-Datei" und "x"-Schaltfläche des Dialogs "Projektlandkarte".
    • Innerhalb der Einblendung "Filteroptionen": Die Fokushervorhebung für die "i"-Icons, den ersten fokussierten Radio-Button und den Button "Auswahl übernehmen" ist mit einem Kontrast von 1,9:1 zu schwach. SOLL 3,0:1.
    • Die Kreuze zum Schließen der eingetragenen Optionen in den Eingabefeldern werden bei Fokuserhalt über die Tastatur mit einem blauen Kranz gekennzeichnet. Der blaue Kranz hat zu dem grauen Hintergrund ein Kontrastverhältnis von 1,6:1 SOLL 3,0:1
    • In der Listendarstellung (Tabelle): Die Fokushervorhebung auf den Sortier-Links (blau/grau) kontrastiert mit 2,6:1 zu schwach. SOLL 3,0:1.
    Seite 1, 2, 3, 4, 5, 6: BITV-konform

  • Prüfschritt 2.5.3a - Sichtbare Beschriftung Teil des zugänglichen Namens

    Die sichtbare Beschriftung der responsiven Hauptnavigation lautet "MENÜ". Der zugängliche Name aber „Mobil-Navigation“. Damit die Bedienung auch über Spracheingabe funktioniert, muss mindestens die sichtbare Beschriftung im zugänglichen Namen enthalten sein. Das aria-label-Attribut sollte einfach entfernt werden. Es ist überflüssig.

    Seite 1, 2, 3, 4, 5, 6, 7: nicht BITV-konform

  • Prüfschritt 3.2.2a - Keine unerwartete Kontextänderung bei Eingabe

    Seite 7: nicht BITV-konform
    • Befindet man sich in der Listenansicht und führt eine Filterung aus, landet man nach Abschicken der Formulars in der Kartenansicht. Filtert man noch einmal, befindet man nach Abschicken des Formulars wieder in der Listenansicht. Dies ist nicht zu erwarten.
    Seite 6: BITV-konform
    Seite 1, 2, 3, 4, 5: nicht anwendbar

  • Prüfschritt 3.3.1a - Fehlererkennung

    Seite 7: nicht BITV-konform
    • Wird in den Eingabefeldern "Region" ein Fehler gemacht, erfolgt keine Ausgabe der Fehlermeldung.
    Seite 6: BITV-konform
    Seite 1, 2, 3, 4, 5: nicht anwendbar

  • Prüfschritt 4.1.2a - Name, Rolle, Wert verfügbar

    • Servicenavigation, betrifft aber vor allem die Hauptnavigation: Die Navigation ist mit menu / menubar ausgezeichnet. Die Auszeichnung ist jedoch nicht korrekt umgesetzt, was zu einer Ausgabe im Screenreader führt, die nicht dem erwarteten Verhalten entspricht und eher verwirrend ist (z.B. gibt der Screenreader JAWS bei Fokuserhalt aus, dass der Schalter mit der Leertaste geöffnet werden kann und anschließend mit den Pfeiltasten navigiert werden soll. Das funktioniert aber nicht).
      Vergleiche Auszeichnung und Ausgabe Beispiel "Navigation Menubar: https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html
      Sinnvoller wäre es, die Hauptnavigation nicht als menubar auszuzeichnen (besser und einfacher mit Show/hide-Button und aria-expanded). Laut ARIA Spezifikation ist menu / menubar eher Werkzeugleisten die denen von Desktop-Anwendungen ähneln, vorbehalten: "The menubar role is used to create a menu bar similar to those found in Windows, Mac, and Gnome desktop applications." siehe https://www.w3.org/TR/wai-aria-1.1/#menubar. Wenn diese Form der Auszeichnung beibehalten wird, soll sie entsprechend der Auszeichnung der Authoring Practices umgesetzt werden.
      Die in den Authoring Practices beschriebene Tastaturbedienung muss ebenfalls gewährleistet sein (Pfeiltasten-Navigation), zusätzliche Tab-Funktionalität ist nicht falsch.
    Seite 7: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    • Das "i"-Icon, das die Infobox Projekt-Landkarte einblendet, sollte aussagekräftiger beschriftet sein (siehe Bewertung 1.1.1a). Der Button sollte als show/hide-Button mit aria-expanded ausgezeichnet sein. Das ist insbesondere sinnvoll, weil man so den bereits eingeblendeten Inhalt (der die Filteroptionen überlagert) schnell ausblenden kann.
    • Filteroptionen, "i"-Icon: Der "i"-Button, der Info-Inhalte einblendet, sollte mit aria-expanded ausgezeichnet sein, dadurch wird der Zustand vermittelt, ob der Infotext eingeblendet ist, oder nicht. Außerdem sollte der Info-Text im DOM nach dem auslösenden Element stehen (siehe Prüfschritt "Sinnvolle Reihenfolge"), damit ein Nutzender nach der Einblendung mit den Pfeiltasten den Inhalt lesen kann. Das Popup sollte sich außerdem automatisch schließen, wenn man weiter tabbt.
      Anmerkung: Das Verhalten des "i"-Buttons ist inkonsistent. Die Popups werden manchmal bei Fokuserhalt automatisch vom Screenreadern ausgegeben, manchmal nur das label. Wenn die Popups bei Fokussierung konsistent ausgegeben würden, müssten sie auch eingeblendet werden. Ein aktives Einblenden, wie zuerst beschrieben, hätte den Vorteil, dass der Nutzer bewusst entscheiden kann, ob er Inhalt lesen will oder nicht.
    • Filteroptionen "Thema" und "Programm": Die Live Region, die die Anzahl der Resultate des Autosuggests ansagt, ist in englischer Sprache und insbesondere durch die deutsche Ausgabe im Screenreader schwer zu verstehen. Der Text sollte in deutscher Sprache zur Verfügung gestellt werden.
      Mit Jaws 2021 (Firefox und Edge/Chrome) erfolgt keine Ausgabe.
    • Filteroptionen "Thema" und "Programm":
      FF/NVDA: Navigiert man zu den Vorschlägen, werden diese nicht vorgelesen. Es wird nur das Eingabe (Wort oder die eingegebenen Buschstaben) vorgelesen. JAWS/Chrome: Die Vorschläge werden vorgelesen, aber nicht übernommen. Insgesamt funktioniert es nicht gut.
    • Sortierfunktion der Tabelle: Bzgl. der Spaltenköpfe ( th ) muss vermittelt werden, dass sortiert werden kann, und auch in welcher Richtung. Dies kann z.B. mit aria-sort erfolgen. Mit dem entsprechenden Wert kann angegeben werden, ob Elemente in einer Tabelle in aufsteigender oder absteigender Reihenfolge sortiert werden.
    Seite 1: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 2: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 3: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    • Ausklapp-Elemente "Weitere Infos zum Video...": Aufgrund des leeren button bzw. h3-Elements, ist kein zugänglicher Name verfügbar. Siehe Bewertung bei 1.3.1a HTML-Elemente für Überschriften.
    Seite 4: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 5: nicht BITV-konform

    Siehe allgemeine Anmerkung.

    Seite 6: nicht BITV-konform

    Siehe allgemeine Anmerkung.

Erfüllt sind 30 von 60 Prüfschritten:

Nicht anwendbar sind 14 von 60 Prüfschritten:

Blättern: zum ersten Test zum vorhergehenden Test zum nächsten Test zum letzten Test

© DIAS GmbH v 4.0| Impressum

nach oben