Sie sehen die Ergebnisse für den Prüfschritt 4.1.2a - Name und Rolle von Bedienelementen verfügbar. Zuerst kommen Webauftritte, die den Prüfschritt nicht oder nicht voll erfüllen, am Ende werden Webauftritte aufgelistet, auf die der Prüfschritt nicht anwendbar war. Auf einzelne Seiten wird hier nur eingegangen, wenn es besondere Anmerkungen gibt oder wenn das Ergebnis vom Gesamtergebnis abweicht.
Seite 1: nicht anwendbar
Originalseite im Web
Seite 2: nicht anwendbar
Originalseite im Web
Seite 3: nicht anwendbar
Originalseite im Web
Seite 4: nicht anwendbar
Originalseite im Web
Seite 5: nicht erfüllt
Originalseite im Web
Kontaktformular: Checkbox Einverständniserklärung: Ist ein leeres span class=checkboxBtn
(nur mit Firebug erkennbar). Die eigentliche Checkbox ist mit .invisible
versteckt. Sie ist weder für sehende Tastaturnutzer noch für Sreenreadernutzer auswählbar.
Seite 1: nicht erfüllt
Originalseite im Web
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
Originalseite im Web
Siehe allgemeine Hinweise.
Seite 3: teilweise erfüllt
Originalseite im Web
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.
Seite 4: eher erfüllt
Originalseite im Web
Siehe allgemeine Hinweise.
Seite 1: teilweise erfüllt
Originalseite im Web
Suche im Inhaltsbereich: Nach Auswahl des Anklickfeldes für den Suchbereich (E-Zeitschriften, Beluga-Katalog, usw) wird der neue Status (ausgeklappt) nicht über geeigente Attribute wie aria-expanded
and Screenreader übergeben. Die passende Rolle wäre die eines nativen select
("kombiniertes Eingabefeld ([Default-Wert] reduziert"), die passende Mausnutzungsweise die Pfeiltastennavigation zur Auswahl.
Seite 2: teilweise erfüllt
Originalseite im Web
Vergl. allgemeine Anmerkungen.
Seite 3: teilweise erfüllt
Originalseite im Web
Ausklapp-Links sind nicht mit button
oder Links mit der entsprechenden role="button"
umgesetzt und geben nicht den Ausklapp-Status über aria-expanded
wieder.
Vergl. auch allgemeine Anmerkungen.
Seite 1: erfüllt
Originalseite im Web
Seite 2: erfüllt
Originalseite im Web
Seite 3: eher erfüllt
Originalseite im Web
Tabpanel / Reiternavigation "Informationen zum Thema": Die vorgesehenen ARIA-Rollen für dieses Inhaltselement werden nicht verwendet.
Seite 4: erfüllt
Originalseite im Web
Seite 4: eher erfüllt
Originalseite im Web
Mitgliedserklärung: Für die Anzeige des aktuellen Prozesschritts (1,2,3 ) werden button
-Elemente verwendet. Wenn diese Schaltflächen nicht verfügbar sind sollten sie mit aria-disabled
(bzw. einer vergleichbaren HTML-Technik) ausgezeichnet werden.
Ansicht: "Prüfen und Abschicken": Das Bedienelement zum Bearbeiten einer Eingabe, blendet das ensprechende Formularfeld ein. Dieser Zustand wird jedoch nicht mit aria-expanded
vermittelt.
Seite 1: erfüllt
Originalseite im Web
Seite 2: erfüllt
Originalseite im Web
Seite 3: erfüllt
Originalseite im Web
Seite 4: teilweise erfüllt
Originalseite im Web
Tooltips im Formular: Auch für Tastaturnutzer gut zugänglich. Es fehlen allerdings die notwendigen ARIA-Rollen um die Darstellung auch im Screenreader gut nutzbar zu machen (#role=tooltip# und aria-describedby
, siehe z.B. http://w3c.github.io/aria-practices/ - Tooltip-Widget oder
https://www.w3.org/TR/WCAG20-TECHS/aria ARIA1, Bsp. 4).
Seite 1: erfüllt
Originalseite im Web
Seite 2: erfüllt
Originalseite im Web
Seite 3: teilweise erfüllt
Originalseite im Web
Umsätze, Menü Export: Der Link zur Auswahl des Dateiformats (Pulldown-Menü) ist ein span
-Element ohne semantische Informationen.
Siehe dazu auch: 2.1.1a "Ohne Maus nutzbar"
Seite 4: erfüllt
Originalseite im Web
Seite 5: erfüllt
Originalseite im Web
Seite 1: eher erfüllt
Originalseite im Web
Die Akkordeons "Bürger", "Unternehmen" und "Einrichtungen des Gemeinwohls" besitzen keine Semantik, ob sie geschlossen oder geöffnet sind.
Seite 2: eher erfüllt
Originalseite im Web
Der Bereich "Zumeldung einer weiteren Wohnung" im Schritt "2. Wohnung" besitzt keine Semantik, ob er geschlossen oder geöffnet ist.
Seite 3: eher erfüllt
Originalseite im Web
Den Bereichen "Person/Firma", "Wohnung/Betriebsstätte", "Zahlungsweise" im Schritt "2. Änderung" fehlt eine Semantik, ob sie geschlossen oder geöffnet sind.
Hinweis: Die Fehlermeldung "Sie haben bisher keine Änderungen eingegeben" könnte mit einer WAI ARIA-Technik für Screenreader-Nutzer automatisch ausgegeben werden.
Seite 4: eher erfüllt
Originalseite im Web
Die Akkordeons "Singles, Familien und Wohngemeinschaften", "Studierende, Azubis und Schüler" usw. besitzen keine Semantik, ob sie geschlossen oder geöffnet sind.
Seite 5: erfüllt
Originalseite im Web
Seite 1: erfüllt
Originalseite im Web
Seite 2: teilweise erfüllt
Originalseite im Web
In den Akkordeon-Modulen wird über aria-expanded
der falsche Status angesagt. false
in beiden Zuständen (auch im ausgeklappten Zustand).
Seite 3: eher erfüllt
Originalseite im Web
Der Ausklapp-Bereich "Erweiterte Informationen" hat keinen Status (#aria-expanded#)
Seite 4: erfüllt
Originalseite im Web
Seite 1: erfüllt
Originalseite im Web
Seite 2: erfüllt
Originalseite im Web
Seite 3: teilweise erfüllt
Originalseite im Web
Siehe Anmerkungen bei Prüfschritt 2.1.1a - "Ohne Maus nutzbar". Die dort geschilderten Probleme sind auf eine fehlende Rollenzuordnung zurückzuführen.
Seite 4: erfüllt
Originalseite im Web
Seite 5: erfüllt
Originalseite im Web
Seite 1: erfüllt
Originalseite im Web
Seite 2: erfüllt
Originalseite im Web
Seite 3: erfüllt
Originalseite im Web
Seite 4: eher erfüllt
Originalseite im Web
Tab-Panel: Die Reiter sind zwar mit WAI-ARIA ausgezeichnet (aria-expanded) und der Zustand wird bei Auswahl eines Reiters korrekt angesagt ("erweitert"), zusätzlich wird jedoch "nicht verfügbar" ausgegeben, was zu Irritierungen beim Nutzer führen kann. (FF/NVDA: "erweitert - nicht verfügbar").
Seite 5: eher erfüllt
Originalseite im Web
Akkordeon: Der Zustand der Akkordeon-Panels wird nicht wiedergegeben (reduziert, erweitert). Für blinde Nutzer ist das Modul dadurch schwer verstänlich. Sie aktivieren eine Link und Inhalt wird eingeblendet, ohne Rückmeldung.
Seite 1: eher erfüllt
Originalseite im Web
Vergl. allgemeine Anmerkungen.
Seite 2: eher erfüllt
Originalseite im Web
Vergl. allgemeine Anmerkungen.
Seite 3: eher erfüllt
Originalseite im Web
Vergl. allgemeine Anmerkungen.
Seite 1: teilweise erfüllt
Originalseite im Web
Zur Navigation in den Inhalten der "Chronik" wird ARIA role=silder
eingesetzt. Die Umsetzung ist nicht vollständig und teilweise fehlerhaft. Das erschwert die Bedienung speziell beim Zugang mit dem Screenreader. So sind z.B. die Werte für aria-valuemin
und aria-valuemax
auf 1 gesetzt (korrekt wäre 2000 bzw. 2016). Es gibt keine programmatische Verknüpfung zwischen dem Slider-Element und dessen Beschriftung sowie den dargestellten Inhalten.
Eine Darstellung mit einfachen Buttons zum vor- und zurückblättern (siehe z.B. "Aktionspläne") wäre deutlich besser nutzbar.
Seite 2: erfüllt
Originalseite im Web
Seite 3: erfüllt
Originalseite im Web
Seite 4: erfüllt
Originalseite im Web
Seite 1: eher erfüllt
Originalseite im Web
Sprachwechsler: Der Sprachwechsler ist nicht mit ARIA umgesetzt, der title "Dropdown mit der Sprachauswahl öffnen" vermittelt jedoch zumindest was passiert.
Seite 2: erfüllt
Originalseite im Web
Seite 3: erfüllt
Originalseite im Web
Seite 4: erfüllt
Originalseite im Web
Akkordeon: Das Modul erklärt sich über den Linktext, der je nach Zustand (eingeklappt oder ausgeklappt) "anzeigen" oder "verbergen" lautet. Es ist somit für Screenreader-Nutzer nutzbar.
Seite 1: eher erfüllt
Originalseite im Web
Mobile Ansicht
Bei der Menüschaltfläche ist programmatisch nicht erkennbar, ob das Menü auf- oder zugeklappt ist, z.B. mit dem Attribut "aria-expanded".
Seite 6:
Originalseite im Web
Seite 1: teilweise erfüllt
Originalseite im Web
Seite 2: teilweise erfüllt
Originalseite im Web
Seite 3: erfüllt
Originalseite im Web
Seite 4: teilweise erfüllt
Originalseite im Web
Hier zusätzlich: Suchergebnis: Sortierung ändern (#i .listtoggle#): Keine Rolle verfügbar.
Seite 5: erfüllt
Originalseite im Web
Seite 1: nicht anwendbar
Originalseite im Web
Seite 2: eher erfüllt
Originalseite im Web
Funktion "Dokumentvorschau", Icon als a
-Element ohne href
-Attribut ausgezeichnet.
Seite 3:
Originalseite im Web
Seite 4:
Originalseite im Web
Seite 1: erfüllt
Originalseite im Web
Seite 2: eher nicht erfüllt
Originalseite im Web
Betrifft die wichtigen Filterfunktionen "Sortieren nach" und "Filtern nach...": Die div-Elemente werden mittels JavaScript zu Select-Menüs.
Der Screenreader gibt nur "neuste Disskussion - Link" oder "Alle - Link" aus. Die Semantik sollten mittels ARIA-Attribute so zur Verfügung gestellt werden, dass die Funktion des Elements samt Beschriftung auf für Screenreadernutzer deutlich wird.
Seite 3: erfüllt
Originalseite im Web
Seite 1: erfüllt
Originalseite im Web
Siehe Allgemeine Anmerkungen.
Seite 2: erfüllt
Originalseite im Web
Siehe Allgemeine Anmerkungen.
Seite 3: erfüllt
Originalseite im Web
Siehe Allgemeine Anmerkungen.
Seite 4: erfüllt
Originalseite im Web
Siehe Allgemeine Anmerkungen.
Seite 5: erfüllt
Originalseite im Web
Siehe Allgemeine Anmerkungen.
Seite 3: erfüllt
Originalseite im Web
Bei den Buttons Interessent und Leistungserbringer, die Inhalte einblenden, wäre aria-expanded
passender als aria-pressed".
Seite 4: erfüllt
Originalseite im Web
Die Taste "Sucheinstellungen ändern" ist semantisch ein Toggle-Button und sollte mit aria-expanded
ausgezeichnet sein. Besser wäre das Verstecken der Formularinhalte über display:none
vor Aktivieren der Taste, dann entfiele die verwirrende Darstellung des Formulars in der engen horizontalen Spalte beim Durchtabben, und mehrere unnötige Fokuspositionen vor dem Erreichen der Ergebnisse (vergl. auch Bewertung in Prüfschritt 1.3.2a "Sinnvolle Reihenfolge").
Ergebnistabelle: Der Link "Zur Merkliste hinzufügen" sollte semantisch gesehen besser ein Button sein - mit Status aria-pressed
und auch visueller Änderung des Buttons (Haken?).
Seite 1: erfüllt
Originalseite im Web
Vergl. allgemeine Anmerkung.
Seite 3: erfüllt
Originalseite im Web
Vergl. allgemeine Anmerkung.
Seite 5:
Originalseite im Web
Seite 1: nicht anwendbar
Originalseite im Web
Seite 4: nicht anwendbar
Originalseite im Web
Seite 3: erfüllt
Originalseite im Web
Hinweis: Bei mehreren Texteingabefeldern wird Autovervollständigung angekündigt, ohne dass eine existiert.
Der Name / Status von nicht oder unrichtig ausgefüllten Formularelementen wird nicht über eine für Screenreadernutzer zugängliche Weise (etwa durch Umschreiben der vorgängigen Feldbezeichnung oder des title
-Attributs) vermittelt - bewertet in Prüfschritt 3.3.2a "Formularfelder richtig beschriftet".
Seite 4: erfüllt
Originalseite im Web
Hinweis: Im Bereich "Ergebnis Abiturprüfung (soweit bereits abgelegt)" werden Eingabefelder mit Autovervollständigung angekündigt, ohne dass eine Autovervollständigung existiert.
Der Name / Status von nicht oder unrichtig ausgefüllten Formularelementen wird nicht über eine für Screenreadernutzer zugängliche Weise (etwa durch Umschreiben der vorgängigen Feldbezeichnung oder des title
-Attributs) vermittelt - bewertet in Prüfschritt 3.3.2a "Formularfelder richtig beschriftet".
Seite 5: erfüllt
Originalseite im Web
Der Name / Status von nicht oder unrichtig ausgefüllten Formularelementen wird nicht über eine für Screenreadernutzer zugängliche Weise (etwa durch Umschreiben der vorgängigen Feldbezeichnung oder des title
-Attributs) vermittelt - bewertet in Prüfschritt 3.3.2a "Formularfelder richtig beschriftet".
Seite 5: erfüllt
Originalseite im Web
Das ARIA-Attribut aria-expanded
sollte auf den verlinkten h3
-Überschriften genutzt werden, um Screenreader-Nutzern den Status der Ausklappbereiche zu vermitteln.
Seite 1: erfüllt
Originalseite im Web
Der Text des Stop-Links (Slider) spiegelt den Status nicht korrekt wieder (Stop wird angezeigt wenn das Karussel bereits gestoppt ist). Sinnvoll wäre hier ein Wechsel/Toggle von Start und Stop. Der Link sollte zudem mit role=button
ausgezeichnet werden.
Seite 6:
Originalseite im Web
Seite 2:
Originalseite im Web
Seite 4: erfüllt
Originalseite im Web
Bei der Reiternavigation am Seitenende (Kommentar / Email / Facebook etc.) wäre eine korrektere Semantik die Nutzung von passenden Aria-Rollen tab
, tablist
, tabpanel
, und den dazugehörigen Attributen und Zuständen. Siehe auch Prüfschrtitt 2.4.3a "Schlüssige Reihenfolge bei der Tastaturbedienung".
Seite 4:
Originalseite im Web
Seite 5:
Originalseite im Web
Seite 4:
Originalseite im Web
Seite 4: erfüllt
Originalseite im Web
Ausklappliste stimmig mit WAI-ARIA Rollen ausgezeichnet.
Seite 4: erfüllt
Originalseite im Web
"+" und "-" Buttons der Karte als div
ohne Aria role
umgesetzt (es gibt aber eine alternative gleichwertige Listenansicht).
Seite 4:
Originalseite im Web
Seite 5:
Originalseite im Web
Seite 4:
Originalseite im Web