barrierefrei informieren und kommunizieren BIK Prüfbericht zum abschließenden BITV-Test BIK Beratungsstelle Hamburg Thomas Mayer c/o BSVH Holsteinischer Kamp 26 22081 Hamburg Telefon: (040) 20 94 04 27 Fax: (040) 20 94 04 30 E-Mail: t.mayer@bsvh.org www.bik-online.info Untersuchte Website: https://www.ikk-classic.de Prüfstelle: BIK Beratungsstelle Hamburg Prüfverfahren: abschließender BITV-Test Prüfer: Thomas Mayer Prüfdatum: 11.05.2017 Gesamtergebnis: 92,25 Punkte Gesamtbewertung: gut zugänglich Ein Webauftritt, der alle Anforderungen des BITV-Tests, erreicht ein Ergebnis von 100 Punkten. Anforderungen, die nicht oder nur teilweise sind, führen zu Punktabzügen. Die Summe der Punktabzüge für nicht oder nur teilweise e Anforderungen beträgt in diesem Test 7,75 Punkte. Dieser Prüfbericht wurde erstellt am: 19.05.2017 Vereinbart wurde: Die Prüfstelle legt die Anzahl der zu prüfenden Seiten fest und wählt eingehend zu prüfende Seiten aus. Das Ergebnis der Prüfung kann veröffentlicht werden. Die direkte Zugänglichkeit programmierter Objekte wird nicht geprüft. Das Prüfergebnis gilt also gegebenenfalls nicht für den gesamten Webauftritt. Geprüft wird die "Normalversion" des Webauftritts. Spezielle Textversionen für Behinderte werden nicht in die Prüfung einbezogen. Der BITV-Test basiert auf Teil 1 der Anlage der Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (Barrierefreie Informationstechnik-Verordnung - BITV 2.0) vom 12. September 2011. Ausführliche Informationen zum Prüfverfahren: www.bitvtest.de. BIK ist ein Gemeinschaftsprojekt des DBSV (Deutscher Blinden- und Sehbehindertenverband e.v.), des DVBS (Deutscher Verein der Blinden und Sehbehinderten in Studium und Beruf e.v.) und der DIAS GmbH. Das Projekt wird durch das Bundesministerium für Arbeit und Soziales gefördert. 1/7
Prüfgegenstand Folgende Seiten wurden vollständig geprüft: Seite 1 (Startseite) Titel: Die Krankenkasse für Ihre Gesundheit IKK - classik URL: https://www.ikk-classic.de/oc/de/ikk-classic/index.html Seite 2 (Akkordeon) Titel: Zahnersatz - IKK classik URL: https://www.ikk-classic.de/oc/de/ikk-classic/leistungen/zaehne/zahnersatz/ Seite 3 (Tab-Panel) Titel: Zuzahlung und Zuzahlungsbefreiung - IKK classik URL: https://www.ikk-classic.de/oc/de/ikk-classic/versicherung/zuzahlung-befreiung/ Seite 4 (Formular) Titel: Online-Mitgliedserklärung - IKK classik URL: https://www.ikk-classic.de/oc/de/ikk-classic/mitglied-werden/online-mitgliedserklaerung/ Anmerkung zur Dokumentation des Prüfgegenstands: Die Seiten wurden soweit möglich zum angegebenen Zeitpunkt heruntergeladen (bzw. generiert). Spätere Änderungen der geprüften Seiten waren nicht Gegenstand der Prüfung. Prüfergebnis Insgesamt 50 Anforderungen werden im BITV-Test überprüft. Anforderungen, die nicht vollständig sind, führen zu Punktabzügen. Die Anforderungen sind unterschiedlich gewichtet. Je nach Gewichtung werden für nicht oder nicht vollständig e Anforderungen bis zu 3 Punkte abgezogen. Gewichtung hoch mittel niedrig Punktwert 3 Punkte 2 Punkte 1 Punkt Nicht e Anforderungen Keine Anforderung wurde als "nicht " bewertet. Eher nicht e Anforderungen Keine Anforderung wurde als "eher nicht " bewertet. Teilweise e Anforderungen 1 Anforderung wurde als "teilweise " bewertet. Für sie werden 50% des Punktwerts abgezogen. Prüfschritt Gewichtung Punktabzug 1.4.3a - Kontraste von Texten ausreichend mittel 1 Eher e Anforderungen 12 Anforderungen wurden als "eher " bewertet. Für sie werden jeweils 25% des Punktwerts abgezogen. 2/7
Prüfschritt Gewichtung Punktabzug 1.1.1a - Alternativtexte für Bedienelemente hoch 0,75 1.3.1b - HTML-Strukturelemente für Listen mittel 0,5 1.3.1d - Inhalte gegliedert mittel 0,5 1.4.3b - Kontraste von Grafiken ausreichend mittel 0,5 1.4.3c - Inhalte bei benutzerdefinierten Farben erkennbar mittel 0,5 2.1.1a - Ohne Maus nutzbar hoch 0,75 2.4.3a - Schlüssige Reihenfolge bei der Tastaturbedienung mittel 0,5 2.4.7a - Aktuelle Position des Fokus deutlich gering 0,25 2.4.8a - Position im Webauftritt klar hoch 0,75 3.3.1a - Fehlermeldungen hilfreich mittel 0,5 3.3.2a - Formularfelder richtig beschriftet hoch 0,75 4.1.2a - Name und Rolle von Bedienelementen verfügbar mittel 0,5 Erfüllte Anforderungen 24 Anforderungen wurden als "" bewertet. Nicht anwendbare Anforderungen 13 Anforderungen wurden als "" bewertet. Gesamtergebnis Die Summe der Punktabzüge beträgt 7,75 Punkte. Für die Website ergibt sich daraus ein Gesamtergebnis von 92,25 Punkten. Ergebnisse für einzelne Seiten Seite Punkte Seite 1 (Startseite) 96,75 Seite 2 (Akkordeon) 96,25 Seite 3 (Tab-Panel) 96,25 Seite 4 (Formular) 89,25 Hinweis: Im Gesamtergebnis für den Webauftritt können sich unterschiedliche Mängel einzelner geprüfter Seiten summieren. Das Gesamtergebnis kann daher schlechter sein als das durchschnittliche Ergebnis der geprüften Seiten. Anmerkungen zu einzelnen Prüfschritten Die folgende Tabelle zeigt Anmerkungen zu einzelnen Prüfschritten. Die Spalte "Bewertung" enthält die zusammenfassende Bewertung des Prüfschritts. Prüfschritt Bewertung Anmerkung 1.1.1a - Alternativtexte für Bedienelemente eher Seite 1: Seite 2: Seite 3: Seite 4: teilweise / Mitgliedserklärung, 3. Ansicht: Icons "Edit", "Save": keine Textalternative. 3/7
1.1.1b - Alternativtexte für Grafiken und Objekte 1.1.1c - Leere alt-attribute für Layoutgrafiken 1.1.1d - Alternativen für CAPTCHAs 1.2.1a - Alternativen für Audiodateien und stumme Videos 1.2.2a - Videos mit Untertiteln 1.2.3a - Audiodeskription für Videos 1.3.1a - HTML-Strukturelemente für Überschriften 1.3.1b - HTML-Strukturelemente für Listen 1.3.1c - HTML-Strukturelemente für Zitate eher Seite 4: Betr. alle Seiten mit Breadcrumbnavigation: Auszeichnung mit aria-label ist gut. Allerdings wird dieses dann mit display: none unsichtbar gemacht. Das verstecken von ARIA-Elementen ist nicht notwendig da diese in der visuellen Ansicht nicht ausgeliefert werden. Seite 1: Seite 4: 1.3.1d - Inhalte gegliedert eher Seite 1: Seite 2: Seite 3: Seite 4: teilweise / Mitgliedserklärung: Die Gliederung des Formulars erfolgt nicht durchgängig mit fieldset. Das legend- Element wird gar nicht eingesetzt. Das wäre zur Kennzeichnung der unterschiedlichen Formularbereiche (z.b. Persönliche Angaben / Angaben zum Arbeitgeber) hier aber sehr sinnvoll. 1.3.1e - Datentabellen richtig aufgebaut 1.3.1f - Zuordnung von Tabellenzellen 1.3.1g - Kein Strukturmarkup für Layouttabellen 1.3.2a - Layouttabellen linearisierbar 1.3.2b - Sinnvolle Reihenfolge 1.3.3a - Ohne Bezug auf sensorische Merkmale nutzbar 1.4.2a - Ton abschaltbar Seite 3: / Tabelle "Zuzahlung": Spalten- oder Reihenüberschriften (th) sind nicht vorhanden, bei dieser einfach aufgebauten Tabelle aber auch nicht zwingend notwendig. (Bei komplexeren Tabellen i.d.r. mehr als 3 Spalten müssen die Überschriftenzellen mit th ausgezeichnet werden). 4/7
1.4.3a - Kontraste von Texten ausreichend 1.4.3b - Kontraste von Grafiken ausreichend 1.4.3c - Inhalte bei benutzerdefinierten Farben erkennbar teilweise eher eher Das "IKK-Blau" (0BA1E2) hat in Kombination mit Weiß oder Grau einen relativ schlechten Helligkeitskontrast (IST: 2,91:1, SOLL: 4,5:1). Das betrifft sehr viele Inhaltselemente. Textvorbelegung für Eingabefelder (z.b. Suchfunktion a8a8a8 auf fff, IST: 2,83:1, SOLL: 4,5:1) Navigation im Kopfbereich, nicht aktive Links ("IKK classic", "Firmenkunden" etc. 5e5e5d auf ccc, IST: 2,83:1, SOLL: 4,5:1) Siehe oben, "IKK-Blau" für diverse Icons und Buttons. Seite 1: Seite 2: Seite 3: Seite 4: teilweise / Mitgliedserklärung: Zustand von Checkboxen und Radio-Buttons ist nicht mehr erkennbar (Hintergrundgrafiken) 1.4.4a - Schriftgröße variabel Im IE ist keine Schriftvergrößerung möglich. Mit Firefox kommt es bei Schriftvergrößerung zu Darstellungsproblemen wie abgeschnittenen Inhalten oder Überlagerungen 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. 1.4.4b - Bei Zoom auf 200% benutzbar Bei Nutzung der Zoom-Funktion wird am Desktop das Layout für mobile Geräte ausgeliefert. Probleme in dieser Ansicht werden bei den jew. relevanten Prüfschritten bewertet. 1.4.5a - Verzicht auf Schriftgrafiken 2.1.1a - Ohne Maus nutzbar eher Funktion "Copyright anzeigen": die Lightbox- Ansicht ist mit der Tastatur zu öffnen, der Schließen-Button innerhalb der Ansicht ist aber nicht fokussierbar (vgl. mit der Umsetzung bei "Geschäftsstellen" oder "Kontakt"). 5/7
2.2.1a - Zeitbegrenzungen anpassbar 2.2.2a - Bewegte Inhalte abschaltbar 2.3.1a - Verzicht auf Flackern 2.4.1a - Inhaltsbereiche strukturiert 2.4.2a - Sinnvolle Dokumenttitel 2.4.3a - Schlüssige Reihenfolge bei der Tastaturbedienung 2.4.4a - Aussagekräftige Linktexte 2.4.4b - Links informieren über Dateiformat 2.4.5a - Alternative Zugangswege 2.4.6a - Title-Attribut für Symbole 2.4.7a - Aktuelle Position des Fokus deutlich eher eher ESC funktioniert hier, ist aber nicht dokumentiert. Seite 1: Seite 2: Seite 3: Seite 4: eher nicht / Mitgliedserklärung: Datumseingabe funktioniert nicht verlässlich ohne Datepicker. 1. Ansicht: im ersten Durchgang klappt es - nachdem man den Radio- Button ausgewählt hat), wenn man rückwärts tabbt und direkt in das Feld springt, klappt es nicht. Es wäre sinnvoll, wenn man das Feld mit dem Datepicker nicht erreichen würde, wenn man nicht die entsprechende Auswahl getroffen hat. In der 2. Ansicht (Feld "Geburtsdatum") ist keine Eingabe ohne Maus möglich. Mobiles Layout, Menüs "Kontakt", "Suche": Nach dem Aufklappen gelangt man mit der Tab- Taste nicht direkt in den ausgeklappten Inhalt sondern muss erst weitere Links durchwandern. Seite 1: Seite 2: Seite 4: Seite 1: Seite 2: Seite 3: Seite 4: teilweise / Mitgliedserklärung: Bei Checkboxen und Radio-Buttons wird die Fokushervorhebung unterdrückt. 2.4.8a - Position im Webauftritt klar eher Betr. https://www.ikk-classic.de/oc/de/ikkclassic/versicherung/zuzahlung-befreiung/: Hier (und auf den anderen Übersichtsseiten dieser Ebene) fehlt die Breadcrumbnavigation. 2.4.8b - Zweck der Alternativversion einleuchtend 3.1.1a - Hauptsprache angegeben 3.1.2a - Anderssprachige Abschnitte ausgezeichnet 6/7
3.1.2b - Anderssprachige Wörter ausgezeichnet 3.2.1a - Kein Öffnen neuer Fenster beim Laden der Seite 3.2.2a - Keine unerwartete Kontextänderung bei Eingabe 3.2.3a - Navigation einheitlich Es werden keine anderssprachigen Wörter verwendet. 3.3.1a - Fehlermeldungen hilfreich eher Seite 1: Seite 2: Seite 3: Seite 4: eher / Die Fehlermeldungen sind als Sprunglinks umgesetzt. Bei Aktivierung wird der Fokus jedoch nicht in das Feld versetzt, es wird nur der Viewport verschoben. 3.3.2a - Formularfelder richtig beschriftet 3.3.4a - Fehlervermeidung wird unterstützt 4.1.1a - Valides HTML 4.1.1b - Verzicht auf veraltete Elemente und Attribute 4.1.2a - Name und Rolle von Bedienelementen verfügbar eher eher Seite 1: Seite 2: Seite 3: Seite 4: eher / label fehlt Die Beschriftungen der Selects sollten mit dem select verknüpft sein. Seite 1: Seite 2: Seite 3: Mobiles Layout: "Kontakt", "Suche", "Menü": Der Zustand (erweitert/reduziert) sollte über ariaexpanded vermittelt werden. Das aria-label, das den Zustand der Subnavigation vermitteln soll, wird nicht je nach Zustand umgeschrieben, es lautet jeweils "Subnavigation ausklappen" - auch wenn die Navigation mit dem Bedienelement eingeklappt wird. Seite 4: eher / 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 ariaexpanded vermittelt. 7/7