Das Prüfverfahren zur BITV 2.0



Blättern: zum ersten Test zum vorhergehenden Test zum nächsten Test zum letzten Test

AbbVie Care

Prüfung

Anmerkungen zum Prüfauftrag

Mit Prüfung der mobilen Version bei 320 px Breite.

Ergebnis

Punkte: 94 von 100 (gut zugänglich)

Prüfberichte

Prüfbericht vom 26.10.2016, 11:05 (PDF), Prüfbericht vom 06.10.2016, 16:46 (PDF)

Geprüfte Seiten

Seite 1 (Startseite)

  • Titel: AbbVie Care | AbbVie Care unterstützt Sie bei der Therapie Ihrer chronischen Erkrankung
  • URL: https://www.abbvie-care.de/
  • Punkte: 96,75

Seite 2 (Infoseite rheumatoide Arthritis)

Seite 3 (Suchergebnisseite (Suchbegriff = Haut))

Bewertung und Anmerkungen zu einzelnen Prüfschritten

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

  • Prüfschritt 2.1.1a - Ohne Maus nutzbar

    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.

    Seite 1: eher erfüllt

    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.

    Seite 2: teilweise erfüllt

    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.

    Seite 3: teilweise erfüllt

    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

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

    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.

    Seite 1: teilweise erfüllt

    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.

    Seite 2: teilweise erfüllt

    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.

    Seite 3: teilweise erfüllt

    Siehe allgemeine Hinweise.

    Punktabzug: 1 Punkt

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

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

    Seite 3: teilweise erfüllt

    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.

    Seite 1, 2: erfüllt

    Punktabzug: 0,75 Punkte

  • Prüfschritt 1.4.3a - Kontraste von Texten ausreichend

    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)

    Seite 1: eher erfüllt

    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)"

    Seite 2: eher erfüllt

    Ü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.

    Seite 3: eher erfüllt

    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

  • Prüfschritt 1.4.3b - Kontraste von Grafiken ausreichend

    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).

    Seite 2: eher erfüllt

    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.

    Seite 3: eher erfüllt

    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.

    Seite 1: erfüllt

    Siehe allgemeine Anmerkungen (alle Seiten).

    Punktabzug: 0,5 Punkte

  • Prüfschritt 1.4.3c - Inhalte bei benutzerdefinierten Farben erkennbar

    Seite 2 und 3: Bedienelemente Play / Pause / Stop / Lautstärke der Vorlesefunktion verschwinden bei Nutzung eigener Farbschemata.

    Seite 2: eher erfüllt

    Vergl. Allgemeine Anmerkungen.

    Seite 3: eher erfüllt

    Vergl. Allgemeine Anmerkungen.

    Seite 1: erfüllt

    Punktabzug: 0,5 Punkte

  • Prüfschritt 2.4.1a - Inhaltsbereiche strukturiert

    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.

    Seite 1: eher erfüllt

    Siehe allgemeine Anmerkung.

    Seite 2: eher erfüllt

    Siehe allgemeine Anmerkung.

    Seite 3: eher erfüllt

    Siehe allgemeine Anmerkung.

    Punktabzug: 0,5 Punkte

  • Prüfschritt 2.4.4a - Aussagekräftige Linktexte

    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.

    Seite 2: eher erfüllt

    Siehe allgemeiner Hinweis.

    Seite 3: eher erfüllt

    Siehe allgemeiner Hinweis.

    Seite 1: erfüllt

    Punktabzug: 0,25 Punkte

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

    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.

    Seite 1: eher erfüllt

    Vergl. allgemeine Anmerkungen.

    Seite 2: eher erfüllt

    Vergl. allgemeine Anmerkungen.

    Seite 3: eher erfüllt

    Vergl. allgemeine Anmerkungen.

    Punktabzug: 0,5 Punkte

Erfüllt sind 26 von 50 Prüfschritten:

Nicht anwendbar sind 15 von 50 Prüfschritten:

Blättern: zum ersten Test zum vorhergehenden Test zum nächsten Test zum letzten Test