Prüfbericht zum abschließenden BITV-Test

Transkript

1 barrierefrei informieren und kommunizieren BIK Prüfbericht zum abschließenden BITV-Test BIK Beratungsstelle Hamburg Sonja Weckenmann c/o DIAS GmbH Schulterblatt Hamburg Telefon: (040) Fax: (040) Untersuchte Website: Prüfstelle: BIK Beratungsstelle Hamburg Prüfverfahren: abschließender BITV-Test Prüfer: Sonja Weckenmann Prüfdatum: Gesamtergebnis: 96 Punkte Gesamtbewertung: sehr 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 4 Punkte. Dieser Prüfbericht wurde erstellt am: 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 Ausführliche Informationen zum Prüfverfahren: 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

2 Prüfauftrag Die Prüfung wurde in Auftrag gegeben von: UniCredit Bank AG Sederanger München Prüfgegenstand Folgende Seiten wurden vollständig geprüft: Seite 1 (Startseite) Titel: euro.de: Das Finanz-Wissensportal der HypoVereinsbank URL: Seite 2 (Seite mit Infografik) Titel: euro.de: Wie funktioniert eine Zentralbank URL: Anmerkung: Die Inhaltsbeschreibung der Infografik wird mitgetestet. Seite 3 (Rechner) Titel: euro.de: Wie viel Geld bleibt mir im Monat zum Anlegen? URL: Seite 5 (Formular) Titel: euro.de: Finanzschule URL: Zusätzlich in die Prüfung einbezogen wurden einzelne Elemente der folgenden Seiten: Seite 6 (Video) Titel: euro.de: Wie funktioniert die Finanzwelt URL: 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 2/7

3 Nicht e Anforderungen Keine Anforderung wurde als "nicht " bewertet. Eher nicht e Anforderungen Keine Anforderung wurde als "eher nicht " bewertet. Teilweise e Anforderungen Keine Anforderung wurde als "teilweise " bewertet. Eher e Anforderungen 8 Anforderungen wurden als "eher " bewertet. Für sie werden jeweils 25% des Punktwerts abgezogen. Prüfschritt Gewichtung Punktabzug 1.3.1a - HTML-Strukturelemente für Überschriften hoch 0, b - HTML-Strukturelemente für Listen mittel 0, c - Inhalte bei benutzerdefinierten Farben erkennbar mittel 0, a - Schriftgröße variabel mittel 0, a - Ohne Maus nutzbar hoch 0, a - Inhaltsbereiche strukturiert mittel 0, a - Title-Attribut für Symbole gering 0, b - Anderssprachige Wörter ausgezeichnet gering 0,25 Erfüllte Anforderungen 29 Anforderungen wurden als "" bewertet. Nicht anwendbare Anforderungen 13 Anforderungen wurden als "" bewertet. Gesamtergebnis Die Summe der Punktabzüge beträgt 4 Punkte. Für die Website ergibt sich daraus ein Gesamtergebnis von 96 Punkten. Ergebnisse für einzelne Seiten Seite Punkte Seite 1 (Startseite) 96,75 Seite 2 (Seite mit Infografik) 96,75 Seite 3 (Rechner) 97,75 Seite 5 (Formular) 96,25 Seite 6 (Video) - nur einzelne Elemente geprüft - 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. 3/7

4 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 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 eher Seite 1: Seite 5: / - Icon "lcd" ist nicht aussagekräftig. Da die Grafik an dieser Stelle nicht sehr informativ ist, könnte hier auch das leere alt-attribut verwendet werden. Inhaltsbereich: Für die Icons (z.b. "Icon Finanzwelt" rechte Spalte) könnte hier auch das leere alt-attribut verwendet werden, da er die nachfolgende Überschrift wiederholt und dadurch nur Redundanzen entstehen. Anmerkung ohne Punktabzug: "Kontakt" wäre besser mit h2 ausgezeichnet. Seite 1: teilweise / - "Die neuesten Themen:", "Am meisten angesehen:", "Die nächsten Finanzworkshops:" sind inhaltlich übergeordnete Überschriften bzgl. z.b. "Wie sieht die Finanzwelt auf einen Blick aus?" und sollten daher eine Ebene höher ausgezeichnet sein. "Antworten auf Ihre Fragen? vor Ort", "Zahlungsverkehr und Bewerbertraining (bereits ausgebucht)" und "Zahlungsverkehr/ Geldwirtschaft" sollten als Überschriften ausgezeichnet werden. Seite 2: eher / - Inhaltsbeschreibung Infografik: "1. Aufbau und Funktionen der EZB." und "2. Schon gewusst?" sollten als Zwischenüberschriften ausgezeichnet werden. Insbedsonderes bei noch längeren Inhaltsbeschreibungen würde das Sinn machen. "Das könnte Sie auch interessieren:" sollte als Überschrift ausgezeichnet werden (siehe Seite 1). Seite 3: Seite 5: 4/7

5 1.3.1b - HTML-Strukturelemente für Listen 1.3.1c - HTML-Strukturelemente für Zitate 1.3.1d - Inhalte gegliedert 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 1.4.3a - Kontraste von Texten ausreichend 1.4.3b - Kontraste von Grafiken ausreichend 1.4.3c - Inhalte bei benutzerdefinierten Farben erkennbar eher eher Die Struktur der Navigation ist visuell aufbereitet, auf abstrakter Ebene aber nicht leicht nachvollziehbar und somit für Blinde schwer nutzbar. Z.B. "Bezahlen": "Bargeldlos bezahlen" und "... eine internationale Überweisung tätigen?" sind in der Listenstruktur auf derselben Ebene, "Bargeldlos bezahlen" ist jedoch der übergeordnete Begriff. Die Liste sollte also verschachtelt sein. Auch "Wie kann man", "Was versteht man"... ist semantisch nicht in die Gliederungsstrukur eingebunden. Das Logo "euro.de" hat einen transparenten Hintergrund und kann bei bestimmten benutzerdefinierten Hintergrundfarben nicht oder schlecht sichtbar sein. Dasselbe gilt für den grafischen Suche-Submit-Button. Seite 1: eher / Siehe allg. Anmerkung. Die grafischen Links (Pfeile) der Slide-Show im unteren Bereich haben keinen eigenen Hintergrund und können bei benutzerdefinierten Farben daher schwer bis nicht erkennbar sein. Seite 2: eher / Siehe allg. Anmerkung. Seite 3: eher / Siehe allg. Anmerkung. Seite 5: eher / Siehe allg. Anmerkung a - Schriftgröße variabel eher Das eingeblendete "Kontakt"-Fenster wird rechts leicht abgeschnitten. IE: Suche-Formularfeld: Der eingegebene Text wird nicht vergrößert. Seite 1: eher / Siehe allg. Anmerkung. 5/7

6 1.4.4b - Bei Zoom auf 200% benutzbar 1.4.5a - Verzicht auf Schriftgrafiken Seite 2: eher / Siehe allg. Anmerkung. Seite 3: eher / Siehe allg. Anmerkung. Seite 5: eher / Siehe allg. Anmerkung a - Ohne Maus nutzbar eher Seite 1: Seite 2: Seite 3: Seite 5: teilweise / Das Select-Menü des Formulars zur Auswahl eines Finanzworkshops (Ort) läst sich zwar mit der Tastatur bedienen, die Einstellung hat aber keine Auswirkungen auf die Anzeige der Workshops in der Liste darunter. Außerdem wird der eingestellte Ort nach Verlassen des Feldes mit der Tastatur und Sprung in "Ihre Postleitzahl" wieder zurückgesetzt auf "alle Städte". Alle Einträge des Feldes "Workshopthema" mit der Tastatur lassen sich anwählen, aber die Combo-Box scrollt nicht mit a - Zeitbegrenzungen anpassbar 2.2.2a - Bewegte Inhalte abschaltbar 2.3.1a - Verzicht auf Flackern 2.4.1a - Inhaltsbereiche strukturiert eher Die Bereichsüberschrift "Klickpfad" sollte wie alle anderen Bereichsüberschriften mit h6 ausgezeichnet werden. Seite 1: Seite 2: eher / Siehe allg. Anmerkung. Seite 3: eher / Siehe allg. Anmerkung. Seite 5: eher / Siehe allg. Anmerkung a - 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 Der Schließen-Button der Dropdown-Menüs wird erst am Ende beim durchtappen mit der Tastatur erreicht. Diese Tabulatorreihenfolge ist unsinnig. Besser wäre es, wenn der Button am Anfang erreicht würde und der Nutzer so die Möglichkeit hat, das Dropdown-Menü sofort wieder zu schließen, anstatt erst jeden einzelnen Menüpunkt mit der Tabulatortaste zu durchlaufen. Seite 1: Seite 3: Seite 5: 2.4.6a - Title-Attribut für Symbole eher Für Nutzer mit wenig Erfahrung wäre ein erklärendes title-attribut auf den Social- Media Icon hilfreich. 6/7

7 2.4.7a - Aktuelle Position des Fokus deutlich 2.4.8a - Position im Webauftritt klar 2.4.8b - Zweck der Alternativversion einleuchtend 3.1.1a - Hauptsprache angegeben 3.1.2a - Anderssprachige Abschnitte ausgezeichnet 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 eher Bzgl. roter Button (z.b. S.1 "Video ansehen") wäre es besser, wenn wie bei Mausnutzung zusätzlich eine Unterstreichung als Fokushervorhebung vorhanden wäre. Schließen-Symbol: Hier auch nur der Systemkranz vorhanden. Bei der gefällt mir-schaltfläche von Facebook auf den Seiten 2 und 4 gibt es keine Fokus- Hervorhebung. Seite 1: Seite 2: eher / "Quantitative Easing" ist nicht englisch ausgezeichnet. Auf Seiten mit sehr vielen Wörtern wie z.b. finanzwelt/vokabular.html gibt es allerdings eine gute Sprachauszeichnung. Seite 3: Seite 5: 3.3.1a - Fehlermeldungen hilfreich Seite 1: Seite 2: Seite 3: 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 7/7