Das Prüfverfahren zur BITV


Sie sind hier: BITV-Test > Prüfergebnisse für Webauftritte (Alle Tests) > Deutschland machts effizient


Blättern:

Deutschland machts effizient

Prüfung

Anmerkungen zum Prüfauftrag

Mit Prüfung der responsiven Ansicht bei 480px Viewport-Breite.

Ergebnis

Punkte: 91,75 von 100 (gut zugänglich)

Prüfberichte

Prüfbericht vom 10.07.2017, 10:48 (PDF)

Geprüfte Seiten

Seite 1 (Startseite)

Seite 2 (Kontakt)

Seite 3 (Kampagne - mit Videos)

Seite 4 (Mediathek - Veranstaltungen)

Bewertung und Anmerkungen zu einzelnen Erfolgskriterien

Teilweise erfüllt sind 2 von 50 Prüfschritten:

  • Prüfschritt 3.3.1a - Fehlermeldungen hilfreich

    Seite 2: teilweise erfüllt

    Die Fehlermeldung sollte mit dem Formularfeld programmatisch verknüpft sein. In diesem Fall wäre dies z.B. mit Hilfe von aria-describedby möglich. Dann würde die Fehlermeldung mit ausgegeben, wenn der Nutzer durch die Felder tabbt. Bei der jetzigen Umsetzung müsste der Nutzer bei jedem Formularfeld aus dem Formularmodus in den Lesemodus wechseln, um über Pfeiltastennavigation die Fehlermeldung vorgelesen zu bekommen. Da er zudem nicht weiß, welches Feld falsch ausgefüllt ist, wäre dies mühsam.

    Seite 1, 3, 4: nicht anwendbar

    Punktabzug: 1 Punkt

  • Prüfschritt 4.1.2a - Name und Rolle von Bedienelementen verfügbar

    Hauptnavigation: Menüeinträge, die Untermenüs ausklappen, haben nicht die role=button und teilen den Zustand (ausgeklappt/eingeklappt) nicht über aria-expanded mit.

    Seite 1: nicht erfüllt

    Die Auswahllisten-ARIA-Auszeichnung mit role=listbox für Karussellbereiche und role=option für die Karussellpositionen sind hier unangebracht. Interaktive Elemente innerhalb von mit role=option ausgezeichneten Bereichen sind ggf. nicht in ihrer Rolle wahrnehmbar bzw. nicht bedienbar.
    Die h2-Überschriften innerhalb der Karussell-Teaser werden bei Pfeiltastennavgation nicht gelesen, die Überschrift lässt sich nicht mit Standard-Tastaturkürzeln der Screenreader anspringen und taucht nicht in Screenreader-Überschriftenlisten auf - wahrscheinlich ebenfalls als Folge der falsch eingesetzten ARIA-Rollen.
    Die stattdesssen eingesetzte Technik, Inhalte beim Wechsel der Karusselpositionen über aria-live automatisch auszugeben, ist nicht ideal. So werden immer die "Zurück blättern"- und "Vorwärts blättern"-Tasten mit ausgegeben, Links im vorgelesenen Text werden nicht als Links ausgegeben. Die Links können zwar nach Weitertabben über die Blätter-Links hinaus erreicht werden, aber der Zusammenhang mit dem Karussellteaser-Text ist nicht einfach herzustellen.
    Siehe WAI-ARIA Authoring Practices 1.1
    https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/ unter "Listbox"

    Auch im Bereich der Teaser unterhalb von Energieeffizienz lohnt sich werden ARIA-Rollen und Attribute (aria-live, listbox und option) zweckentfremdet angewandt, wenn auch hier die Tastaturnutzung nicht beeinträchtigt ist (verg. aber Prüfschritt 2.4.3a "Schlüssige Reihenfolge bei der Tastaturbedienung"). aria-live gibt anscheinend auch hier beim Weitertabben die Inhalte der Teaserblöcke aus. aria-live ist für neu eingefügte Inhalte gedacht, nicht als Ersatz für Linktexte oder Alternativtexte. Die aria-described-Attribute der Listenelemente (Teaserblöcke) scheinen auf nichts zu verweisen, die referenzierten IDs sind nicht vorhanden.
    Ein praktischer Nachteil der Pseudo-Links in den Teasern: Da sie nicht als echte Links umgesetzt sind, werden sie von Linklisten-Funktionen der Screenreader nicht erfasst.

    Interaktive Inhalte in den Karussells sind wegen der verwendeten ARIA-Rollen und der Ausgabe über aria-live für Screenreadernutzer nur schwer oder gar nicht erschließbar und bedienbar.

    Siehe auch allgemeine Hinweise.

    Seite 2: eher erfüllt

    Siehe allgemeine Hinweise.

    Seite 4: eher erfüllt

    Siehe allgemeine Hinweise.

    Seite 3: teilweise erfüllt

    Missbräuchliche Verwendung von role="listbox" und role="option" im Slider / Karussell Die Plakate zur Kampagne. Siehe Hinweise zu S. 1. Vergl. auch Bewertung Prüfschritt 1.1.1a "Ohne Maus nutzbar".

    Vergl. auch allgemeine Hinweise.

    Punktabzug: 1 Punkt

Eher erfüllt sind 11 von 50 Prüfschritten:

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

    Schmale responsive Ansicht: Beim Menüschalter der Hauptnavigation (Hamburger-Icon) wird bei nicht visueller Nutzung nur "Anklickfeld Link", aber keine Name, etwa "Navigation (geöffnet)" o.ä., ausgegeben. Vergl. auch Prüfschritt 3.2.3a "Navigation einheitlich".

    Seite 1: eher erfüllt

    Siehe allgemeiner Hinweis.

    Seite 2: eher erfüllt

    Siehe allgemeiner Hinweis.

    Seite 4: eher erfüllt

    Siehe allgemeiner Hinweis.

    Seite 3: teilweise erfüllt

    "Die Plakate zur Kampagne": Da hier Grafik und Text getrennt verlinkt sind, sollte im alt-Attribut der Grafik das Linkziel genannt werden. Bzgl. erste Grafik korrekt (alt="Jetzt Heizung obptimieren und Förderung sichern"). Bei den anderen Grafiken steht jeweils nur "Kampagnenmotiv xy".

    Der für das Vorschaubild des "Making of.."-Videos hinterlegte Alternativtext "Screenshot aus dem Video Making of.." usw. wird nicht ausgegeben - evtl. wegen unrichtiger Verwendung doppelter Anführungszeichen innerhalb des alt-Attributs?

    Videos: Über aria-label zugewiesener Button-Name "Start Playback" (nach vierfacher Ausgabe der Rolle Anklickfeld) ist schlecht verständlich.

    Die Namen der jw-Player Video-Schalter (divs mit role=button) wie More, Closed captions, Volume und Full Screen sind nicht besonders aussagekräftig (da englisch), auch wenn der Kontext hier hilft, da Namen wie Play vielleicht als bekannt vorausgesetzt werden können. (Vergl. auch Prüfschritt 2.1.1a "Ohne Maus nutzbar" zur mangenden Erreichbarkeit der Untertitel.)

    Während des Abspielens der Videos werden die Namen der Bedienelemente z.T. nicht ausgegeben. Der Status des Play-Schalters ändert sich nicht zu Pause, wenn Play ausgelöst wird (und visuell der Pause-Schalter angezeigt wird).

    Punktabzug: 0,75 Punkte

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

    Seite 4: eher erfüllt

    Inhaltsberich: Der Alternativtext der Grafiken lautet jeweils alt="Innovationsworkshop". Das ist wenig hilfreich. Das alt-Attribut sollte hier beschreibend oder leer sein.

    Seite 1: erfüllt

    Alternativtexte der Teaserbilder sind beschreibend, aber nicht notwendig, wenn das Linkziel benannt würde. Sie werden aber ohnehin nicht bei Screenreadernavigation, weder mit Tab noch mit Pfeiltasten, vorgelesen - wohl wegen der verwendeten ARIA-Rolle role=option. Vergl. Prüfschritt 4.1.2a "Name und Rolle von Bedienelementen verfügbar".

    Die gleichlautenden Alternativtexte sind wohl OK, da das Bild (Frau Zypries) tatsächlich fast immer gleich ist.
    Das verschwommene Defaultbild im oberen Karussell unter Hashtag "fragzypries" solte besser als Schmuckbild mit leerem Alternativtext behandelt werden (der Text wird aber wohl wegen der role=option ohnehin nicht von Screenreadern ausgegeben)

    Seite 3: erfüllt
    Seite 2: nicht anwendbar

    Punktabzug: 0,75 Punkte

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

    Überschriftenauszeichnung nur begrenzt nützlich bei nicht visueller Nutzung: z.T. wegen gewählter ARIA-Rollen nicht verfügbar für Screenreader-Kurzbefehlnavigation, Überschriftenliste. Vergl. Bewertung in Prüfschritt 4.1.2a "Name und Rolle von Bedienelementen verfügbar".

    Seite 1: eher erfüllt

    Konstruktionen wie h2 Mein Effizienz-Tipp: direkt gefolgt von h2 Einfach Abwärme nutzen und volles Rohr sparen spiegeln nicht die inhaltliche Semantik wider. Besser wäre hier ein Zeilen-Umbruch (bzw. Binnenauszeichnung) innnerhalb einer Überschrift.
    Vergl. auch allgemeine Anmerkung.

    Die ganzen h2-Überschriften (Karussell und Inhalt) sind der h1 Navigation untergeordnet. Nicht ideal. Durch eine weitere versteckte Bereichsüberschrift, z.B. "Inhaltsbereich" vergl. h1 "Navigation" und h1 "Servicemenü" wäre der Aufbau logischer und konsistenter.

    Seite 3: erfüllt

    Eine (versteckte) h1 für den Inhaltsbereich oder eine h1-Hauptüberschrift des Inhaltsbereichs ("Deutschland macht‘s effizient – Die Kampagne") würde die Seite konsitenter strukturieren (verg. auch Kommentar zu S.1).

    Sinnlose Überschrift: h1 "Sprungmarken-Navigation".

    Seite 4: erfüllt

    Versteckte Überschrift "Listeninhalt" ist evtl. schwer verständlich.

    Seite 2: erfüllt

    Punktabzug: 0,75 Punkte

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

    Seite 1: eher erfüllt

    Die Einträge unter "Im Dialog", "Geld vom Staat: Förderprogramme" und "Aktuelles" sollten als Liste ausgezeichnet sein.

    Seite 3: eher erfüllt

    Die Einträge unter "Unterwegs mit "Deutschland macht’s effizient" sollten als Liste ausgezeichnet sein.

    Seite 2, 4: erfüllt

    Punktabzug: 0,5 Punkte

  • Prüfschritt 1.4.3a - Kontraste von Texten ausreichend

    Einblendbare Hotline-Nummer (weiß auf orange) rechts unten hat einen Kontrast von 4,23:1 (SOLL 4,5:1). In der Standard-Ansicht wird die Hotline auch im Header mit ausreichenden Kontrasten angeboten, in der mobilen Ansicht nicht.

    Seite 1: eher erfüllt

    Siehe allgemeine Anmerkung.

    Seite 2: eher erfüllt

    Siehe allgemeine Anmerkung.

    Seite 3: eher erfüllt

    Textlink mit Grafik "Mehr erfahren" auf Foto mit teilweise sehr geringem Kontrast von 1,4:1 (SOLL:4,5:1).
    Siehe auch allgemeine Anmerkung.

    Seite 4: eher erfüllt

    Textfeldvorbelegung "Suchbegriff eingeben" unterhalb von Mediathek hat nur einen Kontrast von 2,8:1 (SOLL: 4,5:1)
    Siehe auch allgemeine Anmerkung.

    Punktabzug: 0,5 Punkte

  • Prüfschritt 2.1.1a - Ohne Maus nutzbar

    Fest positioniertes Telefon-Element in rechter unterer Ecke lässt sich per Tastatur nicht ausklappen, die Nummer gibt es aber ebenfalls im Kopfbereich (jedoch nicht in der responsiven Ansicht).

    Seite 1: eher erfüllt

    Die Links im Karussell Gute Beispiele: Wir machen's effizient sind nicht mit der Tastatur erreichbar (nur die Blätter-Links) - wohl wegen der ARIA Auszeichnung mit role=listbox und role=option (vergl. Prüfschritt 4.1.2a "Name und Rolle von Bedienelementen verfügbar").
    Vergl. auch allgemeiner Hinweis.

    Seite 3: eher erfüllt

    Die Links im Karussell Die Plakate zur Kampagne - die alle die gleiche Seite neu laden - ein Fehler? - sind nicht mit der Tastatur erreichbar (nur die Blätter-Links) - wohl wegen der ARIA Auszeichnung mit role=listbox und role=option (vergl. Prüfschritt 4.1.2a "Name und Rolle von Bedienelementen verfügbar").

    Der Button more des jw-Players (Videobedienelemente) zur Einblendung z.B. des ggf. wichtigen closed captions-Schalters ist nicht tastaturbedienbar - die Elemente HD und CC werden nur bei MouseOver eingeblendet.
    Vergl. auch allgemeiner Hinweis.

    Seite 2: erfüllt

    Vergl. allgemeiner Hinweis.

    Seite 4: erfüllt

    Vergl. aber Prüfschritt 3.2.2a "Keine unerwartete Kontextänderung bei Eingabe".
    Vergl. allgemeiner Hinweis.

    Punktabzug: 0,75 Punkte

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

    Seite 1: eher erfüllt

    Die Inhalte des Karussels unterhalb der h2 Gute Beispiele: Wir machen's effizient sind nicht Teil der Fokusreihenfolge und bei nicht visueller Nutzung nicht zugänglich. Vergl. vor allem auch Prüfschritte 2.1.1a "Ohne Maus nutzbar" sowie 4.1.2a "Name und Rolle von Bedienelementen verfügbar".

    Z. T. lästige leere Fokuspunkte bei Tastaturnutzung - etwa im Bereich Fragen und Antworten vor den Links "Zur Antwort", und ebenso auf den Teasern im Bereich Energieeffizienz lohnt sich, wo nach der Script-Verlinkung des über tabindex=0 zum Bedienelement gemachten Listenelements mit role=option, bei dessen Fokussierung sowohl die Überschrift als auch der Linktext "Öffnet Einzelsicht" ausgegeben wird, danach auf dem versteckten Folgelink noch einmal "Öffnet Einzelsicht" wiederholt wird.

    Seite 3: eher erfüllt

    Bereich Deutschland macht's effizient:
    Unnötige leere Fokuspunkte auf den Teaserblöcken bei Tastaturnutzung - vergl. Kommentar zu S.1.

    Seite 2, 4: erfüllt

    Punktabzug: 0,5 Punkte

  • Prüfschritt 2.4.4a - Aussagekräftige Linktexte

    Seite 4: eher nicht erfüllt

    Der bei nicht visueller Nutzung auf allen Teasern bei Fokussierung ausgegebene gleichartige Linktext "Öffnet Einzelansicht - Infografik" ist nicht aussagekräftig, nennt nicht die verschiedenen Inhalte.

    Blätterlinks am Seitenende: "previous" und "next" nicht aussagekräftig.

    Seite 1: eher erfüllt

    Bereich "Förderprogramme" und "Aktuelles": Für Screenreadernutzer sind versteckte Link-Elemente fokussierbar. Diese haben einen Linktext "Öffnet Einzelansicht" + title-Attribut "Förderprogramme" bzw. "Meldung". Diese Linktexte sind jeweils für die 3 Teaser gleich und nicht aussagekräftig. Es gibt keine vorangehende Überschrift, die im Kontext den Linktext aussagekräftiger machen könnte (die Titel der Förderprogramme/ Meldungen sind als Absatz ausgezeichnet). Sinnvoll wäre, den für Mausnutzer klickbaren Bereich auch für Tastaturnutzer zugänglich zu machen. Der versteckte Link führt auch in anderen Prüfschritten zu Problemen.

    Bereiche "Energieeffizienz lohnt sich", "Fragen und Antworten": Hier wird der Linkext ("Öffnet Einzelansicht") über den Text im gemeinsamen li-Element oder über eine vorhergehende Überschrift aussagekräftig.
    Es wäre sinnvoll, wo möglich die vorangehende Überschriften über aria-labelelledby oder aria-describedby in den Linktext einzubeziehen.

    Seite 3: eher erfüllt

    Die Teaserblöcke im Bereich Alles, was Sie wissen müssen geben bei Screenreadernutzung bei Fokussierung nur den Text der versteckten Links "Öffnet Einzelansicht", gefolgt von title "Artikel", aus. Das ist über den Kontext nicht hinreichend aussagekräftig. Die Links sind nicht im selben p-Element wie der darüber stehende Test, die vorangehende visuelle Teaserüberschrift ist nicht als Überschrift ausgezeichnet.

    Seite 2: erfüllt

    Punktabzug: 0,25 Punkte

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

    Seite 1: eher erfüllt

    Fokus auf manchen Links bei Mausnutzung besser sichtbar als bei Tastaturnutzung - etwa im Bereich Fragen und Antworten auf den Links "Zur Antwort" (hier beim Tabben nur Systemkranz, bei Mausnutzung Unterstreichung).

    Systemkranz auf den Blätterpfeilen des Karussells über den Hntergrundbildern z.T. sehr schlecht sichtbar.

    Bereiche Geld vom Staat und Aktuelles: Die Fokushervorhebung der Teaserblöcke ist unzureichend, die Hervorhebung (eine senkrechte Linie) kann schwer zugeordnet werden.

    Seite 3: eher erfüllt

    Tastatur-Fokus auf den Teasern nur schlecht sichtbar (eine Kante des Systemkranzes).

    Tastatur-Fokus auf den Bedienelementen des Videoplayers schlecht sichtbar (der Wechsel von Dunkelgrau zu Schwarz hat eine Kontrastdifferenz von nur 2,2:1 (SOLL 4,5:1).

    Seite 2: erfüllt

    Sehr schwache Fokushervorhebung auf der "Senden"-Schaltfläche. Der Systemkranz ist kaum zu sehen.

    Seite 4: erfüllt

    Fokus auf den Teaserblöcken nur Systemkranz, könnte sehr viel deutlicher sein.

    Punktabzug: 0,25 Punkte

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

    Seite 4: eher erfüllt

    Nach Auswahl der Optionen aus den Auswahllisten für die Filterung der Beträge wird sofort die Seite neu geladen. Dies lässt sich für einzelne der selects zwar von kundigen Tastaturnutzern verhindern, welche die Optionen über ALT + Pfeil nach unten einblenden, wichtig wäre hier jedoch ein explizites Element zum Bestätigen der Filterung - gerade weil sie drei verschiedene Kriterien kombiniert. Beim Neuladen, das unausweichlich beim Verlassen eines select geschieht, geht der Fokus verloren, nun muss der Filterbereich neu von der Suche her (oder z.T., je nach Auswahl, auch vom Seitenanfang her) erreicht werden, um die dreistufige Fillter-Auswahl weiter anzupassen. Die Nutzung ist also für Tastaturnutzer ungleich mühsamer als für Mausnutzer.

    Seite 1, 2, 3: erfüllt

    Punktabzug: 0,5 Punkte

  • Prüfschritt 3.2.3a - Navigation einheitlich

    Responsive Ansicht: Der Menüschalter der Hauptnavigation und die ausgeklappte Linkliste sind initial sichtbar, verschwinden aber beide beim Schließen über den Menübutton (was Nutzer regelmäßig tun werden, da die standardmäßig ausgeklappte Navigation die Bildinhalte verdeckt). Für visuelle Nutzer ist nicht klar, wie sie nun das Navigationsmenü wieder öffnen können.

    Die Lösung, weitere Navigations-Links über den Link "mehr" an der gleichen Menüposition einzublenden, ist unkonventionell, aber praktisch brauchbar.

    Punktabzug: 0,75 Punkte

Erfüllt sind 24 von 50 Prüfschritten:

Nicht anwendbar sind 13 von 50 Prüfschritten:

Blättern: