Das Prüfverfahren zur BITV


Sie sind hier: BIK BITV-Test > Prüfergebnisse > Arbeiten in Elmshorn


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

Arbeiten in Elmshorn

Prüfung

Anmerkungen zum Prüfgegenstand

Für Nutzer:innen gibt es ein grundsätzliches Usability-Problem: Die Auswahl des jeweiligen Bereichs über das Menü im Fußbereich ändert zwar das Video, um zu den eigentlichen Seiten-Inhalten zu gelangen, muss jedoch immer erst mal gescrollt werden. Das Element zum Scrollen (relativ unauffällig, weiß, über auf hellem Hintergrund) kann sehr leicht übersehen werden. (Normativ erfasst ist dies im Prüfschritt 9.1.4.3 Kontraste von Texten ausreichend.) Besonders für sehbehinderte Nutzer mit Vergrößerungssoftware entstehen hier Orientierungsprobleme.

Aus Nutzersicht würde ein deutliche Anzeige der jeweiligen Inhalte mehr bringen als die großflächigen dekorative Videos. Zumindest sollte das Element zum Scrollen nicht nur durchgehend ausreichend kontrastreich (also mit eigenem Hintergrund), sondern sehr viel deutlicher hervorgehoben sein (ggf. auch durch eine initiale Animation beim Laden der Seite - diese müsste nach spätestens 5 Sek. enden). Das Problem der inkonistenten, vom Scrollzustand der Seite abhängigen Navigation ist normativ erfasst im Prüfschritt 9.3.2.3 Konsistente Navigation.

Ergebnis

0 von 5 Seiten BITV-konform

Geprüfte Seiten

Seite 1 (Startseite)

  • Titel: Startseite | Stadtverwaltung Elmshorn Karriereseite
  • URL: https://arbeiten-in-elmshorn.de/
  • Ergebnis: nicht BITV-konform, 18 von 92 Anforderungen nicht erfüllt
Screenshot: Startseite - öffnet vergrößerte Ansicht

Seite 2 (Arbeitgeberin)

Screenshot:  - öffnet vergrößerte Ansicht

Seite 3 (Jobs)

Screenshot:  - öffnet vergrößerte Ansicht

Seite 4 (Tarifverträge)

Screenshot:  - öffnet vergrößerte Ansicht

Seite 5 (Fach- und Führungspositionen)

Screenshot:  - öffnet vergrößerte Ansicht

Bewertung und Anmerkungen zu einzelnen Prüfschritten

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

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

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

    • Das Logo Der Stadt Elmshorn sollte den Namen der Stadt im Alternativtext haben, z.B. "Elmshorn - zur Startseite". Vergl. auch Anforderung 9.2.5.3 "Beschriftung im zugänglichen Namen".
    • Das Hamburger-Menü ist derzeit über aria-label="Toggle navigation" beschriftet. Dieser Name ist nicht gut verständlich.
    Seite 3: nicht BITV-konform
    • Die Blätter-Symbole unterhalb der Stellenanzeigen-Ergebnistabelle haben keine zugängliche Beschriftung, z.B. über zugänglich versteckten Text oder aria-label.
    • Pop-up Dialog "Stellenangebote abonnieren": das Schließen-Element hat keinen zugänglichen Namen.
    • CAPTCHA-Grafik ohne sinnvollen Alternativtext (z.B. "abgebildete Zeichenfolge ins Textfeld für den CAPTCHA Code eintragen").
    • CAPTCHA-Refresh-Link ohne zugänglichen Namen.

    Vergl. auch allgemeine Anmerkungen.

    Seite 1: nicht BITV-konform
    • Da die Fotos in den Teaserblöcken in der gewählten Umsetzung vor jedem der Links getrennt aber mit gleichem Linkziel fokussiert werden, müssen die Alternativtexte vor allem genau wie der dann folgende Textlink das Linkziel beschrieben. Eine zusätzliche Beschreibung des Bildinhalts ist möglich, die Bilder haben jedoch kaum einen eigenen relevanten Informationsgehalt. Bei einer Zusammenfassung der Teaserblöcke in einen Link (vergl. das Card-Pattern https://inclusive-components.design/cards/ und Hinweise in Prüfschritt 9.2.4.3 Fokusreihenfolge) sollten die Fotos deshalb besser als Schmuckgrafiken mit leerem Alternativtext ausgezeichnet werden.

    Vergl. auch allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform
    • Die grafischen Punkte zum Auswählen einer Karussell-Position haben keine zugängliche Beschriftung (ausgegeben wird nur die Rolle "Schalter").

    Vergl. auch allgemeine Anmerkungen.

  • Prüfschritt 9.1.1.1b - Alternativtexte für Grafiken und Objekte

    S. 1-4: Der Kopfbereich wird von großformatigen Videos beherrscht. Da diese nur der Dekoration dienen, sind Alternativtexte nicht notwendig.

    Seite 2: BITV-konform

    Der Alternativtext "Portrait einer Frau" auf dem Bild der zuständigen Mitarbeiterin ist ungeeignet. Besser wäre "Foto: Frau Wilstermann-Fischer".

    Seite 5: BITV-konform

    Der Alternativtext "Portrait einer Frau" auf dem Bild der zuständigen Mitarbeiterin ist ungeeignet. Denkbar wäre "Foto: Frau Wilstermann-Fischer".

    Seite 3: nicht BITV-konform

    Für mehrere namentlich genannte Mitarbeiter:innen ist ein unspezifischer Alternativtext wie "Portrait einer Frau" sowie "Bild einer Frau" ungeeignet. Denkbar wäre "Foto: [Name der Mitarbeiterin]".

    Seite 1: BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 4: BITV-konform

    Vergl. allgemeine Anmerkung.

  • Prüfschritt 9.1.1.1d - Alternativen für CAPTCHAs

    Seite 3: nicht BITV-konform

    Keine CAPTCHA-Alternative beim Abonnieren der Stellenangebote über Email (erweitertes Popup-Dialog "Stellenangebote abonnieren").

    Seite 1, 2, 4, 5: nicht anwendbar
  • Prüfschritt 9.1.3.1a - HTML-Strukturelemente für Überschriften

    • Keine Seite hat eine Überschrift 1. Ordnung h1, zu der Nutzer von Screenreadern typischerweise zuerst navigieren. Empfohlen ist mindestens eine h1 über dem Hauptinhalt.
    • Der Text der Bühne ist immer als Überschrift zweiter Ordnung h2 ausgezeichnet. Es entsteht der Eindruck, als würden die Überschriften auf der Bühne aus optischen Gründen eingesetzt, also um großen fetten Text zu erzeugen.
      Die wichtige Überschrift und damit die eigentliche Hauptüberschrift ist die h3 darunter. Dies sollte eine h1 sein. Texte wie "Platz zu gestalten" sind als Überschrift ungeeignet und können in einem p stehen. Der Einsatz sollte konsistenter sein.
    • Der Einschuss der visuell abgesetzten Textbestandteile wie "gern gesehen" in die h2-Überschriften führt für nicht-visuelle Nutzende zu ggf. schlecht verständlichen bzw. eher verwirrenden Überschriften: So wird "Herzlich willkommen gern und gesehen" oder "Zuverlässigkeit gang und gäbe" ausgegeben. Auch solche Texte sind als Überschrift ungeeignet und sollten in einem p stehen.
    Seite 4: BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: BITV-konform
    • Missbräuchlich eingesetzte h6-Überschrift am Beginn des Textblocks unterhalb der h2 "Steigen Sie ein!". Hier ist visuell nichts hervorgehoben.
    • Rechte Spalte:
      Der Name der Mitarbeiter:in ist visuell eine Überschrift, aber nicht als Überschrift ausgezeichnet. Vergl. auch Anmerkungen zu Prüfschritt 9.2.4.4 (Aussagekräftige Linktexte).

    Vergl. auch allgemeine Anmerkungen.

    Seite 1: nicht BITV-konform
    • Die visuelle Überschrift "+++ Job des Monats +++" ist nicht mit Überschriften-Markup ausgezeichnet.

    Vergl. auch allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform
    • Missbräuchlich eingesetzte h6-Überschriften am Beginn der Textblöcke unterhalb der h2 Überschriften "Zuverlässigkeit", "Familienfreundlichkeit" und "Verantwortung". Hier ist visuell nichts hervorgehoben.
    • Rechte Spalte:
      Der Name der Mitarbeiter:in ist visuell eine Überschrift, aber nicht als Überschrift ausgezeichnet. Vergl. auch Anmerkungen zu Prüfschritt 9.2.4.4 (Aussagekräftige Linktexte).

    Vergl. allgemeine Anmerkungen.

    Seite 3: nicht BITV-konform
    • Rechte Spalte:
      Die Namen der Mitarbeiter:innen sind visuell Überschriften, aber nicht als Überschrift ausgezeichnet. Vergl. auch Anmerkungen zu Prüfschritt 9.2.4.4 (Aussagekräftige Linktexte).
    • Überschriftenebenen werden übersprungen: Nach der h2 "Vielfalt und Abwechslung" folgt eine h4 Überschrift-

    Vergl. auch allgemeine Anmerkungen.

  • Prüfschritt 9.1.3.1c - HTML-Strukturelemente für Zitate

    Seite 2: nicht BITV-konform

    Die Zitate im Karussell sollten mit blockquote ausgezeichnet werden.

    Seite 1, 3, 4, 5: nicht anwendbar
  • Prüfschritt 9.1.3.1d - Inhalt gegliedert

    Vergl. Hinweise zu Überschriften im Prüfschritt 9.1.3.1, zu Listen im prüfschritt 9.1.3.1b, und zu Datentabellen im Prüfschritt 9.1.3.1e.

    Seite 1: BITV-konform
    • Text unter Job des Monates: Inhalte in div-Element statt in p-Element.
    Seite 4: nicht BITV-konform

    Unterhalb der h3-Überschriften "Angestellte" und "Beamte" befindet sich jeweils Fließtext innerhalb einer (allerdings nicht semantisch ausgezeichneten) Datentabelle.

    Seite 5: nicht BITV-konform

    Im Fließtext sind mehrere Absätze nicht mit p ausgezeichnet, Umbrüche sind mit br umgesetzt.

    Seite 3: BITV-konform

    Leeres p als Abstandshalter.

    Seite 2: BITV-konform
  • Prüfschritt 9.1.3.1e - Datentabellen richtig aufgebaut

    Seite 4: nicht BITV-konform
    • Visuell abgesetzte Tabellen mit eigenen Spaltenüberschriften und auch nicht-tabellarische Inhalte wurden hier in eine große Tabelle gepackt. Die Spaltenüberschriften der Datentabellen "Jahresgehalt plus Sonderzahlung brutto / Eingangsstufe / Endstufe" sind nicht mit den vorgesehenen th-Elementen umgesetzt. Dies erschwert die nicht-visuelle Navigation der Tabelleninhalte. Die Beziehungen von tabellarischen Daten und den Spaltenüberschriften sind so nicht programmatisch ermittelbar und für Menschen, die auf assistive Technologien angewiesen sind, nicht verständlich.
    • Visuell deutlich abgesetzte Tabellen sollten auch als separate Daten-Tabellen umgesetzt werden.
    • Nicht tabellarische Inhalte wie die Texte unterhalb der Überschrift "Beamte" sollte dagegen nicht als Tabelle umgesetzt werden.
    • Im Inhaltsbereich der einen großen Tabelle sind darüber hinaus weitere abweichende Überschriften vorhanden, etwa mit colspan "Allgemeine Stellenzulage gem § 47 SHBesG". Diese Inhalte müssten als separate Tabelle mit korrekter Auszeichnung ( th, scope="col" gegebenenfalls mit zweistufigen Spaltenüberschriften) umgesetzt werden. (Siehe etwa https://www.w3.org/WAI/tutorials/tables/irregular/ )
    • Grundsätzlich sollten komplexe Datentabellen mit zweistufigen Spaltenüberschriften nach Möglichkeit vermieden werden. Wenn Sie jedoch genutzt werden, müssen sie semantisch richtig ausgezeichnet werden.
    Seite 3: nicht BITV-konform
    • Die Ergebnisse der Filterung der Stellenanzeigen im iframe sind semantisch gesehen eine sortierbare Datentabelle, sind jedoch nicht mit geeignetem Tabellen-Markup umgesetzt.
    Seite 1, 2, 5: nicht anwendbar
  • Prüfschritt 9.1.3.1f - Zuordnung von Tabellenzellen

    Seite 4: nicht BITV-konform

    Es findet sich keine Zuordnung der übergreifenden Spaltenüberschrift " Allgemeine Stellenzulage gem § 47 SHBesG" und der spezifischeren Spaltenüberschriften zu den Tabelleninhalten. Das grundsätzliche Problem ist die Nutzung einer großen Tabelle für mehrere Datentabellen und auch Fließtextinhalte - vergleiche Prüfschritt 9.1.3.1e (Datentabellen).

    Seite 1, 2, 3, 5: nicht anwendbar
  • Prüfschritt 9.1.3.1h - Beschriftung von Formularelementen programmatisch ermittelbar

    Seite 3: nicht BITV-konform
    • Die label-Elemente "Stichwortsuche" und "Zielgruppe" sind nicht programmatisch mit den zugehörigen Eingabefeldern verknüpft.
    • Die label-Elemente "Zielgruppe", "Jobkategorie", "Standort", "Email", "Sicherheitscheck" im modalen Pop-up nach Aktivieren von "Stellenangebote abonnieren" sind nicht programmatisch mit den zugehörigen Eingabefeldern verknüpft.
    Seite 1, 2, 4, 5: nicht anwendbar
  • Prüfschritt 9.1.3.2 - Sinnvolle Reihenfolge

    Der Cookie-Dialog, der einen Großteil des Seiteninhalts abdeckt und schon deshalb zu beginn der Interaktion geschlossen werden muss, befindet sich erst am Seitenende und ist deshalb. Er sollte im Sinne der Reihenfolge der Inhalte im DOM am Beginn stehen. Vergl. auch 9.2.4.3 (Fokusreihenfolge).

    Durch den Wechsel der Verfügbarkeit von Navigations-Elementen abhängig vom Scrollstatus der Seite (der obere Navigationsmenü-Schalter ist nur vor Scrollen erreichbar, der zweite, abweichend umgesetzte, nur nach Scrollen) ist die Reihenfolge der Navigation nicht-visuell nur schwer verständlich. Vergl. auch Prüfschritt 9.2.4.3 (Fokusreihenfolge).

    Seite 1: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 3: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

  • Prüfschritt 9.1.4.3 - Kontraste von Texten ausreichend

    • Die fest positionierte, wichtige, dem grafische Element Scroll-Pfeil beigeordnete Schrift "Scroll" hat abhängig vom Seitenhintergrund einen sehr geringen Kontrast. Auch das grafische Element Scroll-Pfeil hat hat abhängig vom Seitenhintergrund sehr geringen Kontrast.
    • Der Kontrast der Textbestandteile "gern gesehen" (S.1), "gang und gäbe" (S.2). "drinnen und draußen" (S.3), "fix und fair" (S.4) sowie "frisch und fröhlich" (S.5) (grau auf hellgrau, 2,4:1) ist nicht ausreichend (SOLL bei großem Text: 3:1).
    • Links im Hauptbereich haben einen sehr geringen Kontrast von nur 3,4:1 (für Texte bis 18 Pixel Schriftgröße sind mindestens 4,5:1 erforderlich). In Kombination mit weiß (zum Beispiel bei Buttons, wo dieselbe Farbe als Hintergrund für weiße Schrift genutzt wird) steigt der Kontrast auf gerade noch akzeptable 4,6:1.
    • Hinweis ohne Punktabzug. Der weiße Text auf der Bühne wird von einem Schlagschatten begleitet, der die Buchstaben aber nur nach unten rechts vom Hintergrund abgrenzt. Formal ist der Kontrastanforderung damit erfüllt. Oben und links stehen die weißen Buchstaben bei entsprechenden Hintergrundbildern in ungünstigen Fällen auf fast weißen Flächen. Durch den lebendigen und sich bewegenden Hintergrund wird die Lesbarkeit weiter erschwert.
    Seite 3: nicht BITV-konform
    • Der Kontrast der Links (rot auf hellgrau, 3,4:1) ist nicht ausreichend (SOLL: 4,5.1).
      Vergl. allgemeine Anmerkung.
    • Der Kontrast der Label (grau auf hellgrau, 3,3:1) ist nicht ausreichend (SOLL: 4,5.1).
    • Die Anzeige der ausgewählten Seite unterhalb der Stellenanzeigen-Ergebnistabelle (hellgrau auf weiß, 2,4:1) ist nicht kontrastreich genug (SOLL: 4,5:1).
    • Der Kontrast der Fehlermeldungen (hellrot auf weiß, 3,6:1) ist nicht ausreichend (SOLL: 4,5.1).
    • Da ein Dropdown-Icon der Auswahllisten visuell nicht verfügbar ist, muss der Platzhaltertext ausreichend kontrastreich sein - oder der Rahmen muss mindestens einen Kontrast von 3:1 haben (vergl. Anmerkung zu Prüfschritt 9.4.1.11).
    • Popup Stellenangebote abonnieren:
      Der Platzhaltertext "Bitte Code eingeben" hat einen Kontrast von nur 2,3:1 (SOLL: 4,5:1).

    Vergl. auch allgemeine Anmerkung.

    Seite 1: nicht BITV-konform
    • Der Kontrast der weißen Texte über den Bildern der Teaserblöcke ist abhängig vom Bildhintergrund nicht ausreichend (bei "Duales Studium" etwa 3,2:1). Bei Mausfokussierung wird der Kontrast noch schwächer. Das Soll für Texte unterhalb einer Größe von 24px (18,7px bei gefettetem Text) ist 4,5:1).

    Vergl. auch allgemeine Anmerkung.

    Seite 2: nicht BITV-konform
    • Der Fließtext im Bereich Familienfreundlichkeit (weiß auf grau, 3,4:1) ist nicht kontrastreich genug (SOLL: 4,5:1).
    • Die Zitate im Karussell (weiß auf grau, 3,4:1) sind nicht kontrastreich genug (SOLL: 4,5:1).

    Vergl. allgemeine Anmerkung.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 5: nicht BITV-konform

    Vergl. allgemeine Anmerkung.

  • Prüfschritt 9.1.4.4 - Text auf 200 % vergrößerbar

    • Bei mehreren Vergrößerungs-Breakpoints zwischen 100% und 200% Zoom ist das wichtige Element "Scroll" (Pfeil und/oder Text) von der Überschrift überlagert.
    • * Der Anfang des Cookie-Hinweises ist bei dieser Zoom-Stufe außerhalb des Viewports und lässt sich auch mit Scrollen nicht mehr erreichen.
    • Im Firefox -Browser scrollt der Kopfbereich zum Teil mit und liegt dann halbtransparent über den Inhalten.
    • Bei Viewportgröße 1280 x 768 ist Ausgangszustand (ohne Scrollen) ist das Ausklapp-Element des oberen Navigationsmenüs nach dem Ausklappen nur noch teilweise sichtbar.
    • Schriften sind z.T. rechts angeschnitten.
    • S.2-5: Bei 200% Vergrößerung ist die visuelle Unterscheidung der h2 "Platz zu gestalten" und der unmittelbar folgenden h3 nicht mehr möglich. Eine Überschrift wie "Platz zu gestalten
      Arbeitgeberin" ist möglicherweise irritierend bzw. nicht gut verständlich.
    Seite 1: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 3: nicht BITV-konform

    In der Pseudo-Datentabelle brechen Inhalte schlecht leserlich um.

    Vergl. allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

  • Prüfschritt 9.1.4.10 - Inhalte brechen um

    • Bei einer Browserbreite von 1280px und 400% Vergrößerung verschwindet beim Aufrufen der Navigation über den ersten Navigationsmenü-Schalter ein Teil des Menüs oben außerhalb des Viewports - so auch der Menüschalter selbst zum Reduzieren des Menüs. Nur noch 1 1/2 Einträge sind sichtbar.
    • Der Text der h2 ist bei einer Browserbreite von 1280 und 400% Vergrößerung größtenteils durch die Navigation am unteren Seitenende verdeckt, selbst bei einer großzügigen Ausgangs-Viewport-Höhe von über 900 px. Zu sehen ist nur noch das immer gleiche "Platz zu".
    • Bei einer Ausgangsgröße von 1280px Viewportbreite und 400% Zoom passt sich der Cookie-Hinweis nicht an die Vergrößerungsstufe an und wird abgeschnitten.
    Seite 1: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 3: nicht BITV-konform
    • Die Pseudo-Datentabelle mit Stellenangeboten im iframe ist bei einer Browserbreite von 1280 und 400% Vergrößerung nicht mehr wirklich nutzbar. Es wäre besser, sie in einem horizontal scrollbaren Bereich anzubieten statt sie zu horizontal zu komprimieren.

    Vergl. auch allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

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

    • Das sehr wichtige Element Scroll-Pfeil (ohne Scrollen sind Seiten-Inhalte nicht sichtbar) ebenso wie die beigeordnete Schrift "Scroll" (vergl. Prüfschritt 9.1.4.3) hat abhängig vom Seitenhintergrund einen sehr geringen Kontrast. Formal ist das grafische Element redundant sobald es beschriftet ist, die Schrift ist jedoch sehr klein und abhängig vom Inhalt schlecht zu sehen, deshalb ist eine gute Sichtbarkeit des grafischen Elements für den Kontext der Nutzung sehr wichtig.
    Seite 3: nicht BITV-konform
    • Pop-up Dialog "Stellenangebote abonnieren": das Schließen-Element (hellgrau auf weiß 1,6:1) ist bei weitem nicht kontrastreich genug (SOLL: 3:1).
    • Der Pfeil, der anzeigt, nach welcher Spalte die Pseudotabelle sortiert ist (hellgrau auf weiß 2,1:1) ist nicht kontrastreich genug (SOLL: 3:1).
    • Der Kontrast des Feldes Stichwortsuche zum Hintergrund ist nur 1,4:1. Das Feld braucht einen kontrastreichen Rahmen (mindestens 3:1).
    • Die inaktive Blätter-Symbole unterhalb der Stellenanzeigen-Ergebnistabelle (mittelgrau auf hellgrau, 1,9:1) sind akzeptabel. Sobald mehrere Seiten vorhanden sind muss der Kontrast der Bedienelemente über 3:1 liegen.
    • Der Rahmen der Comboboxen muss mindestens einen Kontrast von 3:1 haben oder der Platzhaltertext müsste einen ausreichenden Kontrast von 4,5:1 haben (vergl. Anmerkung zu Prüfschritt 9.4.1.3).

    Vergl. auch allgemeine Anmerkung.

    Seite 1: BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 2: BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 4: BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 5: nicht BITV-konform

    Die Knöpfe zum Bedienen des Sliders sind im transparenten Zustand auf jedem Hintergrund zu blass. Im magentafarbenen Stil hängt ihr Kontrast von den zufällig darunter liegenden Bildinhalten ab, ist daher in vielen Fällen ebenfalls zu gering.

    Vergl. auch allgemeine Anmerkung.

  • Prüfschritt 9.2.1.1 - Ohne Maus nutzbar

    Die Navigation ist zentral wichtig und muss für alle Nutzer funktionieren. Nur über das zweite Navigationsmenü, dass erst nach Scrollen verfügbar ist, lässt sich die zweite Navigationsebene erreichen - dieses ist aber nicht tastaturnutzbar. Damit sind viele Unterseiten für Tastaturnutzer unerreichbar.

    Seite 1: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 3: nicht BITV-konform
    • Die Comboboxen im modalen Popup im iframe, "Stellenangebote abonnieren" sind bei Screenreader-Nutzung nur eingeschränkt tastaturbedienbar. Vergl. Hinweise und Bewertung in Prüfschritt 9.4.1.2 "Name, Rolle, Wert verfügbar".

    Vergl. auch allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform

    Das Akkordeon-Widget unterhalb der h2-Überschrift "Unsere Arbeitsplatzvielfalt" ist nicht tastaturbedienbar, erhält keinen Tastaturfokus. Vergl. auch Prüfschritt 9.4.1.2 "Name, Rolle, Wert verfügbar".

    Vergl. auch allgemeine Anmerkungen.

  • Prüfschritt 9.2.2.2 - Bewegte Inhalte abschaltbar

    • Bewegte Inhalte stören Menschen mit kognitiven Einschränkungen und erschweren die Nutzung für sehbehinderte Nutzende, die mit Vergrößerung arbeiten. Die selbstabspielenden Videos müssen entweder nach 5 Sekunden enden (müssten also viel kürzer sein und dürften nicht im Loop abgespielt werden) oder müssen über ein zugängliches (ausreichend kontrastreiches, tastaturbedienbares, semantisch beschriftetes) Bedienelement angehalten werden können. Üblich ist hierfür ein kombiniertes Pause/Play Element. Dieses Bedienelement sollte einen eigenen Hintergrund haben, um auf den wechselnden Videoinhalten immer ausreichend kontrastreich zu sein.
    Seite 1: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform
    • Die Animation des Karussells lässt sich nicht über ein Bedienelement stoppen. Ein Bedienelement hierfür muss kontrastreich, tastaturbedienbar, und zugänglich beschriftet sein, einschließlich Status.

    Vergl. allgemeine Anmerkungen.

    Seite 3: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform

    Die Animation des Karussells lässt sich nicht über ein Bedienelement stoppen. Ein Bedienelement hierfür muss kontrastreich, tastaturbedienbar, und zugänglich beschriftet sein, einschließlich Status.

    Vergl. auch allgemeine Anmerkungen.

  • Prüfschritt 9.2.4.1 - Bereiche überspringbar

    • Die Auszeichnung des nicht tastaturbedienbaren zweiten Navigationsschalters mit der Überschrift "Hauptnavigtion" im aside Element mit role="complementary" ist nicht zielführend. Die passende Rolle ist role="navigation" , die bereits implizit durch das nav-Element vermittelt wird. Das aside-Element wird nur für zusätzliche Information, nie aber für Navigation verwendet.
    • In der Sprachausgabe entstehen unnötige Redundanzen: Nach dem irreführenden Ausgabe "Ergänzung" (durch das aside-Element) folgt die Ausgabe "Navigation" (durch as nav-Element) gefolgt von der Ausgabe der h2 ("Hauptnavigation").
      Eine zeitgemäße Umsetzung verzichtet bei Nutzung der nativen Struktur-Elemente wie header, nav, main und footer auf versteckte Bereichsüberschriften.
      Vor allem muss die Tastaturnutzbarkeit sichergestellt werden (der Menüschalter ist über Tabben nicht erreichbar).
    Seite 1: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 3: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

  • Prüfschritt 9.2.4.3 - Schlüssige Reihenfolge bei der Tastaturbedienung

    • Der Cookie-Dialog bekommt den Tastaturfokus erst am Seitenende. Er sollte im Sinne der Reihenfolge der Inhalte im DOM am Beginn stehen. Für sehende Tastaturnutzer ist die Nutzung dadurch erschwert, dass der Cookie-Dialog den Fokus im Seitenhintergrund abdeckt und deshalb unklar ist, welches Element den Fokus hat, solange der Dialog nicht geschlossen werden kann. Vergl. auch 9.1.3.2 (Sinnvolle Reihenfolge).
    • Der Tastaturfokus wird nicht im Cookie-Dialog gehalten, sondern wandert in den Seitenhintergrund.
    • Die Fokusreihenfolge ist verwirrend und nicht konsistent. Nach dem Durchlaufen der Hauptmenüpunkte wird zuerst das Logo rechts erreicht, dann werden die Hauptmenüpunkte durchlaufen, dann wird erneut das Logo fokussiert. Da das bei diesem Scrollzustand eingeblendete zweite Hamburgermenü ist nicht mit der Tastatur erreichbar, beim Zurücktabben über das Logo hinaus werden die Hauptmenüpunkte dann aber nicht wie erwartet erreicht, sondern der Sprunglink am Seitenbeginn. Erst erneutes Vorwärtstabben erreicht dann die Hauptmenüpunkte. Für eine Tastaturbedienung ist das kaum brauchbar. Das Problem wird browserabhängig (Firefox-Browser) verschärft durch die z.T. sehr schlecht sichtbare Tastaturfokus-Hervorhebung.
    Seite 1: nicht BITV-konform
    • Bei den Teaser-Kacheln sollten die extra Fokuspunkte auf den Bildern entfallen, die ganze Kachel sollte fokussiert werden. Vergl. etwa das Card Pattern https://inclusive-components.design/cards/

    Vergl. auch allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 3: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

  • Prüfschritt 9.2.4.4 - Aussagekräftige Linktexte

    Seite 1: nicht BITV-konform
    • Der "mehr"-Link unter der lediglich visuellen Überschrift "Job des Monats" ist weder durch einen umschließenden Satz noch durch eine vorangehende korrekt ausgezeichnete Überschrift aussagekräftig.
    Seite 2: nicht BITV-konform
    • Rechte Spalte:
      Da der Name der Mitarbeiterin nicht als Überschrift ausgezeichnet ist, hat der Link "Nachricht schreiben" keinen ausreichenden Kontext. Vergl. Hinweise in Prüfschritt 9.1.3.1a (Überschriften).
    Seite 3: nicht BITV-konform
    • Rechte Spalte:
      Da die Namen der Mitarbeiter:innen nicht als Überschrift ausgezeichnet sind, haben die gleichartigen Links "Nachricht schreiben" keinen ausreichenden Kontext. Vergl. Hinweise in Prüfschritt 9.1.3.1a (Überschriften).
    Seite 5: nicht BITV-konform
    • Rechte Spalte:
      Da der Name der Mitarbeiterin nicht als Überschrift ausgezeichnet ist, hat der Link "Nachricht schreiben" keinen ausreichenden Kontext. Vergl. Hinweise in Prüfschritt 9.1.3.1a (Überschriften).
    Seite 4: BITV-konform
  • Prüfschritt 9.2.4.5 - Alternative Zugangswege

    Es gibt außer der Menü-Navigation keine Suche und keine vollständige Sitemap. Für die Navigation und Orientierung auf Unterseiten wäre die Darstellung eines Seitenpfades hilfreich.

  • Prüfschritt 9.2.4.7 - Aktuelle Position des Fokus deutlich

    • In Browsern, die nicht über eine gute Standard-Fokushervorhebung verfügen (etwa Firefox) ist der Fokus z.T. sehr schlecht wahrnehmbar. Kaum sichtbar ist er auf den magentafarbenen Links in der rechten Randspalte. Ungenügend sichtbar ist er auch auf der Hauptnavigation: Der graue Rahmen hat einen zu geringen Kontrast zum Hintergrund (hellgrau auf weiß, 2,4:1). Auch der Kontrastabstand zu den nicht ausgewählten Menüpunkten (grau zu dunkelgrau, 2,2:1) hilft hier nicht weiter.
    • Cookie-Dialog: Im Firefox-Browser ist der Fokus auf dem wichtigen Element "Alle Cookies akzeptieren" nicht sichtbar.
    Seite 3: nicht BITV-konform
    • Die Fokushervorhebung auf dem Link "Bereits Mitarbeiter:in" ist im Firefox-Browser kaum sichtbar.
    • Die Fokushervorhebung auf den roten Buttons im iframe geschieht nur durch eine kaum wahrnehmbare Aufhellung des Farbtons. Für eine wirksame Fokushervorhebung ist ein Kontrastunterscheid von mindestens 3:1 zwischen Ausgangsfarbe und Farbe bei Tastaturfokussierung erforderlich.

    Vergl. auch allgemeine Anmerkungen.

    Seite 1: nicht BITV-konform
    • Der Fokus auf dem Mehr-Link ist im Firefox-Browser nicht wahrzunehmen.

    Vergl. allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

  • Prüfschritt 9.2.5.1 - Alternativen für komplexe Zeiger-Gesten

    Seite 2: nicht BITV-konform

    Im Karussell gibt es die Möglichkeit, benachbarte Ansichten mit den Zitaten über Wischgesten zu erreichen. Hierfür wird eine Alternative benötigt, die den Wechsel mit einfachen Klicks bzw. Tipp-Gesten ermöglicht, etwa über Pfeile (diese müssen dann kontrastreich, tasturbedienbar und semantisch beschriftet sein, etwa "vorwärts blättern" und "zurück blättern").

    Seite 1, 3, 4, 5: BITV-konform
  • Prüfschritt 9.2.5.3 - Sichtbare Beschriftung Teil des zugänglichen Namens

    Logo: Schriftzug "Elmshorn" nicht Teil des zugänglichen Namens ("Startseite")

    Seite 1: nicht BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 3: nicht BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 5: nicht BITV-konform

    Vergl. allgemeine Anmerkung.

  • Prüfschritt 9.3.1.2 - Anderssprachige Wörter und Abschnitte ausgezeichnet

    Seite 3: nicht BITV-konform

    Die deutschen Stellenanzeigen-Ergebnisse im iframe sind englisch ausgezeichnet.

    Seite 1, 2, 4, 5: BITV-konform
  • Prüfschritt 9.3.2.3 - Konsistente Navigation

    Die Navigation weicht bei verschiedenen Scrollzuständen der Seite stark voneinander ab: ein tastaturzugängliches aber unverständlich beschriftetes Hamburger-Menu im Ausgangszustand bei einer Viewportbreite unterhalb von 972 px weicht nach Scrollen einem ähnlich platziertem, aber nicht tastaturbedienbaren Hamburger-Menü mit abweichendem zugänglichem Namen und erweiterten Inhalten. Menüeinträge in diesem Menü ändern sich je nach Ort im Webauftritt. Die Navigation ist inkonsistent und schwer zu durchschauen, manche Unterseiten sind für Tastaturnutzer gar nicht erreichbar.

  • Prüfschritt 9.3.2.4 - Konsistente Bezeichnung

    Die zwei Varianten des Navigationsmenü-Schalters sind nicht gleichartig beschriftet. Je nach Scrollzustand tauchen diese funktional ähnlichen Elemente mit abweichenden Inhalten auf. Die Inhalte im unteren Menü ändern sich schlecht nachvollziehbar abhängig von der Position im Webauftritt. Vergl. auch Prüfschritt 9.3.2.3 "Konsistente Navigation"

  • Prüfschritt 9.3.3.1 - Fehlererkennung

    Seite 3: nicht BITV-konform
    • Pflichtfelder sind visuell mit Sternchen versehen, aber nicht programmatisch markiert (über required oder aria-required )
    • Die Fehlermeldungen bei fehlenden Eingaben sind nicht programmatisch mit den zugehörigen Eingabefeldern verknüpft.
    • Nach Aktivieren von "Abonnieren" mit unvollständigen Eingaben sollte der Fokus in das erste Feld mit Fehler versetzt werden.
    Seite 1, 2, 4, 5: nicht anwendbar
  • Prüfschritt 9.3.3.2 - Beschriftungen von Formularelementen vorhanden

    Seite 3: nicht BITV-konform

    Keine permanent sichtbare Beschriftung des CAPTCHA-Textfeldes "Bitte Code eingeben".

    Seite 1, 2, 4, 5: BITV-konform
  • Prüfschritt 9.4.1.2 - Name, Rolle, Wert verfügbar

    • Responsive Ansicht bei 974px Viewport-Breite und kleiner:
      Der Ausklappzustand des zweiten Navigationsmenüs mit Hamburger-Icon wird nicht über aria-expanded vermittelt. Das Menü ist redundant und für sehende Tastaturnutzer nicht mit der Tastatur zu öffnen. Blinde Nutzer erreichen es jedoch ggf. im Lesemodus und können es auch öffnen.
      Die responsive Navigation sollte auf ein konsistentes Menü mit verständlicher Beschriftung und programmatisch ermittelbarem Zustand reduziert werden.
    Seite 3: nicht BITV-konform
    • Die Elemente "Zurücksetzen" und "Stellenanzeigen abonnieren", die Meldungen zur Anzahl gefundener Ergebnisse, die Spaltenüberschriften der sortierbaren Pseudo-Tabelle, sämtliche Stellenanzeigen-Ergebnisse im iframe sowie das Blättermenü unter der Tabelle werden vom Screenreader nicht ausgegeben.
      Ggf. liegt das an der Auszeichung dispay:none auf dem html-Element der im iframe eingebundenen Seite https://elmshorn.softgarden.io/de/widgets/jobs.
    • Die Blätter-Symbole unterhalb der Ergebnistabelle sollten als native button-Elemente oder als Link mit role="button" umgesetzt werden.
    • Der modale Popup im iframe, "Stellenangebote abonnieren" nach Aktivieren von "Stellenangebote abonnieren" ist nicht mit geeigneten ARIA-Rollen und Attributen umgesetzt. Vergl. https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal. Eine Screenreader-Ausgabe erfolgt nur bei Formularelementen, wirksam bei den Checkboxen, unwirksam bei den Eingabefeldern wegen fehlender Verknüpfung der label (vergl. Prüfschritt 9.1.3.1h). Die Elemente der Ausklapplisten der Comboboxen sowie der wichtige Schalter "Abonnieren" werden nicht ausgegeben.
    • Die Comboboxen im modalen Popup "Stellenangebote abonnieren" sind nicht mit geeigneten ARIA-Rollen und Attributen umgesetzt und nicht tastaturbedienbar. Vergl. https://www.w3.org/TR/wai-aria-practices-1.1/#combobox
    • Die aktuelle Seite der Blätternavigation ist nicht gekennzeichnet (z.B. mittels aria-current="page" )

    Vergl. auch Prüfschritte 9.1.1.1 und 9.2.1.1.

    Vergl. allgemeine Anmerkungen.

    Seite 5: nicht BITV-konform
    • Das Akkordeon unterhalb der h2 "Unsere Arbeitsplatzvielfalt" ist nicht mit entsprechenden ARIA-Attributen umgesetzt, um den Ausklappstatus zu vermitteln - vor allem ist es nicht tastaturbedienbar (vergl. Prüfschritt 9.2.1.1 "Ohne Maus nutzbar"). Für eine standardkonforme Umsetzung siehe https://www.w3.org/TR/wai-aria-practices-1.1/#accordion
      Noch sinnvoller wären ggf. einfache Disclosure-Elemente (vergl. https://www.w3.org/TR/wai-aria-practices-1.1/#disclosure).

    Vergl. auch allgemeine Anmerkungen.

    Seite 1: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 2: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

    Seite 4: nicht BITV-konform

    Vergl. allgemeine Anmerkungen.

  • Prüfschritt 9.4.1.3 - Statusmeldungen programmatisch verfügbar

    Seite 3: nicht BITV-konform
    • Rückmeldungen wie "Zu Ihrer Suchanfrage wurden 4 Stellenanzeigen gefunden" werden nicht als Statusmeldung ausgegeben (über role="status" ). Siehe https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role
    Seite 1, 2, 4, 5: nicht anwendbar
  • Prüfschritt 11.7 - Benutzerdefinierte Einstellungen

    Das Logo Elmshorn hat keinen eigenen Hintergrund, der Schriftzug ist auf dunklen Hintergründen ggf. schlecht lesbar.

    Seite 3: nicht BITV-konform

    Inhalte der Stellenanzeigen-Ergebnistabelle im iframe sind bei Setzung eigener Schriftgrößen kaum noch nutzbar, die Zeilenhöhe wird nicht angepasst, es kommt zu Überlappungen.

    Seite 1: BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 2: BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 4: BITV-konform

    Vergl. allgemeine Anmerkung.

    Seite 5: BITV-konform

    Vergl. allgemeine Anmerkung.

  • Prüfschritt 12.1.2 - Barrierefreie Dokumentation

    Es gibt eine Erklärung zur Barrierefreiheit. Der Prüfschritt ist beim derzeitigen Stand wegen der vielen Mängel bezüglich anderer Anforderungen "nicht erfüllt".

Erfüllt sind 19 von 92 Prüfschritten:

Nicht anwendbar sind 41 von 92 Prüfschritten:

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