Punkte: 91,5 von 100 (gut zugänglich)
Beispieldaten ausfüllen. Prozess bis einschl. Schritt 3 prüfen.
Mit Captcha-Prüfunng.
Mit Ausklappbereichen.
Punktabzug: 2 Punkte
Nutzung des obsoleten align
-Attributs beim img
-Element (5x).
Siehe allgemeine Bemerkung.
Siehe allgemeine Bemerkung.
Siehe allgemeine Bemerkung.
Siehe allgemeine Bemerkung.
Siehe allgemeine Bemerkung.
Punktabzug: 1 Punkt
Nutzung mit IE / NVDA: CAPTCHA bei Schritt 3. Zahlungsweise:Die Aktivierung des Links fürs Abspielen "Zahl vorlesen" liest das iframe
von Beginn an vor, nicht die Zahlen des CAPTCHAs.
Nutzung mit Firefox / NVDA: Die Aktivierung des Links fürs Abspielen ("Zahl vorlesen") versetzt gleichzeitig den Fokus auf das Eingabefeld, wodurch zeitgleich zum Abspielen der CAPTCHA-Sounddatei das Label des Eingabefeldes vorgelesen wird ("Bitte geben Sie die zufallsgenerierte Zahl ein, die auf dem Bild zu sehen ist.") und deshalb der vorgelesenen Text sehr schwer verständlich ist.
CAPTCHA in Schritt "3. Zahlungsweise": Gleiches Verhalten wie bei Seite 3 beschrieben.
Punktabzug: 1 Punkt
Die h2
"Ich habe eine Frage als", ergänzt durch die h2
-Auszeichnung der Links "Bürgerin oder Bürger", "Unternehmen oder Institution", "Einrichtung des Gemeinwohls" ist nicht sinnvoll da die Überschriften nicht für sich stehen können. Hier wird nichts überschrieben. Und die Überschrift "Ich habe eine Frage als" ist für sich genommen nicht sinnvoll.
"Häufig gefragt" auf der rechten Seite sieht aus wie eine Überschrift, ist aber nicht entsprechend ausgezeichnet.
Punktabzug: 0,75 Punkte
Logo "Einfach für Alle. Der Rundfunkbeitrag" ist ohne Hintergrund und ggf. bei Einstellng ähnlicher Hintergrundfarben nicht leicht erkennbar.
Bei benutzerdefinierten Farben werden alle Links unterstrichen dargestellt.
Da auch die Verweise zur aktuellen Seite noch verlinkt sind, gibt es keine Möglichkeit, sich bei benutzerdefinierten Farben genau so gut zu orientieren wie bei der Nutzung mit den von der Seite vorgegebenen Farben.
Punktabzug: 0,5 Punkte
Seiten sind über ARIA Landmarks strukturiert. Die Suche ist allerdings nicht mit dabei.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Punktabzug: 0,5 Punkte
Responsive Ansicht: Die Fokusreihenfolge ist bei der Hauptnavigation ist ungünstig: Nach Aktivierung des Hamburger-Menüs zum Ausklappen der Hauptnavigation sollten deren Elemente fokussiert werden. Diese sind aber nur durch Rückwärtstabben erreichbar.
Vergl. allgemeine Anmerkung.
Schritt 1. Beim Aufrufen der Seite wird der Fokus auf das eingebettete Formular bzw. den Weiter-Button gesetzt. Dadurch werden die erläuternden Tabellen übersprungen und ggf. von Screenreader-Nutzern nicht wahrgenommen.
Schritt 4. Zusammenfassung: Die Fokusversetzung auf den button
"Antrag erstellen" hat Vorteile, was das schnelle Durchlaufen des Prozesses angeht, überspringt aber die Neuansicht der eingegebenen Daten vor dem Abschicken mit der ggf. wichtigen Korrekturmöglichkeit von "Persönliche Daten" und "Antragsdaten". Vergl. Prüfschritt 3.3.4a "Fehlervermeidung wird unterstützt".
Vergl. allgemeine Anmerkung.
Scritt 1: Wie auf Seite 2 landet man beim ersten Laden der Seite auf dem ersten Eingabefeld des iFrames. Besser wäre es, wenn auch Tastatur-Nutzer sich zunächst selbst einen Überblick verschaffen könnten.
Schritt 4. Zusammenfassung: Die Fokusversetzung auf das Captcha-Eingabefeld hat Vorteile, was das schnelle Durchlaufen des Prozesses angeht, überspringt aber die Neuansicht der eingegebenen Daten vor dem Abschicken mit der ggf. wichtigen Korrekturmöglichkeit von "Persönliche Daten" , "Wohnung", und "Zahlungsweise / Bankverbindung". Vergl. Prüfschritt 3.3.4a "Fehlervermeidung wird unterstützt".
Vergl. allgemeine Anmerkung.
Vergl. allgemeine Anmerkung.
Ähnliches Problem wie auf Seite 2 und 3. Der Fokus landet beim Aufrug der Seite direkt auf "Mein Anliegen*"
Vergl. allgemeine Anmerkung.
Punktabzug: 0,5 Punkte
Einige wenig aussagekräftige Links (etwa die "Mehr erfahren"-Links auf Seite 4 und 5) erhalten nähere Bestimmung über ein title
-Attribut. Dieses wird aber abhängig von Hilfsmitteleinstellungen nicht unbedingt von Screenreadern ausgegeben. Besser wäre die Verwendung von aussagekräftigeren Linktexten (evtl. auch mit Screenreader-zugänglich versteckten zusätzlichen Inhalten).
Schritt 4, Zusammenfassung: Die Links "Korrigieren" sind nicht leicht dem Kontext, etwa dem Abschnitt mit legend
"Persönliche Daten", zuzuordnen. Sinnvoll für Screenreader-Nutzer wäre hier die Erweiterung des Linktextes auf "Persönliche Daten korrigieren" bzw. "Antragsdaten korrigieren" evtl. auch durch Nutzung zugänglich verstecken Linktextes.
Der Link "Video ansehen" sollte deutlich machen, dass hier auf ein extern gehostetes Angebot verwiesen wird, das nicht barrierefrei umgesetzt ist.
Punktabzug: 0,25 Punkte
Keine Fokushervorhebung auf dem Logo und den Links zu ARD, ZDF und Deutschlandradio.
Keine Fokushervorhebung auf dem Suchen-Submit (Lupen-Icon).
Responsive Ansicht: Keine Fokushervorhebung auf den wichtigen Icons zum Öffnen der Hauptnavigation und der Suche.
S. 2-5: Die Hervorhebung der weißen Links mit grauem Hintergrund ist nicht leicht erkennbar: der Kontrastabstand zwischen dem dunkelgrauen und dem schwarzen Hintergrund bei Fokussierung liegt bei 2,88:1.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Punktabzug: 0,25 Punkte
Einige Hilfstexte, die beim Durchtabben oder beiMouseOver eingeblendet werden, sind für Screenreader-Nutzer nicht zugänglich. Potenziell wichtig zum Beispiel: "Ihre 9-stellige Beitragsnummer (früher Teilnehmernummer) finden Sie auf der Anmeldebestätigung, Ihrem Kontoauszug oder auf der Zahlungsaufforderung."
Einige Hilfstexte, die beim Durchtabben oder beiMouseOver eingeblendet werden, sind für Screenreader-Nutzer nicht zugänglich: Lage der Wohnung / Adresszusatz.
Die Fehlermeldungen bei vergerssenen Eingaben könnten spezifischer sein. Vergisst man nur die Anrede, sagt die Fehlermeldung "Sie müssen mindestens Anrede, Name, Vorname, Straße, Hausnummer, Postleitzahl und Ort angeben." Besser wäre der konkrete Hinweis auf die jeweils vergessenene oder unrichtig ausgefüllten Eingaben.
Punktabzug: 0,5 Punkte
S. 2 und 3:
Fehleingaben oder fehlende Eingaben werden beim Auslösen des Buttons "Weiter" nur visuell angezeigt und der Fokus wird auf das erste zu korrigierende Feld gesetzt. Zusätzlich sollte die Beschriftung der Eingabefelder einen Hinweis auf Korrekturbedarf enthalten (bei nicht semantischer E-Mail-Adresse etwa "Bitte geben sie eine valide E-Mail-Adresse ein"). Vergleiche Prüfschritt 3.3.1a - "Fehlermeldungen hilfreich".
Inkorrekte Auszeichnung der Radio-Buttons unter "Sind Sie bereits mit einer Wohnung angemeldet?*": Beim Fokussieren des input type=radio
, der standardmäßig auf "Nein" steht, wird von Screenreadern nicht der wichtige Fragetext, auif den sich die JA/Nein Eingabe bezieht, ausgegeben. Die Frage muss erst durch rücklaufende Pfeiltastennavigation ermittelt werden.
Zwei verschiedene label
sind hier mit dem ersten input type=radio
("Ja") verknüpft: sowohl die Frage "Sind Sie bereits mit einer Wohnung angemeldet?*" als auch "Ja". Stattdessen sollte die Frage als legend
eines beide Radio-Elemente umschließenden fieldset
umgesetzt werden. Dann wird sie bei beiden Optionen mit vorgelesen.
Schritt 2: Wohnung: Hier ist "Abweichende Adresse" nicht als legend
eines die input type=radio
umschließenden fieldset
ausgezeichet, sondern direkt mit dem ersten Radiobutton verknüpft. Durch den Einschluss der erklärenden Pop-up-Texts in das Label der Radio-Buttons entsteht hier weniger ein praktisches Problem.
Die dynamisch eingeblendeten Adresszusatz-Beispiele aus im Custom-Attribut des Eingabefeldes "Adresszusatz" sind für Screenreader-Nutzer nicht erreichbar.
Das label
"Datei anhängen" wird bei der Fokussierung des Schalters "Durchsuchen" nicht ausgegeben.
Der dynamisch eingeblendete Hilfstext zu erlaubten Dateiformaten, der aus dem Custom-Attribut des input
-Elements generiert wird, ist für Screenreadernutzer nicht verfügbar (verg. Prüfschritt 2.1.1a "Ohne Maus nutzbar").
Der dynamisch eingeblendete Hilfstext "Durch Eingabe der Zahl im Bild wird gewährleistet..." aus dem Custom-Attribut des input
-Elements Zahl*: ist für Screenreader-Nutzer nicht verfügbar.
Fehleingaben oder fehlende Eingaben werden beim Auslösen des Buttons "Weiter" nur visuell angezeigt und der Fokus wird auf das erste zu korrigierende Feld gesetzt. Zusätzlich sollte die Beschriftung der Eingabefelder einen Hinweis auf Korrekturbedarf enthalten (bei nicht semantischer E-Mail-Adresse etwa "Bitte geben sie eine valide E-Mail-Adresse ein"). Vergleiche Prüfschritt 3.3.1a - "Fehlermeldungen hilfreich".
Punktabzug: 0,75 Punkte
Das Suchfeld oben rechts besitzt einen Submit-Button, der über einen Icon-Font beschriftet ist. Das title
-Attribut, das über die Funktion Auskunft gibt, kann ggf. von Screenreadern nicht ausgelesen werden.
title
-Attribute auf Links mit Icon (etwa: "Wechseln Sie zu 'Wohnung anmelden'") schaffen unnötige Redundanz. Für Screenreader-Nutzer sind die Linktexte ausreichend, für visuelle Nutzer ist der Tooltip überflüssig.
Letzter Prozessschritt Antragsformular: Zum Teil werden br
-Elemente als Abstandshalter eingesetzt.
Evtl. wäre es sinnvoller, wenn die Optionen "Zahl vorlesen" und "Neue Zahl anfordern" *nach* der Ausgabe des Eingabefeld-Labels für das CAPTCHA kommen. Vorgeschaltet ist der Kontext und Sinn dieser Elemente unklar. Vergleiche vor allem Prüfschritt 2.4.3a "Schlüssige Reihenfolge bei der Tastaturbedienung".
Reihenfolge der Elemente beim CAPTCHA: hier das gleiche Problem wie für Seite 3 beschrieben.
Fehleingaben oder fehlende Eingaben werden beim Auslösen des Buttons "Weiter" nur durc hFarbänderung der Beschriftungen und Rsahmen der Eingabefelder angezeigt. Zusätzlich sollte die Beschriftung der Eingabefelder einen Hinweis auf Korrekturbedarf enthalten (bei nicht semantischer E-Mail-Adresse etwa "Bitte geben sie eine valide E-Mail-Adresse ein"). Vergleiche auch Bewertung in Prüfschritt 3.3.2a "Formularfelder richtig beschriftet".
Kontrast der hervorgehobenen Schritte (weiß auf grau) mit 2,22:1 knapp nicht ausreichend. (Soll für großen Text: 3:1)
Kontrast der hervorgehobenen Schritte (weiß auf grau) mit 2,22:1 knapp nicht ausreichend. (Soll für großen Text: 3:1)
Anmerkung zur integrierten Bewertung von Prüfschritt 1.4.4a und 1.4.4b:
Im Zuge der Angleichung an die WCAG 2.0 werden im BITV-Test beide z.Zt. noch getrennt vorhandenen Schriftvergrößerungs-Prüfschritte zukünftig zusammen genommen bewertet.
Da nach WCAG 2.0 jede Art der Schriftvergrößerung zur Erfüllung von Success Criterion 1.4.4 ausreicht, zählt im BITV-Test für beide Prüfschritte 1.4.4a und 1.4.4b zukünftig die Bewertung des jeweils besser bewerteten Prüfschritts, d.h. der jeweils schlechter bewertete wird unabhängig von dem schlechteren Ergebnis auf dem Wert des besser bewerteten Prüfschritts gestellt.
Bei der Anzeige der Schrittfolge ist bei 150% der 1. Schritt nicht mehr lesbar, Schritt 4 bricht um.
Bei der Anzeige der Schrittfolge sind bei 150% Schritt 1 und 2 nicht mehr lesbar.
Anmerkung zur integrierten Bewertung von Prüfschritt 1.4.4a und 1.4.4b:
Im Zuge der Angleichung an die WCAG 2.0 werden im BITV-Test beide z.Zt. noch getrennt vorhandenen Schriftvergrößerungs-Prüfschritte zukünftig zusammen genommen bewertet.
Da nach WCAG 2.0 jede Art der Schriftvergrößerung zur Erfüllung von Success Criterion 1.4.4 ausreicht, zählt im BITV-Test für beide Prüfschritte 1.4.4a und 1.4.4b zukünftig die Bewertung des jeweils besser bewerteten Prüfschritts, d.h. der jeweils schlechter bewertete wird unabhängig von dem schlechteren Ergebnis auf dem Wert des besser bewerteten Prüfschritts gestellt.
Tabelleninhlate überschreiten leicht den Zellenrand, werden geringfügig vom rechten Briowserfensterrand abgeschi8tten (ohne horizontale Scrollmöglichkeit). Text dennoch lesbar.
Mindestens 20 MInuten stehen zum Ausfüllen zur Vefügung
Mindestens 20 MInuten stehen zum Ausfüllen zur Vefügung
Zwar wird aus den Unterstreichungen innerhalb der Navigation deutlich, wo man sich gerade im Webauftritt befindet, doch verweisen die Seiten grundsätzlich auch auf sich selbst.
Daten werden in Schritt 4. Zusammenfassung vorm Abschicken noch einmal angezeigt und können korrigiert werden.. Durch die Fokusversetzung auf Elemente unterhalb der Anzeige können Sie jedoch von Screenreadernutzern unter Umständen übersehen werden (vergl. Prüfschritt 2.4.3a "Schlüssige Reihenfolge bei der Tastaturbedienung").
Eingegebene Daten werden in Schritt 4. Zusammenfassung vorm Abschicken noch einmal angezeigt und können korrigiert werden. Durch die Fokusversetzung auf Elemente unterhalb der Anzeige können Sie jedoch von Screenreadernutzern unter Umständen übersehen werden (vergl. Prüfschritt 2.4.3a "Schlüssige Reihenfolge bei der Tastaturbedienung").
Das ARIA-Attribut aria-expanded
sollte auf den verlinkten h3
-Überschriften genutzt werden, um Screenreader-Nutzern den Status der Ausklappbereiche zu vermitteln.