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: 94,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 5,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 - Studieren in Fernost URL: Anmerkung: Zustand 1: "Studieren - Eine Gebrauchsanweisung": den Reiter "Karte" auswählen / Zustand 2: in der Box unten links unter "Profs & Projekte" die Option "Twitter" auswählen Seite 2 (Bundeslandseite) Titel: Hochschulen - Sachsen-Anhalt - Studieren in Fernost URL: Seite 3 (Studienrichtungsseite) Titel: Studium - Agrar- und Forstwissenschaften - Studieren in Fernost URL: Anmerkung: Zustand 1: in Kasten Studiengangsfinder im Feld "Fach" als Suchbegriff "Medie" eintippen und aus der Vorschlagsliste "Medieninformatik" auswählen. Klick auf "Starten" führt zu Seite 4. Seite 4 (Hochschulfinder) Titel: Studiengangsfinder - Studieren in Fernost URL: Anmerkung: Zustand 1: Suche ändern - Bundesland: "Sachsen", Zulassung zum: "nur Sommersemester" - neues Suchergebnis anzeigen lassen. Anmerkung zum Prüfgegenstand: Aus dem Prüfgegenstand ausgenommen ist der Hochschulfinder unter hochschulen/hochschulstudiensuchmaschine.html 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. 2/8

3 Teilweise e Anforderungen Keine Anforderung wurde als "teilweise " bewertet. Eher e Anforderungen 10 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, a - Videos mit Untertiteln hoch 0, a - HTML-Strukturelemente für Überschriften hoch 0, d - Inhalte gegliedert mittel 0, a - Kontraste von Texten ausreichend mittel 0, c - Inhalte bei benutzerdefinierten Farben erkennbar mittel 0, a - Ohne Maus nutzbar hoch 0, b - Anderssprachige Wörter ausgezeichnet gering 0, a - Valides HTML mittel 0, b - Verzicht auf veraltete Elemente und Attribute gering 0,25 Erfüllte Anforderungen 31 Anforderungen wurden als "" bewertet. Nicht e Anforderungen 9 Anforderungen wurden als " " bewertet. Gesamtergebnis Die Summe der Punktabzüge beträgt 5,5 Punkte. Für die Website ergibt sich daraus ein Gesamtergebnis von 94,5 Punkten. Ergebnisse für einzelne Seiten Seite Seite 1 (Startseite) 96,5 Punkte Seite 2 (Bundeslandseite) 97,75 Seite 3 (Studienrichtungsseite) 98,25 Seite 4 (Hochschulfinder) 95,75 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. 3/8

4 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 eher Seite 1: eher / "Hochschulfinder starten": Grafik und Textlink verlinken unabhängig auf dasselbe Ziel. Deshalb sollte der Alternativtext der Grafik leer bleiben. Screenreader behandeln bei Bedienelementen leere wie fehlende alt-attribute und lesen den Dateinamen der Grafik / die URL der Zieldatei vor (S.1 und 3). Seite 2: Seite 3: eher / "Hochschulfinder starten": Grafik und Textlink verlinken unabhängig auf dasselbe Ziel. Deshalb sollte der Alternativtext der Grafik leer bleiben. Screenreader behandeln bei Bedienelementen leere wie fehlende alt-attribute und lesen den Dateinamen der Grafik / die URL der Zieldatei vor. Bei verlinkten Bilder, die eine vergrößerte Ansicht in einer Lightbox öffnen, sollte dies (Zweck des Links) im Alternativtext wiedergegeben werden. Title-Text "Dieses Bild zoomen" ist vorhanden. Seite 4: Seite 3: / Die Bedeutung des Zeichens "!" sollte über eine Textalternative wiedergegeben werden a - Videos mit Untertiteln eher Seite 1: eher / Die Videos im Aufmacher- Modul "Erfolgreich studieren im Osten Deutschlands" sind untertitelt, Die Videos im Gebrauchsanweisungsmodul sind es, aber dafür wird das Wichtigste listenartig unter dem Video zusammengefasst. Seite 2: Seite 3: Seite 4: 1.2.3a - Audiodeskription für Videos Seite 1: / Videos haben keine Audiodeskription, Inhalte sind aber auch ohne Bild nützlich/verständlich. Im Aufmachermodul werden die Videos in einer einer alternativen Textversion kommunziert. Seite 2: Seite 3: Seite 4: 4/8

5 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 Systematik ist zu erkennen. Strukturverbesserungen und bessere Orientierung für Screenreader-Nutzer durch den Einsatz von ausgeblendeten h6-überschriften Seite 1: Seite 2: eher / Die Überschriften der einzelnen Freizeittipps sind auf derselben Ebene wie die übergeordnete Überschrift "Freizeittipps für jeden Geschmack" (anstatt eine Ebene tiefer angeordnet zu sein). Seite 3: Seite 4: Seite 1: Seite 2: Seite 4: 1.3.1d - Inhalte gegliedert eher Seite 1: eher / Social Media-Modul: Flickr, Twitter und Facebook-Inhalte sind schlecht gegliedert. Seite 2: Seite 3: eher / Zu Beginn des Textes "In deinem eigenen Revier" werden Absätze mit doppeltem br getrennt, visuell sind es aber 3 Absätze, die jeweils mit einem p-element gegliedert werden sollten. Der Kommentar neben der "!"-Grafik ist eigentlich keine Überschrift. Sinnvoller wäre, diesen Kommentar als hervorgehobenen Absatz zu gliedern und dem Ausrufezeichen einen entsprechenden Alternativtext mitzugeben. Seite 4: 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 Etwas verwirrend am Ende aller Seiten (ohne CSS): Schließen Titel der Gallerie Zurück Vor Diashow abspielen 1 / 0 schließen schließen Die Inhalte der drei Tabellenzellen in der Facebook-Like-Box sind linearisiert vorgelesehen eher verwirrend: "Gefällt mir Bestätigen Dir gefällt das. - Administratorenseite - Statistiken - Fehler Dir gefällt das. - Administratorenseite - Statistiken - Fehler" 5/8

6 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 1.4.4a - Schriftgröße variabel 1.4.4b - Bei Zoom auf 200% benutzbar eher eher Alle diese eigenartigen Angaben werden mit display none versteckt und sind so für screenreader sichtbar. Seite 1: / Die Liste mit den Sprunglinks (Reiter 1 - Reiter 5) des ersteb Karussells kommt erst nach den Inhalten, anstatt davor. Seite 2: / Die Überschrift "Finde Deine Hochschule Sachsen-Anhalts Hochschulen" sollte vor der Liste "Hochschule auswählen" positioniert sein, danach. Seite 1: eher / Nicht ausreichend kontrastieren die weiße Schrift "Erfolgreich Studieren im Osten Deutschlands" auf Grau sowie der weiße Link "zur Gebrauchsanweisung" auf Hellblau. Seite 2: teilweise / Linklisten im Inhaltsbereich (sowie "574" Studiengänge, "Zum Ranking") Pink auf Hellgrau: Ist 4,0:1. Schriftgröße ist 17px. Seite 3: Seite 4: Die Logos "Hochschul Kompass" (S. 2-4) und "Bundesminiseterium für Bildung und Forschung (alle Seiten) haben einen transparenten Hintergrund und können bei bestimmten benutzerdefinierten Farben schlecht lesbar sein. Seite 3: eher / Die "Blättern" in den Studienrichtungen ist bei benutzerdefinierten Farbeinstellungen mehr möglich, da dieser Navigationsmechanismus dann mehr vorhanden ist. Allerdings kommt man zu den Inhalten über die Hauptnavigation. Seite 4: eher / Die "Schließen"- Schaltfläche des eingeblendete Formulars ("Suche ändern") ist bei benutzerdefinierten Farben mehr zu sehen. Man kann zwar mit "Escape" schließen, dies ist jedoch dokumentiert a - Verzicht auf Schriftgrafiken Vorbildlich! Es werden keine Schriftgrafiken, sondern Webfonts und css rotation verwendet 6/8

7 2.1.1a - Ohne Maus nutzbar eher Seite 1: Seite 2: Seite 3: Seite 4: eher / Mit der Maus kann man die Suchkriterien wegklicken, mit der Tastatur öffnet man damit lediglich noch mal das Suchformular und muss sich neu durchtabben, um das gewünschte Kriterium zu löschen - das ist wesentlich umständlicher als für Mousenutzer. Die Suchkriterien sind zwar semantisch als Checkboxen umgesetzt und können somit auch per Leertaste gelöscht werden - darauf kommt man aber als Nutzer eher, da die Kriterien wie Checkboxen gestaltet sind, sondern wie Schließen-Buttons (man erwartet also das normale Schließen-Verhalten) a - Zeitbegrenzungen anpassbar 2.2.2a - Bewegte Inhalte abschaltbar 2.3.1a - Verzicht auf Flackern 2.4.1a - Inhaltsbereiche strukturiert Inhaltsbereiche durch eine logisch strukturiert. Mit Hilfe von Überschrift und ausgeblendeten h6-überschriften 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 Seite 4: / Wenn man eines der Kriterien schließen will, landet man noch mal am Anfang der umfangreichen Suchmaske - besser wäre es, wenn der Tastaturfokus zumindest gleich zum zu ändernden Kriterium springen würde (zumal die Zuordnung auch immer ganz einfach ist). (Wurde bereits in Prüfschritt 2.1.1a bewertet, daher hier kein Punktabzug) 2.4.6a - Title-Attribut für Symbole Bildergalerie, Player und Schließen-Icons haben Title-Texte 2.4.7a - Aktuelle Position des Fokus deutlich 2.4.8a - Position im Webauftritt klar 2.4.8b - Zweck der Alternativversion einleuchtend Seite 1: / In der Facebook-Like-Box nur leichte Hervorhebung für Mousenutzer, Tastaturfokus dagegen nur mit Systemkranz. Da die Inhalte über ein I-Frame eingebunden ist, kann hier kein Verbesserungen per CSS oder Javascript erreicht werden. Systemkranz auf weiß kann in diesem marginalen Bereich als ausreichend gewertet werden. 7/8

8 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 Seite 1: / Twitters Zeiangaben "2 hours ago" sind auf deutsch übersetzt Seite 2: Seite 3: Seite 4: / "Computer Science and Media" - systematisches Problem bei Studiengängen mit englischen Bezeichnungen 3.3.1a - Fehlermeldungen hilfreich Seite 1: Seite 2: Seite 4: 3.3.2a - Formularfelder richtig beschriftet 3.3.4a - Fehlervermeidung wird unterstützt 4.1.1a - Valides HTML eher Seite 1: Seite 2: Seite 3: Seite 4: / encodierungsproblem kaufmännisches & im href b - Verzicht auf veraltete Elemente und Attribute 4.1.2a - Name und Rolle von Bedienelementen verfügbar eher Seite 1: teilweise / bgcolor="#000000" von Youtube generiert. Hintergrund lässt mit benutzerdefinierten Farben problemlos ändern. Seite 2: Seite 3: Seite 4: 8/8