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: 90,5 Punkte Gesamtbewertung: gut zugänglich Ein Webauftritt, der alle Anforderungen des BITV-Tests, erreicht ein Ergebnis von 100 Punkten. Anforderungen, die oder nur teilweise sind, führen zu Punktabzügen. Die Summe der Punktabzüge für oder nur teilweise e Anforderungen beträgt in diesem Test 9,5 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 geprüft. Das Prüfergebnis gilt also gegebenenfalls für den gesamten Webauftritt. Geprüft wird die "Normalversion" des Webauftritts. Spezielle Textversionen für Behinderte werden 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/8

2 Prüfgegenstand Folgende Seiten wurden vollständig geprüft: Seite 1 (Startseite) Titel: Startseite - BGU Frankfurt URL: Anmerkung: Die "Übersicht" soll als weiterer Zustand eingeblendet werden ("+"-Symbol). Seite 2 (Aktuelle Informationen) Titel: Aktuelle Informationen - BGU Frankfurt URL: Anmerkung: Die Bilder-Lightboxen sollen mitgetestet werden. Seite 3 (Fachabteilungen) Titel: Rückenmarkverletzte - BGU Frankfurt URL: Anmerkung: Die Bild-Lightbox soll mitgetestet werden. Seite 4 (Ausbildung) Titel: Ausbildung - BGU Frankfurt URL: Seite 5 (Kontakt) Titel: Kontaktformular - BGU Frankfurt 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 Gegenstand der Prüfung. Prüfergebnis Insgesamt 50 Anforderungen werden im BITV-Test überprüft. Anforderungen, die vollständig sind, führen zu Punktabzügen. Die Anforderungen sind unterschiedlich gewichtet. Je nach Gewichtung werden für oder 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 " " bewertet. Eher e Anforderungen Keine Anforderung wurde als "eher " bewertet. Teilweise e Anforderungen 2 Anforderungen wurden als "teilweise " bewertet. Für sie werden jeweils 50% des Punktwerts abgezogen. 2/8

3 Prüfschritt Gewichtung Punktabzug 1.4.4a - Schriftgröße variabel mittel b - Bei Zoom auf 200% benutzbar mittel 1 Eher e Anforderungen 14 Anforderungen wurden als "eher " bewertet. Für sie werden jeweils 25% des Punktwerts abgezogen. Prüfschritt Gewichtung Punktabzug 1.1.1a - Alternativtexte für Bedienelemente hoch 0, b - Alternativtexte für Grafiken und Objekte hoch 0, a - HTML-Strukturelemente für Überschriften hoch 0, d - Inhalte gegliedert mittel 0, a - Ohne Bezug auf sensorische Merkmale nutzbar mittel 0, a - Kontraste von Texten ausreichend mittel 0, b - Kontraste von Grafiken ausreichend mittel 0, c - Inhalte bei benutzerdefinierten Farben erkennbar mittel 0, a - Ohne Maus nutzbar hoch 0, a - Schlüssige Reihenfolge bei der Tastaturbedienung mittel 0, b - Links informieren über Dateiformat gering 0, a - Aktuelle Position des Fokus deutlich gering 0, a - Position im Webauftritt klar hoch 0, b - Verzicht auf veraltete Elemente und Attribute gering 0,25 Erfüllte Anforderungen 19 Anforderungen wurden als "" bewertet. Nicht e Anforderungen 15 Anforderungen wurden als " " bewertet. Gesamtergebnis Die Summe der Punktabzüge beträgt 9,5 Punkte. Für die Website ergibt sich daraus ein Gesamtergebnis von 90,5 Punkten. Ergebnisse für einzelne Seiten Seite Punkte Seite 1 (Startseite) 95,25 Seite 2 (Aktuelle Informationen) 90,5 Seite 3 (Fachabteilungen) 91,5 Seite 4 (Ausbildung) 94 Seite 5 (Kontakt) 94 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/8

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 eher eher Zu den Bildern, die sich in vergößerter Ansicht in einer Lightbox öffnen (S. 2 und 3): Die Funktion des Links (Öffnen einer Lightbox) sollte im Alternativtext angekündigt werden. Seite 1: Seite 2: eher / siehe allgemeine Anmerkungen. Seite 3: eher / Bild im Inhaltsbereich hat einen leeren Alternativtext. Seite 4: Seite 5: Seite 1: Seite 2: eher / Das Logo "TÜV Rheinland QM Akutschmerztherapie" hat einen leeren Alternativtext. Seite 3: Seite 4: Seite 5: Alle Seiten: Die beim Mouseover der Hauptmenüoptionen gezeigten Themenüberschriften (h2) "Wir sind für Sie da!", "Wissenschaft und Technik", "Unsere Fachabteilungen", etc. enthalten jeweils untergeordnete Überschriften, die ebenfalls mit h2 getaggt wurden. Logisch wäre die Auszeichnung mit h3, um die hirarchische Struktur besser abzubilden. Auf allen Seiten gibt es eine vorhandene versteckte Überschrift "Navigation" (h2), die wahrscheinlich als übergeordnete Überschrift für den Navigationsbereich vorgesehen ist. Diese sollte als h1 ausgezeichnet werden. Seite 4: teilweise / Zwischenüberschriften sind mit b ausgezeichnet und mit Strukturelementen für Überschriften. 4/8

5 1.3.1b - HTML-Strukturelemente für Listen 1.3.1c - HTML-Strukturelemente für Zitate 1.3.1d - Inhalte gegliedert eher Hervorhebungen sollten mit strong erfolgen, mit bold. Z.B. Telefonnummern im Flyout- Menü. Seite 1: Seite 2: Seite 3: eher / Im Inhaltsbereich werden Absätze mehrmals mit doppeltem br getrennt, statt die jeweiligen Absätze mit einem p auszuzeichnen. Seite 4: eher / "Alle offene Stellen anzeigen" sollte mit einem p gegliedert werden. Im Inhaltsbereich werden Absätze mehrmals mit doppeltem br getrennt, statt die jeweiligen Absätze mit einem p auszuzeichnen. Seite 5: 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 eher eher Seite 1: Seite 2: Seite 3: eher / Die Links im Fließtext werden nur über eine veränderte Farbe hervorgehoben, es sollte jedoch mittels zusätzlicher Hervorhebung deutlich gemacht weden, dass es sich um Links handelt (z.b. Unterstreichung, Fettung etc.). Seite 4: Seite 5: Zentrale Telefonauskunft (weiße Schrift auf hellblau) IST 3,8:1 SOLL 4,5:1. Link "Impressum" hellblau auf weiß IST 3,7:1 SOLL 4,5:1. (Betrifft alle Seiten). Seite 5: eher / Das Rot des * hat einen Kontrast zum Hintergrund von 4,0:1. SOLL 4,5:1. eher Suche-Button / Lupe (weiß auf grau) IST 1,5:1 SOLL 4,5:1. (Auch der gesamte grafische Button kontrastiert zum Hintergrund zu wenig). Seite 1: eher / "+"-Symbol IST: 3,1:1 SOLL 4,5:1. 5/8

6 1.4.3c - Inhalte bei benutzerdefinierten Farben erkennbar eher Die Hintergrundfarbe der Suche ist als Hintergrundbild eingebunden. Bei bestimmten benutzerdefinierten Farbeinstellungen ist die Lupe dadurch nur noch schlecht bis gar zu sehen. Seite 1: Seite 2: eher / Lightbox: Das Bild ist als Hintergrundgrafik eingebunden und ist bei benutzerdefinierten Farben mehr zu sehen. Ebenso mehr zu sehen sind die Bedienelemente (allerdings kann man die Lightbox noch mit "Escape" schließen, jedoch dokumentiert). Seite 3: eher / Siehe Seite 2. Seite 4: Seite 5: 1.4.4a - Schriftgröße variabel teilweise Flyout-Menü (Hauptnavigation): IE: Die jeweiligen Titel der Rubriken, sowie Links werden vergrößert dargestellt. (Die Bildunterschriften in den Lightboxen werden vergrößert). Seite 5: eher / IE: Die Einträge in den Formularfeldern werden vergrößert b - Bei Zoom auf 200% benutzbar teilweise Die Flyout-Menüs der Hauptnavigation sind mit Zoom auf 200% (Fenstergrößei 1024 x 768px) nur schwer nutzbar. Man muss dazu wissen, dass man mit den Pfeiltasten navigieren - sozusagen scrollen - kann. Dies kann man insbesondere bei älteren Nutzern mit weniger Interneterfahrung vorraussetzen. Außerdem muss die Maus an bestimmten Stellen positioniert sein, z.b. kann man den Mauszeiger auf den Reiter stehen lassen, sondern muss mit der Maus in die Tabs gehen. Eine entsprechende Koordination von Maus und Tastatur ist hier nötig a - Verzicht auf Schriftgrafiken 2.1.1a - Ohne Maus nutzbar eher Seite 1: Seite 2: teilweise / Sobald man eine der Lightboxen mit der Tastatur geöffnet hat, bleibt man darin hängen. Man kann sie wieder mit "Escape" schließen, jedoch sollte dies dokumentiert sein. Seite 3: teilweise / Sobald man eine Lightbox mit der Tastatur geöffnet hat, bleibt man darin hängen. Man kann sie wieder mit "Escape" schließen, jedoch sollte dies dokumentiert sein. Seite 4: Seite 5: 2.2.1a - Zeitbegrenzungen anpassbar 6/8

7 2.2.2a - Bewegte Inhalte abschaltbar 2.3.1a - Verzicht auf Flackern 2.4.1a - Inhaltsbereiche strukturiert Besser wäre es, wenn auch die Navigation am Fuß der Seite mit einer Bereichsüberschrift und / oder mit entsprechenden landmarks ausgezeichnet wäre 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 2.4.6a - Title-Attribut für Symbole 2.4.7a - Aktuelle Position des Fokus deutlich eher eher eher Seite 1: Seite 2: eher / Der Tastaturfokus ist über mehr als drei aufeinanderfolgenden Stationen sichtbar. Dadurch wird es sehr viel schwieriger, die Reihenfolge, in der die Links angesteuert werden, nachzuvollziehen. Seite 3: Seite 4: Seite 5: Seite 1: Seite 2: / Der title "APPLICATION, Aktionstag-2012-innen, Aktionstag-2012-innen. pdf" ist sehr klar und verständlich. Seite 3: Seite 4: Seite 5: teilweise / Mehrere Links, die ohne Hinweis auf ein anderes Dateiformat verweisen: "Informationsbroschüre für Patienten", "Ihre Meinung zählt", "Lageplan", "Anfahrtsbeschreibung". (Die Seite der Verlinkung "Ihre Meinung zählt" ist vorhanden, oder der Pfad ist falsch). Seite 1: Seite 2: eher / Keine Fokushervorhebung der Links im Inhaltsbereich. Da es sich um eine sehr lange Seite mit vielen Links handelt, ist die Fokushervorhebung für Tastaturnutzer (insbesondere auch für die Orientierung) hier besonders wichtig. (Der Tastaturfokus sollte mindestens so deutlich sein, wie bei Mausnutzung). Seite 3: Seite 4: / Der Link im Fließtext erhält keine Fokushervorhebung (siehe S. 2, im Gegensatz zu Seite 2 handelt es sich hier allerdings nur um einen Link). Seite 5: eher / Der Absende-Button hat keine Fokushervorhebung. 7/8

8 2.4.8a - Position im Webauftritt klar eher Auf sich selbst verweisende Seiten (Eingangsseiten der Reiter, Link im Seitenmenü). Ein Breadcrumb-Pfad wäre für die Orientierung sinnvoll. Nicht ganz intuitiv ist die Darstellung der Menüs: z.b. unfallchirurgie-und-orthopaedische-chirurgie. html. Über- und untergeordnete Menüoptionen sind visuell leicht zuzuordnen. Der Titel der Seite orientiert sich hier (und auch bei anderen Seiten) an der ausgewählten Menüoption, was die Orientierung zusätzlich erschwert. Auf der Seite fachabteilungen/medizincontrolling.html gibt es in der Seitennavigation den Link "Medizincontrolling", in der horizontalen Navigation lautet der erste Link ebenfalls "Medizincontrolling", verweist aber auf eine andere Seite. Die gleiche Bezeichnung der Links ist irritierend b - 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 3.3.1a - Fehlermeldungen hilfreich Seite 1: Seite 2: Seite 3: Seite 4: 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 Der grafischen Button sollte keine englische Bezeichnung für value haben (hier: value=\"search\"). Alle Seiten: veraltetes Attribut border in Verbindung mit dem Element img. (betrifft hier 4stats). 8/8