Mit Prüfung der responsiven Ansicht bei 480px Viewport-Breite.
Punkte: 91,75 von 100 (gut zugänglich)
Mit Fehlerbehandlung.
Mit Prüfiung der Videos.
Mit Suche, Filterung, Listen und Grid-Ansicht
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.
Punktabzug: 1 Punkt
Hauptnavigation: Menüeinträge, die Untermenüs ausklappen, haben nicht die role=button und teilen den Zustand (ausgeklappt/eingeklappt) nicht über aria-expanded mit.
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.
Siehe allgemeine Hinweise.
Siehe allgemeine Hinweise.
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
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".
Siehe allgemeiner Hinweis.
Siehe allgemeiner Hinweis.
Siehe allgemeiner Hinweis.
"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 (#div#s 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
Inhaltsberich: Der Alternativtext der Grafiken lautet jeweils alt="Innovationsworkshop". Das ist wenig hilfreich. Das alt-Attribut sollte hier beschreibend oder leer sein.
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)
Punktabzug: 0,75 Punkte
Ü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".
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.
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".
Versteckte Überschrift "Listeninhalt" ist evtl. schwer verständlich.
Punktabzug: 0,75 Punkte
Die Einträge unter "Im Dialog", "Geld vom Staat: Förderprogramme" und "Aktuelles" sollten als Liste ausgezeichnet sein.
Die Einträge unter "Unterwegs mit "Deutschland macht’s effizient" sollten als Liste ausgezeichnet sein.
Punktabzug: 0,5 Punkte
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.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Textlink mit Grafik "Mehr erfahren" auf Foto mit teilweise sehr geringem Kontrast von 1,4:1 (SOLL:4,5:1).
Siehe auch allgemeine Anmerkung.
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
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).
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.
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.
Vergl. allgemeiner Hinweis.
Vergl. aber Prüfschritt 3.2.2a "Keine unerwartete Kontextänderung bei Eingabe".
Vergl. allgemeiner Hinweis.
Punktabzug: 0,75 Punkte
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.
Bereich Deutschland macht's effizient:
Unnötige leere Fokuspunkte auf den Teaserblöcken bei Tastaturnutzung - vergl. Kommentar zu S.1.
Punktabzug: 0,5 Punkte
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.
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.
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.
Punktabzug: 0,25 Punkte
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.
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).
Sehr schwache Fokushervorhebung auf der "Senden"-Schaltfläche. Der Systemkranz ist kaum zu sehen.
Fokus auf den Teaserblöcken nur Systemkranz, könnte sehr viel deutlicher sein.
Punktabzug: 0,25 Punkte
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.
Punktabzug: 0,5 Punkte
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
"Geiles Haus" Video: Die Soft Cell-Persiflage lebt vom Bild UND vom neuen Text, der den bekannten Song ironisch mit anderen Inhalten füllt. Eine zeitgleiche Audiodeskription der Bildinhalte ist nicht möglich.
"Hinter den Kulissen"-Video: eine getimte Audiodeskription ist wegen der schnellen Schnitte und dem Collagencharakter wohl nicht möglich. Eine Transkription (die ungleich länger ausfiele, wollte sie alle Bidinhalte nennen), ist theoretisch denkbar, aber wahrscheinlich wenig sinnvoll.
Pfeile für Vor- und Rückwärtsblättern im Karussellbereich Gute Beispiele: Wir machen's effizient. überlappen mit Text.
Vorschaubild der Videos nicht sichtbar (aber ein deutllicher Play-Button).
nav zur Strukturierung genutzt bei Footer-Menü und für die Sprunglinks. Hauptnavigation und Service-Navigation über Sprunglinks erreichbar.
Wohl eingedeutscht, wird aber englisch ausgesprochen verständlicher: "Hotline"
"Facebook" nicht ausgezeichnet und englisch ausgesprochen verständlicher, ist aber wohl inzwischen eingedeutscht bzw. sicher kein praktisches Problem.
Nicht ausgezeichnet: Dance Cube
"Start Playback", "more", "closed captions" (versteckte Button-Texte des Video-Players) - vergl. Bewertung in Prüfschritt 1.1.1a "Alternativtexte für Bedienelemente".
Nicht ausgezeichnet: Dance Cube
Suche unterhalb der Navigation: Beschriftung über verstecktes Label "Suchfeld", kein Button zum Auslösen der Suche. Das wäre besser.
Alle Seiten: Nicht valide lediglich wegen eines Leerzeichens in der Linkadresse (Telefonnummer)
