Prüfbericht zum abschließenden BITV-Test

Transkript

1 barrierefrei informieren und kommunizieren BIK Prüfbericht zum abschließenden BITV-Test BIK Beratungsstelle Hamburg Detlev Fischer 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: Detlev Fischer Prüfzeitraum: Gesamtergebnis: 91,5 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 8,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 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/12

2 Prüfauftrag Die Prüfung wurde in Auftrag gegeben von: VDI Technologiezentrum GmbH VDI-Platz Düsseldorf Anmerkung zum Prüfauftrag: Die Videos im Bereich Showroom wurden von der Prüfung ausgenommen. Der Bereich und auch einzelne nicht untertitelte Videos sind als nicht barrierefrei gekennzeichnet. Prüfgegenstand Folgende Seiten wurden vollständig geprüft: Seite 1 Titel: URL: Seite 2 Titel: URL: Seite 3 Titel: URL: Seite 4 Titel: URL: Seite 5 Titel: 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/12

3 Nicht e Anforderungen 1 Anforderung wurde als "nicht " bewertet. Für sie wird der volle Punktwert abgezogen. Prüfschritt Gewichtung Punktabzug 1.4.4a - Schriftgröße variabel mittel 2 Eher nicht e Anforderungen Keine Anforderung wurde als "eher nicht " bewertet. Teilweise e Anforderungen 2 Anforderungen wurden als "teilweise " bewertet. Für sie werden jeweils 50% des Punktwerts abgezogen. Prüfschritt Gewichtung Punktabzug 2.4.7a - Aktuelle Position des Fokus deutlich gering 0, a - Valides HTML mittel 1 Eher e Anforderungen 9 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, b - Sinnvolle Reihenfolge hoch 0, b - Bei Zoom auf 200% benutzbar mittel 0, a - Schlüssige Reihenfolge bei der Tastaturbedienung mittel 0, a - Aussagekräftige Linktexte gering 0, a - Position im Webauftritt klar hoch 0, b - Anderssprachige Wörter ausgezeichnet gering 0, a - Fehlermeldungen hilfreich mittel 0,5 Erfüllte Anforderungen 28 Anforderungen wurden als "" bewertet. Nicht anwendbare Anforderungen 10 Anforderungen wurden als "" bewertet. Gesamtergebnis Die Summe der Punktabzüge beträgt 8,5 Punkte. Für die Website ergibt sich daraus ein Gesamtergebnis von 91,5 Punkten. Ergebnisse für einzelne Seiten Seite Punkte Seite 1 94,75 Seite 2 93,25 Seite 3 93,5 3/12

4 Seite 4 95,25 Seite 5 92,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 Bewerbung Photonik-Akademie im Fußbereich: "Link zu.." oder ähnlich ist bei Alternativtexten und title-attrivuten verlinkter Grafiken generell unnötig / redundant. Seite 1: eher / Einige Alternativtexte von Bildern, die in Links eingebettet sind, bezeichen zusätzlich die Inhalte von Bildern, etwa "Video- Kamera (Icon)" oder "Facebook Grafik". Wenn das Bild keine relevante zusätzliche Information trägt, sollte der Alternativtext eher leer sein. In anderen Fällen verdoppelt der Inhalt des alt- Attributs Inhalte des Linktextes etwa bei "Deutschlandkarte (Grafik)" das gefolgt wird von dem völlig ausreichenden "Finde Dein Photonik- Unternehmen oder Institut - Zur Deutschlandkarte". Auch hier wäre weniger mehr. Die title-attribute verdoppeln zum Teil die Inhalte des Linktexts, etwa bei "Geheimer Monitor" mit dem title "Zu geheimer Monitor". Dies ist weder für Screenreader-Nutzer noch für sehende Nutzer sinnvoll: Die Sehenden sehen bereits doen Linktext, für Screenreadernutzer ist (bei entsprechenden Einstellungen) die Ausgabe des title redundant. Der Zusatz "Link zu..." in title-attributen ist unnötig, da die Verlinkung für sehende und Screenreader-Nutzer auch so deutlich ist. Grafische Links Photonik-Akademie 2014:Blog, Photonik Showroom, usw.: Das übliche / erwartete Verhalten von Links ist es, das Links im gleichen Fenster öffnen. Auf diese Tatsache sollte deshalb nicht in title Attributen hingewiesen werden. "Neueste Videos": Bilder sind als eigenständiger Link ausgeführt, beschreiben aber großteils nur den Bildinhalt, aus denen das Linkziel nicht hervorgeht Seite 2: eher / Bild-Link Link zur Online- Bewerbung der Photonik-Akademie. Der title 4/12

5 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 Attribut sollte nicht den Inhlat des alt-attributs wiederholen, sonder allenfalls zusätzliche Informationne bieten. Das es zu Bewerbung Photonik-Akademie geht, ist bei visueller Nutzung schon aus der Bildüberschrift klar. Der Alternativtext des Logos unter der Karte sollte "Zu den Wir sind dabei!"-logos" oder "Wir sid dabei-unternehmen" lauten - nicht lleres alt und Linkziel im title-attribut. Seite 3: / title-attribut "Zum Projekt FabScan? 100 Euro 3D-Scanner" ist redundant - visuellen Nutzern wird diese Information durch den Kontext (Überschrift uinterm Bild) vermittelt, das alt-attribut übernimmt dies Aufgabe für Screenreader-Nutzer. Seite 4: eher / Grafiken als alleiniger Linkinhalt enthalten beschreibende alt-texte, die nicht auf das Linkziel schließen lassen ("Videokamera Grafik", Grafiken bei "Neueste Videos"). Seite 5: Seite 1: Seite 2: Seite 3: Seite 4: Seite 5: teilweise / Avatar-Bilder in den Kommentaren ohne alt-attribut. Hier wird unter Umständen der Dateipfad vorgelesen. PA-2014-Tag-4-656x403.jpg könnte etwa einen Alternativtext haben wie "Gruppenbild Photonik- Campus Teilnehmer bei Infineon". Bei den Folgebildern leisten das die Bildunterschriften, es wird aber aus dem Text nicht ganz klar, dass hier Bilder beschrieben werden a - Videos mit Untertiteln Der Bereich mit von Partnern erstellten Youtube- Videos (Photonik-Showroom), ebenso betroffene Unterseiten mit nicht untertitelten Videos, wurden als nicht zugänglich (ohne Untertitel) benannt und von der Prüfung ausgeschlossen. Seite 1: Seite 2: Seite 3: Seite 4: Seite 5: / Die Angabe "Dieses Video ist nicht untertitelt und deshalb nicht barrierefrei" ist hier unrichtig und daher irreführend: Das Video ist untertitelt. 5/12

6 1.2.3a - Audiodeskription für Videos Seite 1: Seite 2: Seite 3: Seite 4: Seite 5: / Im hinteren Teil des Videos gibt es einige Inhalte, die in einer Audiodeskription hätten ergänzt werden können. So sieht man verschiedene Stände und Namen von Firmen und Organisationen: TU Dresden, Ardenne, Plastic Logic usw. Dies wird akustisch nicht vermittelt, aber es ist nicht klar, ob das wirklich sinnvoll wäre. Auch das Schlußbild enthält textliche Infos, die nicht gesprochen werden: Logo BMBF, Logo Fraunhofer COMEDD, die URL von Photonik Campus. Letztere ist im Kontext der Einbindung auf eben dieser Site sicher verzichtbar a - HTML-Strukturelemente für Überschriften 1.3.1b - HTML-Strukturelemente für Listen 1.3.1c - HTML-Strukturelemente für Zitate Seite 2: / Siehe aber 1.3.2b Sinnvolle Reihenfolge zur Gliederung Bundesländer/ Unternehmen. Seite 3: / Gliederung unterhalb der h2 Zeitplan könnte h3 Überschriften nuztzen für Einreichungsfrist, Bewertungsphase, Benachrichtigung. Seite 2: / Bundesländer-Links wären besser als Liste auszuzeichnen. Seite 3: / Die Nummerierung der Schritte in der rechten Spalte (in den Bildern) deutet darauf hin, dass diese Liste eigentlich eine ol, nicht eine ul ist. Seite 4: / Downloads sieht nach Liste aus, könte mit Listen-Markup umgesetzt werden d - Inhalte gegliedert Seite 5: / Leere p-elemente in den Kommentaren e - Datentabellen richtig aufgebaut 1.3.1f - Zuordnung von Tabellenzellen 1.3.1g - Kein Strukturmarkup für Layouttabellen Seite 1: Seite 2: Seite 3: / Facebook like buttons Seite 4: Seite 5: 1.3.2a - Layouttabellen linearisierbar Seite 1: Seite 2: Seite 4: Seite 5: 1.3.2b - Sinnvolle Reihenfolge eher Seite 1: Seite 2: eher / Die angezeigten Suchergebnisse je Bundesland werden in der 6/12

7 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 Quelltext-Reihenfolge nicht zusammenhängend angeführt. Sinnvoll wäre, wenn die Bundesländer als Überschriften für die dort ansässigen Unternehmen ausgezeichnet wären. Seite 3: Seite 4: Seite 5: Seite 1: / Diashow: Vor- und zurück Pfeile haben nur einen Kontrast 3:1 (sind aber recht groß und deutlich). Seite 4: / Die grafische Umrandung der Tabbereiche ist (abgesehen vom Inhalt) das einzige visuelle Unterscheidungsmerkmal dafür, welcher Tab ausgewählt ist, und ist mit 1,36:1 nicht nicht kontrastreich genug. Die drei Bereiche sind aber durch ihren recht verschiedenen Inhalt auch unterscheidbar, deshalb wiegt dieses Problem nicht so schwer. Seite 4: / Welcher der drei Tabs (DIY- Plattformen Links Downloads) aktiviert ist ist bei benutzerdefinierten Farben nicht erkennbar. Seite 5: / Das Vorschaubild des Videos ist bei benutzerdefinierten Farben nicht sichtbar a - Schriftgröße variabel nicht IE: Reine Schriftvergrößerung nicht möglich. Firefox: Nummern in Bilder-Buttons des Karussels und Twitter-Link Photonik-Campus folgen sind bei Schriftvergrößerung abgeschnitten. Seite 1: nicht / Siehe allgemeine Anmerkung. Seite 2: nicht / Siehe allgemeine Anmerkung. Seite 3: nicht / Siehe allgemeine Anmerkung. Firefox: Bei den Teaser-Texten in 3 Spalten kommt es bei längeren Wörtern zu Überlagerungen. Seite 4: nicht / Siehe allgemeine Anmerkung. Firefox: Lange Titel bei "Neueste Videos" werden abgeschnitten. Seite 5: nicht / Siehe allgemeine Anmerkung. Firefox: Lange Titel bei "Neueste Videos" wie auf S.4 bewertet 7/12

8 1.4.4b - Bei Zoom auf 200% benutzbar eher Hauptmenü verschwindet bei Zoomvergrößerung auf 200%. Erscheint dann als Popup-Menü nach Seiten -Refresh (Neu-Laden). Das Suchfeld verschwindet. Sprungmarken sind noch da, funktionieren aber nicht. Seite 1: eher / Siehe allgemeine Anmerkungen. Seite 2: eher / Siehe allgemeine Anmerkungen. Karte ragt über rechten Fensterrand hinaus, ist aber gerade noch verwendbar. Seite 3: eher / Überlappungen von Elementen (etwa Facebook: Gefällt mir und Ansichten). Siehe auch allgemeine Anmerkungen. Seite 4: eher / Siehe allgemeine Anmerkungen. Seite 5: teilweise / Video und Untertitel passen nicht voll in den sichtbaren Bereich. Siehe außerdem allgemeine Anmerkungen a - Verzicht auf Schriftgrafiken 2.1.1a - Ohne Maus nutzbar 2.2.1a - Zeitbegrenzungen anpassbar 2.2.2a - Bewegte Inhalte abschaltbar Seite 1: / Animation des Karussells stoppt automatisch beim Reintabben a - Verzicht auf Flackern 2.4.1a - Inhaltsbereiche strukturiert Sprunglinks und konsistente Bereichsauszeichnung mit h a - Sinnvolle Dokumenttitel 2.4.3a - Schlüssige Reihenfolge bei der Tastaturbedienung eher Seite 1: eher / Nach Auslösen des Abspielen-Buttons (Karussell) mit der Tastatur wird der Fokus nicht auf den Pause-Button gesetzt, sondern ist wieder am Seitenanfang. Nach einer Auswahl eines Karusselbildes über die Zahlen-Buttons und auch bei "Weiter" oder "Zurück"-Links wird der Cursor immer zu Bild 1 versetzt. Seite 2: teilweise / In der Verwendung umständlich: Bei Anwahl eines Bundeslandes via image map werden die Detailinformationen im Code oberhalb der Karte angezeigt, es muss rückwärts durch alle vorhergehenden Bundesländer tabuliert werden, um zu den Suchergebnissen zu kommen. ( s. auch 1.3.2b. "Sinnvolle Reihenfolge") Seite 3: / Erster Fokuspunkt auf "Gefällt mir" ohne hinterlegte Funktion. Seite 4: Seite 5: 8/12

9 2.4.4a - Aussagekräftige Linktexte eher Seite 1: eher / - Diashow: alt-texte beschreiben die Bilder, Linkziel wird im Text, der danebenstehend im selben Link eingeschlossen ist, angegeben. Dadurch werden die Linktexte aber sehr lang Inhaltsteaser: in Link mit eingeschlossen sind sowohl inhaltlich beschriebenes Bild, brechreibender Text, als auch Linktext, der auf das Linkziel hinweist. Alles zusammen führt zu überlangen Linktexten Seite 2: Seite 3: / Besser als die verlinkten URLs wie wären verständliche (verlinkte) Seitentitel. Seite 4: eher / Sidebar-Teaser: Linktext besteht wie auf der Startseite aus Grafikbeschreibung + beschreibender Text + Linktext, und ist zu lang Seite 5: / Sidebar-Teaser: Linktext ist wie bei Startseite und Seite 4 zu lang 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 teilweise Seite 1: Seite 2: Die Fokushervorhebung auf dem Suchfeld und besonders dem Suche-abschicken Button sollte deutlicher sein. Auch der Mousefokus ist schwach, aber immer noch deutlicher als der Systemkranz. Fokushervorhebung auf den Social Media Links im Kopfbereich und auf dem Seitenpfad (breacrumb) bei Mausnutzung deutlicher als bei Tastaturnutzung (fette Umrandung bzw. Unterstreichung vs. Systemkranz). Fokushervorhebung auf den Teaser-Bildern im Fußbereich bei Mausnutzung deutlicher als bei Tastaturnutzung (fette Umrandung vs. Systemkranz). Seite 1: teilweise / Die Blättern Buttons müssten nicht tastaturfokussierbar sein, da es durch die Reihe der Buttons Zeige Bild 1 bis Zeige Bild 7 ja eine tastaturzugängliche Alternative gibt. Wenn sie aber tastaturnutzbar sind, muss die Fokushervorhebung ebenso gut sein wie bei MouseOver. Siehe auch allgemeine Anmerkungen. Die Fokushervorhebung über den Teaserbildern (Photonik-Akademie 2014: Blog usw.) ist bei Mausnutzung deutlicher als bei Tastaturnutzung. Siehe auch allgemeine Hinweise. Seite 2: teilweise / Siehe allgemeine Anmerkungen. Seite 3: teilweise / Sortier-Links Datum 9/12

10 aufsteigend, Datum absteigend, usw: Maushervorhebung viel deutlicher als die schlecht sichtbare Tastaturhervorhebung. Link Zu den Teilnahmebedingungen in der rechten Spalte: Maushervorhebung deutlicher als Tastaturhervorhebung. Fokushervorhebung auf den h2-überschriften bei Mausnutzung deutlicher als bei Tastaturnutzung (Unterstreichung vs. Systemkranz). Siehe auch allgemeine Anmerkungen. Seite 4: teilweise / Fokus auf den Teaserbildern in der rechten Spalte ist bei Mausnutzung deutlicher als bei Tastaturnutzung (Umrandung vs. Systemkranz). Siehe auch allgemeine Anmerkungen. Seite 5: teilweise / Fokushervorhebung auf den ausgelagerten Bedienelementen des Videos ( Abspielen Pause Stop Ton aus bei Mausnutzung deutlicher als bei Tastaturnutzung (Orange-Färbung vs. Systemkranz). Fokushervorhebung auf den Links im Kommentarbereich bei Mausnutzung deutlicher als bei Tastaturnutzung (Umfärbung und Verschwinden der Unterstreichung vs. Systemkranz). Siehe auch allgemeine Anmerkungen a - Position im Webauftritt klar eher Ein Bereichsmenü existiert nicht, die Übersicht über verfügbare Unterseiten der Bereiche muss der Nutzer aus dem (auch bei Tastaturnutztung ausklappenden) Popup-Menü holen. Der Seitenpfad (breadcrumb) ist stellenweise nicht ganz konsequent: So entfällt etwa bei der Seite Wettbewerb "Intelligentes Licht" Galerie dier Eintrag für den Bereich Wettbewerb. Auch beibewerbung Photonik-Akademie fehlt der Eintrag für den Bereich, Studium. Der Bereich Schule heißt im Seitenpfad abweichend, nicht nur länger Schulexperimente? ohne Licht läuft nichts. Eien Verkürzung des Bereichstitels im Menü ist aber grundsätzlich OK. Kategorieseiten des Blogs: Z.B. wird "Photonik Campus Blog" als direkt der Startseitenebene untergeordnet in den breadcrumbs angezeigt. Die im Hauptmenü als "Studium > Photonik Akademie - Photonik Akademie Blog" dargestellte Hierarchisierung wid auf der Seite selbst als "Startseite - Photonik Akademie Blog" in den breadcrumbs dargestellt, nach Auswahl eines Eintrags ändert sich das dann in Start - Make Light - Projekte - Mario Lukas berichtet über seine Make Light-Projekte in Das ist 10/12

11 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 nicht wirklich konsistent. Make Light in Navigation und tag cloud nicht ausgezeichnet. Seite 1: Seite 2: Seite 3: eher nicht / Nicht ausgezeichnet: Rapid Prototyping System, Make Light, Do-It- Yourself, Electric Imp Moodlamp, Template, facebook-like, Hacklace squared, Smart Coaster Seite 4: / Nicht ausgezeichnet: Tutorials Seite 5: / Nicht ausgezeichnet: Professionals in der Hauptüberschrift und der Bildbeschreibung zum Kaminabend 3.3.1a - Fehlermeldungen hilfreich eher Seite 1: Seite 2: eher / Bei Fehleingabe in dem Textfeld für die PLZ-Suche kommt nur die Meldung "Ungültige Daten empfangen." Das könnte sehr viel hilfreicher sein (etwa: "Bitte geben Sie eine fünfstellige Postleitzahl ohne Leerzeichen ein" Oder es kommt bei Eingabe fünfstelliger nichtexistenter PLZ: "Unter den von Dir eingegebenen Suchparametern konnten keine Einträge gefunden werden." Auch dies könnte hilfreicher formuliert werden (und warum werden Nutzer geduzt?) - etwa: Die von Ihnen eingegebene Postleitzahl exisitert nicht. Bitte überprüffen Sie die Eingabe auf Fehler (z.b. Zahlendreher), oder geben Sie nur die ersten zwei Ziffern ein. Für die Bundesländerauswahl wäre eine Auto- Vervollständigung sinnvoll (wer kann schon Baden-Württemberg richtig schreiben...). Wer "Baden-Württemberg" richtig eingibt (wie auf dem Pop-over auf Karte) kriegt keine Ergebnisse angezeigt, nur "Ungültige Daten empfangen". Bug? Dies ist mehr ein Usability-Problem als eines der Barrierefreiheit, deshalb gibt hierfür keinen Punktabzug. Seite 3: Seite 4: Seite 5: 11/12

12 3.3.2a - Formularfelder richtig beschriftet 3.3.4a - Fehlervermeidung wird unterstützt 4.1.1a - Valides HTML teilweise Seite 1: Seite 2: Seite 3: nicht Seite 4: Seite 5: nicht 4.1.1b - Verzicht auf veraltete Elemente und Attribute 4.1.2a - Name und Rolle von Bedienelementen verfügbar 12/12