Mit Prüfung der mobilen Version bei 320 px Breite.
Punkte: 94 von 100 (gut zugänglich)
In manchen Fällen sind beim Durchtabben die Elemente der Bereichsnavigation (Kontrastansicht, Schriftgröße, Suche) nicht zu erreichen und damit nicht tastaturbedienbar. Das Problem ist nicht immer reproduzierbar. Es ist unklar, wann bzw. warum das Problem auftritt, womit also das zeitweilig geänderte Verhalten zu tun hat.
Das Flyout-Menü der Erkrankungen ist ohne Screenreader mit der Tastatur zu öffnen, nicht aber, sobald Screenreader (geprüft mit NVDA) angeschaltet sind (überprüft in IE / und Firefox sowohl mit NVDA als auch JAWS). Auf Seite 1 stehen die gleichen Optionen auch außerhalb des Flyoutmenüs, auf den Seiten 2 und 3 kann die Navigation im Fußbereich benutzt werden.
Seiten 2 und 3, Player "Website vorlesen": Die Einstellung der Lautstärke funktioniert mit Pfeiltasten nicht, wenn Screenreader laufen.
Responsive Ansicht:
Probleme entstehen bei der Tastaturnutzung. Bei 640px bzw. 320px Fensterbreite ist das Hamburger-Icon zwar tastaturfokussierbar, ruft aber nicht das Navigationsmenü auf. Nicht immer reproduzierbar.
Andere Probleme entstehen bei der responsiven Ansicht mit eingeschaltetem Screenreader. Wenn das Navigationsmenü über den Hamburger-Button eingeblendet werden kann (z.B: Breite 1280px, 200% Vergrößerung), wird zwar der korrekte Status (erweitert/reduziert) ansagt, der Fokus wird aber - wohlgemerkt bei Screenreader-Nutzung - nicht in das nun angezeigte Menü versetzt, dass sich auch bei Weitertabben nicht erreichen lässt. Stattdessen werden Menüpunkte im ausgegrauten Hintergrund fokussiert / ausgegeben. Dieses Verhalten tritt bei NVDA sowohl im IE als auch in Firefox auf.
Siehe allgemeine Anmerkungen. Das Problem des nicht zu öffnenden Menüs ist hier geringer, da die Menüoptionen des Ausklappmenüs im permanent sichtbaren Bereich wiederholt werden.
Die Sprunglinks in der rechten Spalte funktionieren bei Screenreader-Nutzung (im NVDA) nicht - ohne Screenreader wird der Fokus auf die entsprechende Stelle des Inhaltsbereichs gesetzt.
Siehe auch allgemeine Anmerkungen.
Die nur bei Tastaturnutzung eingeblendeten Links "Weiter zum Inhalt | Zur Bereichsnavigation | Zurück zum Hauptmenü" funktionieren nicht, wenn der Screenreader (getestet mit NVDA) aktiv ist.
Siehe vor allem allgemeine Anmerkungen.
Die Suchergebnisse werden als Ganzes fokussiert. Ist der Screenreader aktiv, führt Auslösen mit Enter oder Return zum Aufruf eines Kontext-Menüs. Der verlinkte Inhalt kann nach Pfeiltastennavigation und Enter erreicht werden, öffnet sich allerdings als neues Fenster im privaten Modus.
Siehe vor allem allgemeine Anmerkungen.
Punktabzug: 1,5 Punkte
Z.T. seltsame Fokussprünge beim Durchtabben: selbst nach Neuladen über F5 springt der Fokus z.T. direkt in die Liste der Krankheiten. Nicht immer gleichermaßen reproduzierbar.
Der Fokus springt beim Zurücktabben aus dem Flyout-Menü nicht zu den inhaltlich vorgelagerten Elementen (Suche, Kontrastansicht usw.), sondern in den Browser-Chrome.
IE: Nach Akzeptieren der Cookies geht der Fokus vom Logo direkt in die Liste der Krankheiten (unter "Worüber möchten Sie sich informieren"). Login, Kontrastversion, Texttergrößerung und Suche werden übersprungen. Das Problem ist nicht ohne Weiteres reproduzierbar.
Nach Fokussierung der Funktion "Website vorlesen" mittels Tastatur springt der Fokus auf den Play-Button - Das Pause-Symbol sollte stattdessen angezeigt werden. Die erneute Aktivierung über Enter / Return stoppt nicht sofort das Vorlesen, erst wird der Pause-Button angezeigt, dann erfolgt beim zweiten Enter das Stoppen.
Siehe vor allem allgemeine Hinweise.
Siehe allgemeine Hinweise.
Punktabzug: 1 Punkt
Die Hierarchie der Inhalte wird nicht von den verwendeten Überschriftenebenen reflektiert. Die Ergebnisse unterhalb der h1 Suchergebnisse für "haut" sollten durchgängig mit einer h2 ausgezeichnet sein. Zur Zeit sind einige Ergebnisse mit h1 und andere mit h2 ausgezeichnet, wodurch irreführende Hierarchien entstehen. So kommt es dazu, dass h2-Überschriften mit verschiedenen Inhalten z.B. "Morbus Crohn bei Kindern und Jugendlichen..." und "Wie erkenneich eine Psoriasis Arthritis?" nicht zur übergeordneten Überschrift (#h1#) z.B. "Gut informiert über Acne inversa..." passen.
Punktabzug: 0,75 Punkte
Erfüllung der Kontrastanforderung über Styleswitcher. Die (geringeren) Anforderungen an Kontraste für die Ausgangs- bzw. Standardversion sind aber vielfach nicht erfült.
Kontrast des Labels "Suche" (nach Aufruf der Suche im Menü des Kopfbereichs) nur 1,85:1. Bei Erfüllung der Kontrastanforderung über Style-Switcher ist das SOLL für die Standardversion 3,5:1 für normalen Text (20px, nicht fett).
S. 2 und 3:
Kasten "AbbVieCare Serviceprogramm", weiß auf hellgrün: Kontrastverhältnis nur 1,8:1 (Soll bei Erfüllung über Styleswitcher 3,5:1)
Link "Zum Serviceprogramm", weiß auf hellgrün: Kontrastverhältnis nur 1,54:1 (Soll bei Erfüllung über Styleswitcher 3,5:1)
Test "Worüber möchten Sie sich informieren (hellgrün auf hellgrau) zwischen 1,84:1 - SOLL für die Standardversion ist bei Erfüllung der Kontrastanforderung über Style-Switcher 3:1 für großen Text.
"Mehr erfahren" Links (hellgrün auf weiß, weiß auf hellgrün) haben ein Kontrastverhältnis von nur 1,94:1 (SOLL bei Erfüllung über Styleswitcher 3,5:1)
Teasertext "Abbvie Care ist unser Angebot für Sie...", Überschrift "Umfangreiches Serviceprogramm..." haben ein Kontrastverhältnis von nur 1,94:1 (SOLL bei Erfüllung über Styleswitcher für großen Text 3:1)"
Überschrift im Einleitungsbereich "Was ist Rheumatoide Arthritis" 1,8:1, (SOLL bei Erfüllung über Styleswitcher 3:1)
Text im Einleitungsbereich "Rheumatoide Arthritis ist eine entzündlich-rheumatische Erkrankung der Gelenke..." 1,8:1, (SOLL bei Erfüllung über Styleswitcher 3,5:1)
"Weitere Themen zu Rheumatoide Arthritis" hellgrün auf mittelgrün: Der Text hat ein Kontrastverhältnis von nur 2,36:1 (SOLL bei Erfüllung über Styleswitcher für großen Text 3:1)
Links "Wie erkenne ich rheumatoide Arthritis?" und weitere Links, weiß auf hellerem Grün: Der Text hat ein Kontrastverhältnis von nur 2,77:1 (SOLL bei Erfüllung über Styleswitcher 3,5:1)
Verg. auch allgemeine Anmerkungen.
Als aktiv anfgezeigter Sprunglink (grün auf weiß) in rechter Spalte, "Was ist rheumatoide Arthritis?" und nach Auswahl Link "Kinder- und Jugendrheuma": Der Text hat ein Kontrastverhältnis von nur 2,77:1 (SOLL bei Erfüllung über Styleswitcher 3,5:1).
Fetter Text "News", "Tipps für Angehörige" in rechter Spalte: Der Text hat ein Kontrastverhältnis von nur 2,77:1 (SOLL bei Erfüllung über Styleswitcher 3:1).
Verg. auch allgemeine Anmerkungen.
Testkontrast des Texts "Suchergebnisse für haut - Es wurden 88 Ergebnisse gefunden" (weiß auf hellgrün) zwischen 2,04:1 und 2,06:1 - SOLL für die Standardversion ist bei Erfüllung der Kontrastanforderung über Style-Switcher 3.5:1 für normalen und 3:1 für großen Text.
#h1#-Überschriften der Suchergebnisse (hellgrün auf weiß) haben nur ein Kontrastverhältnis von 1,94:1 (SOLL bei Erfüllung über Styleswitcher 3:1)
Bereichsanzeige "News" vor Suchergebnis, weiß auf hellgrün: Der Text hat ein Kontrastverhältnis von nur 1,94:1 (SOLL bei Erfüllung über Styleswitcher 3,5:1)
Bereichsanzeige "Morbus Bechterew" vor Suchergebnis, weiß auf orange: Der Text hat ein Kontrastverhältnis von nur 2,26:1 (SOLL bei Erfüllung über Styleswitcher 3,5:1)
Bereichsanzeige "Colitis Ulcerosa" vor Suchergebnis, weiß auf blau: Der Text hat ein Kontrastverhältnis von nur 3,17:1 (SOLL bei Erfüllung über Styleswitcher 3,5:1)
Bereichsanzeige "Kinder- und Jugendrheuma" vor Suchergebnis, weiß auf grün: Der Text hat ein Kontrastverhältnis von nur 2,77:1 (SOLL bei Erfüllung über Styleswitcher 3,5:1)
Bereichsanzeige "RSV" vor Suchergebnis, weiß auf rosa: Der Text hat ein Kontrastverhältnis von nur 2,61:1 (SOLL bei Erfüllung über Styleswitcher 3,5:1)
Bereichsanzeige "Acne inversa" vor Suchergebnis, weiß auf hellblau: Der Text hat ein Kontrastverhältnis von nur 2,05:1 (SOLL bei Erfüllung über Styleswitcher 3,5:1)
Hervorgehobener Suchbegriff (hier: Haut) wird auch bei Kontrastansicht hellgrün auf weiß gezeigt, der Kontrast von 1,94:1 ist zu gering (SOLL in der Kontrastansicht: 4,5:1)
Verg. auch allgemeine Anmerkungen.
Punktabzug: 0,5 Punkte
Kontraste nach Aktivierung des Styleswitchers: Der Kontrast des Kontrast-Icons hat nur 1,94:1 (SOLL: 4,5:1)
Seiten 2 und 3: Bedienelemente nach Aktivierung von "Webseite vorlesen" (weiß auf hellgrün) haben ein Kontrastverhältnis von nur 2,11:1 (Dünner dunklerer Rand um weiße Elemente eingerechnet, sonst nur 1,91:1) Soll: 3,5:1 bei Erfüllung über Styleswitcher). Aber auch in der Kontrastansicht über Styleswitcher reichen die Kontraste nicht aus (2,51:1 - SOLL: 4,5:1).
Service-Menü (Seite unten): Symbole (weiß/grün) für "Seite drucken" und "Seite weiterempfehlen" sind nicht kontrastreich - IST 1,9: 1, SOLL 3,5:1
Siehe auch allgemeine Anmerkungen.
Service-Menü (Seite unten): Symbole (weiß/grün) für "Seite drucken" und "Seite weiterempfehlen" sind nicht kontrastreich - IST 1,9: 1, SOLL 3,5:1
Siehe auch allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen (alle Seiten).
Punktabzug: 0,5 Punkte
Seite 2 und 3: Bedienelemente Play / Pause / Stop / Lautstärke der Vorlesefunktion verschwinden bei Nutzung eigener Farbschemata.
Vergl. Allgemeine Anmerkungen.
Vergl. Allgemeine Anmerkungen.
Punktabzug: 0,5 Punkte
Bereiche sind über Landmarks strukturiert, Navigationsbereiche werden unterschieden. Der Bereich "Suche" wird aber beim Durchlaufen der Landmarks nicht ausgegeben, wohl weil er versteckt ist und erst nach Auswahl des Such-Icons eingeblendet wird.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Siehe allgemeine Anmerkung.
Punktabzug: 0,5 Punkte
S. 2 und 3:
Der Wert der Buttons "ja" und "nein" nach "War diese Seite hilfreich?" wird bei Screenreadernutzung nicht ausgegeben. Hier ersetzt der referenzierte Wert den value von button. Um verständlich zu sein, muss das aria-labelledby Attribut erst die id="umfrage" und dann das jeweilige button-Element selbst referenzieren - also *zwei* IDs. Vergleiche die Technik "ARIA9: Using aria-labelledby to concatenate a label from several text nodes" (https://www.w3.org/TR/WCAG20-TECHS/ARIA9.html)
Alternativ wäre eine Umsetzung mit Radio Buttons und dem Fragetext als legend eines fieldset möglich.
Siehe allgemeiner Hinweis.
Siehe allgemeiner Hinweis.
Punktabzug: 0,25 Punkte
Buttons, die zum Togglen von Inhalten wie z.B. Ausklappmenüs genutzt werden, sollten den jeweiligen Zustand nach Interaktion reflektieren. Der Schalter "Erkrankungen" (div mit role=button) trägt das Attribut aria-expanded=false, der auch an Screenreader übergeben wird; die Änderung des Status (#true#) wird aber nicht als aria-expanded=true aktualisiert. Stattdessen wird verwirrenderweise der Button über aria-hidden=true versteckt, es erhält beim Zurücktabben nicht mehr den Fokus und steht so zum Einklappen des Menüs nicht mehr zur Verfügung.
Ein aria-label "Flyout-Menü für Erkrankungen" ist zwar eingesetzt, aber nicht an Screenreader übergeben, wohl da hier außerdem aria-hidden=true genutzt wird. "Erkankungen" reicht allerdings auch. (vergl. auch Prüfschritte 2.4.3a Sinnvolle Fokusreihenfolge und 2.1.1a "Ohne Maus nutzbar" - hier gibt es besonders Probleme bei der Nutzung des Angebots mit Screenreader.
Vergl. allgemeine Anmerkungen.
Vergl. allgemeine Anmerkungen.
Vergl. allgemeine Anmerkungen.
Punktabzug: 0,5 Punkte
Hinweis für alle Seiten:
Das Alt-Attribut alt="Welle" beschreibt eine Layoutgrafik. Für diese Farbfläche sollte das Alt-Attribut leer alt="" sein.
Bereiche vor Suchergebnissen (etwa "News") nicht mit semantischen Elementen wie em oder strong# hervorgehoben.
Anmerkung zur integrierten Bewertung von Prüfschritt 1.4.4a und 1.4.4b:
Im Zuge der Angleichung an die WCAG 2.0 werden die beiden im BITV-Test z.Zt. noch getrennt vorhandenen Schriftvergrößerungs Prüfschritte zukünftig zusammen genommen bewertet werden. Diese Entscheidung ist noch nicht verbindlich im BITV-Test Prüfverbund gefallen, ist aber im Ergebnis sehr wahrscheinlich, weswegen dieser Ansatz bereits in diesem Test verfolgt wird.
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 in Zukunft für beide Prüfschritte 1.4.4a und 1.4.4b die Bewertung des jeweils besser bewerteten Prüfschritts, d.h. der jeweils schlechter bewertete Prüfschritt wird unabhängig von dem schlechteren Prüfergebnis auf dem Wert des besser bewerteten Prüfschritts gestellt.
Internet Explorer und Firefox: Im Kopfbereich kommt es zu Textüberschneidungen (Logo mit dem Flyoutmenü).
Geprüft bei Bildschirmauflösung mit 1280 px Breite.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Siehe allgemeine Anmerkungen.
Anmerkung zur integrierten Bewertung von Prüfschritt 1.4.4a und 1.4.4b:
Im Zuge der Angleichung an die WCAG 2.0 werden die beiden im BITV-Test z.Zt. noch getrennt vorhandenen Schriftvergrößerungs Prüfschritte zukünftig zusammen genommen bewertet werden. Diese Entscheidung ist noch nicht verbindlich im BITV-Test Prüfverbund gefallen, ist aber im Ergebnis sehr wahrscheinlich, weswegen dieser Ansatz bereits in diesem Test verfolgt wird.
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 in Zukunft für beide Prüfschritte 1.4.4a und 1.4.4b die Bewertung des jeweils besser bewerteten Prüfschritts, d.h. der jeweils schlechter bewertete Prüfschritt wird unabhängig von dem schlechteren Prüfergebnis auf dem Wert des besser bewerteten Prüfschritts gestellt.
1280px Breite, 200%: Der Text des jeweiligen Menüpunkts für das Ausklappmenü "Erkrankungen, Rheumatoide Arthritis" und Login überlagern in manchen Fällen die Kontrast und Textgröße-Icons der über Hamburger-Icon ausgeklappten Navigation. Nicht immer gleichermaßen reproduzierbar.
Vergl. allgemeine Anmerkungen.
Vergl. allgemeine Anmerkungen.
Vergl. allgemeine Anmerkungen.
Anmerkung: Die ausgewiesenen Error-Meldungen für die Verwendung von role=button auf li werden nicht berücksichtigt - sie sind nicht nachteilig in Hinblick auf Barrierefreiheit.
