Prüfbericht zum Test nach BITV 2.0

Transkript

1 Prüfbericht zum Test nach BITV 2.0 Die 50 im Test zu prüfenden Anforderungen sind beschrieben im Verzeichnis der Prüfschritte unter Eine vollständige Beschreibung des Verfahrens findet sich unter Prüfauftrag Die Prüfung wurde in Auftrag gegeben von: Deutschland sicher im Netz e. V. Joachim Schulte Albrechtstraße 10 b Berlin Prüfgegenstand Untersuchte Webseite Untersuchte Seiten - Seite 1: Startseite ( - Seite 2: Aktuelles ( - Seite 3: Digitaler Stammtisch ( Prüfer, Prüfzeitraum Sebastian Brückner, bis

2 Seite 2 Prüfergebnis Seite Name / Bezeichnung Punkte 1 Startseite 87,25 2 Aktuelles 87,00 3 Digitaler Stammtisch 89,50 Anmerkungen zu einzelnen Prüfschritten Die folgenden Tabellen zeigen Anmerkungen zu einzelnen Prüfschritten. Die Spalte "Bewertung" enthält die zusammenfassende Bewertung des Prüfschritts. Seite 1: Startseite 87,25 Punkte Prüfschritt Bewertung Anmerkung 1.3.1b - HTML-Strukturelemente für Listen 1.3.1d - Inhalte gegliedert Es gibt mehrere leere Absatzelemente b - Sinnvolle Reihenfolge 1.3.3a - Ohne Bezug auf sensorische Merkmale nutzbar 1.4.3a - Kontraste von Texten ausreichend Die Links in der Material-Kompass-Box sind blau auf grün und erreichen dadurch nur einen Farbkontrast von 3,3:1. Mit einer Schriftgröße von 32px gelten sie aber als große Schrift, wodurch ein Mindestkontrast von 3: b - Kontraste von Grafiken ausreichend 1.4.4b - Bei Zoom auf 200% benutzbar 1.4.5a - Verzicht auf Schriftgrafiken 2.2.1a - Zeitbegrenzungen anpassbar 2.2.2a - Bewegte Inhalte abschaltbar 2.3.1a - Verzicht auf Flackern 2.4.2a - Sinnvolle Dokumenttitel 2.4.3a - Schlüssige Reihenfolge bei der Tastaturbedienung 2.4.5a - Alternative Zugangswege 3.1.1a - Hauptsprache angegeben 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 ausreicht. Die Blättern-Icons des Karussells haben nur einen Farbkontrast von 3:1, sind dafür aber ausreichend groß. Nach dem Suche-Schalter gibt es einen zweiten, unsichtbaren Suche-Schalter.

3 3.3.1a - Fehlermeldungen hilfreich 1.4.3c - Inhalte bei benutzerdefinierten Farben erkennbar eher Seite 3 Die Seitenwahl des Blättern-Karussells verschwindet. Das sich bewegende Digital-Kompass-Logo hat einen transparenten Hintergrund, wodurch es u. U. vor einer individuellen Hintergrundfarbe schwer erkennbar werden kann a - Ohne Maus nutzbar eher Die Seitenwahl des Blättern-Karussells ist nicht mit der Tastatur bedienbar, weil sie nur aus li-elementen statt 'echter' Bedienelemente besteht a - Inhaltsbereiche strukturiert eher 2.4.6a - Title-Attribut für Symbole eher 2.4.7a - Aktuelle Position des Fokus deutlich 2.4.8a - Position im Webauftritt klar 3.1.2b - Anderssprachige Wörter ausgezeichnet 3.3.2a - Formularfelder richtig beschriftet 4.1.1b - Verzicht auf veraltete Elemente und Attribute 4.1.2a - Name und Rolle von Bedienelementen verfügbar 1.1.1a - Alternativtexte für Bedienelemente eher eher eher eher eher eher teilweise Teilweise sind für sich nutzbare Inhaltsbereiche, z. B. die Suchfunktion oder das Kontaktformular, durch Überschriftenelemente erschlossen. Dies könnte noch verbessert werden, in dem die Navigationsleiste oder die Fußzeile durch eigene Überschriften oder Sprunglinks erreichbar gemacht werden. Die Blättern-Icons des Karussells haben keine title-attribute. Der Telefonhörer und der Brief in der Fußzeile sind allgemein gültige Symbole und benötigen keine zusätzliche Erläuterung. Textlinks und verlinkte Grafiken erhalten eine schwarze Umrahmung bei Fokuserhalt. Bei den Grafiken hat dieser Rand aber eine zu geringe Höhe und umfasst nicht die komplette Grafik. Aktive Seiten verweisen auf sich selbst. Zudem werden sie im Menü nur optisch hervorgehoben. "Handouts" ist nicht ausgezeichnet. Das Textfeld des einfachen Suchformulars benötigt ein verstecktes label-element oder ein title-attribut. Veraltete Attribute: color (1x) für link (1x). Die Seitenwahl des Blättern-Karussells besteht nur aus li-elementen, ohne das die Bedienelemente-Semantik mit WAI- ARIA nachgebildet wurde. Die Blättern-Icons des Karussell haben keine Linktexte. Das sich bewegende und verlinkte Digital-Kompass-Logo trägt den aussagenlosen Alternativtext "Like a logo a compass in movement".

4 1.1.1b - Alternativtexte für Grafiken und Objekte 1.3.1a - HTML-Strukturelemente für Überschriften teilweise teilweise Seite 4 Das Bagso-Logo sowie die "Gefördert durch"-grafik tragen keine aussagekräftigen Alternativtexte. Sinnvoll wären hier z. B. "Logo Bagso" statt "Bunden Logo" bzw. "Gefördert durch das Bundesministerium der Justiz und für Verbraucherschutz" statt "Ministerium Logo". Alle vier Grafiken des Blättern-Karussells haben zusätzlich title-attribute. Zwei davon wiederholen verkürzt den Alternativtext ("Ältere Damen vor einer Google Earth Leinwand" und "Schulungsituation vor dem Laptop"), eine stark verkürzt ("Ein Mädchen und Großmutter mit Laptop" <- >"Mädchen und Oma") und eine Grafik trägt ein komplett anderes title-attribut ("Zwei Männer skypen" <-> "gerade ein Laptop"). Auf der Seite gibt es kein h1-element, die Überschriftenhierarchie beginnt mit einer Überschrift zweiter Ebene. Sie umfasst auch nur h2- und h4-elemente, wodurch der Hauptinhalt der Seite nicht klar erkennbar ist. In dieser Form geben die Überschriften die Seitenstruktur nur ungenau wieder. Die Aktuelles- Meldungen sollten h3-elemente bekommen, um als Unterelemente der h2 "Aktuelles aus dem Blog" zu folgen a - Schriftgröße variabel teilweise Im Internet Explorer ist die Schrift, bis auf die grüne Material-Kompass-Box und die blaue Digitaler-Stammtisch-Box, nicht skalierbar. Im Firefox kommt es zu minimalen Überlappungen a - Aussagekräftige Linktexte teilweise Die Blättern-Icons des Karussell haben keine Linktexte. Das sich bewegende und verlinkte Digital-Kompass-Logo erhält durch den Alternativtext den wenig aussagekräftigen Linktext "Like a logo a compass in movement". Das unsichtbare Kalender-Symbol hat den englischsprachigen Linktext "Add to My Calendar" a - Valides HTML nicht 2 Fehler (siehew3 HTML Validator) 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

5 1.3.1c - HTML-Strukturelemente für Zitate 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.4.2a - Ton abschaltbar 2.4.4b - Links informieren über Dateiformat 2.4.8b - Zweck der Alternativversion einleuchtend 3.1.2a - Anderssprachige Abschnitte ausgezeichnet 3.3.4a - Fehlervermeidung wird unterstützt Seite 5 Seite 2: Aktuelles 87,00 Punkte Prüfschritt Bewertung Anmerkung 1.3.1b - HTML-Strukturelemente für Listen 1.3.2b - Sinnvolle Reihenfolge 1.4.3a - Kontraste von Texten ausreichend 1.4.3b - Kontraste von Grafiken ausreichend 1.4.3c - Inhalte bei benutzerdefinierten Farben erkennbar 1.4.5a - Verzicht auf Schriftgrafiken 2.1.1a - Ohne Maus nutzbar 2.2.1a - Zeitbegrenzungen anpassbar 2.2.2a - Bewegte Inhalte abschaltbar 2.3.1a - Verzicht auf Flackern 2.4.2a - Sinnvolle Dokumenttitel 2.4.3a - Schlüssige Reihenfolge bei der Tastaturbedienung Nach dem Suche-Schalter gibt es einen zweiten, unsichtbaren Suche-Schalter a - Alternative Zugangswege 2.4.6a - Title-Attribut für Symbole Der Telefonhörer und der Brief in der Fußzeile sind allgemein gültige Symbole und benötigen keine zusätzliche Erläuterung a - Hauptsprache angegeben

6 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 1.3.1a - HTML-Strukturelemente für Überschriften eher Seite 6 Die Überschriftenhierarchie beginnt nicht mit einer h1, was aber in Ordnung ist. Da auch die rechte Spalte und die Fußzeile h2-elemente verwenden, ohne noch mal eigene Abschnittsüberschriften zu erhalten, wirkt alles wie Unterpunkte zur h1 "Aktuelles aus dem Blog", was wiederum etwas ungenau ist d - Inhalte gegliedert eher Die Veröffentlichungsinformationen der Blog-Einträge sind nicht mit Absatzelementen strukturiert. Es gibt mehrere leere Absatzelemente a - Ohne Bezug auf sensorische Merkmale nutzbar 1.4.4b - Bei Zoom auf 200% benutzbar 2.4.1a - Inhaltsbereiche strukturiert 2.4.7a - Aktuelle Position des Fokus deutlich 2.4.8a - Position im Webauftritt klar 3.3.2a - Formularfelder richtig beschriftet 4.1.1b - Verzicht auf veraltete Elemente und Attribute eher eher eher eher eher eher eher Links im Fließtext unterscheiden sich nur durch eine andere Schriftfarbe. Sinnvoll ist es, hier noch ein weiteres Unterscheidungsmerkmal hinzuzufügen, z. B. eine Unterstreichung. Im Internet Explorer kommt es bei den Blog-Einträgen zu kleinen Textüberlappungen. Teilweise sind für sich nutzbare Inhaltsbereiche, z. B. die Suchfunktion oder das Kontaktformular, durch Überschriftenelemente erschlossen. Dies könnte noch verbessert werden, indem die Navigationsleiste oder die Fußzeile durch eigene Überschriften oder Sprunglinks erreichbar gemacht werden. Textlinks und verlinkte Grafiken erhalten eine schwarze Umrahmung bei Fokuserhalt. Bei den Grafiken hat dieser Rand aber eine zu geringe Breite und umfasst nicht die komplette Grafik. Aktive Seiten verweisen auf sich selbst. Zudem werden sie im Menü nur optisch hervorgehoben. Das Textfeld des einfachen Suchformulars benötigt ein verstecktes label-element oder ein title-attribut. Veraltete Attribute: color (1x) für link (1x).

7 1.1.1b - Alternativtexte für Grafiken und Objekte teilweise Seite 7 Das Bagso-Logo sowie die "Gefördert durch"-grafik tragen keine aussagekräftigen Alternativtexte. Sinnvoll wären hier z. B. "Logo Bagso" statt "Bunden Logo" bzw. "Gefördert durch das Bundesministerium der Justiz und für Verbraucherschutz" statt "Ministerium Logo" a - Schriftgröße variabel teilweise Im Internet Explorer ist die Schrift, bis auf die Veröffentlichungsinformationen der Blog-Einträge, nicht skalierbar a - Aussagekräftige Linktexte teilweise Der Linktext " /article /ec-karten-betruegerschla " ist nicht sehr aussagekräftig. Die verlinkte Grafik des Blog-Eintrags "Datenschutz bei Windows - ein erfolgreicher Stammtisch in Bad Urach" trägt den wenig aussagekräftigen Alternativtext, und damit Linktext, "PC Screen". Die verlinkten Grafiken der Blog-Einträge "EC-Kartenmissbrauch steigt - Internetkriminalität sinkt" und "Surfen im Internet Zuhause und mobil: Handreichung #2" haben gar keine Alternativtexte und damit auch keine Linktexte. Die Uhr-Grafik der rechten Spalte trägt den irritierenden Alternativtext "A image like Kalendar". Zudem verweist sie auf den Digitalen Stammtisch, trägt aber das widersprechende title-attribut "Material- Kompass Link". Die Blätterstapel-Grafik der rechten Spalte trägt ebenfalls einen hier irritierenden Alternativ- und damit Linktext "too much papers".

8 Seite a - Alternativtexte für Bedienelemente eher nicht Die verlinkte Grafik des Blog-Eintrags "Datenschutz bei Windows - ein erfolgreicher Stammtisch in Bad Urach" trägt den wenig aussagekräftigen Alternativtext "PC Screen". Die verlinkten Grafiken der Blog-Einträge "EC-Kartenmissbrauch steigt - Internetkriminalität sinkt" und "Surfen im Internet Zuhause und mobil: Handreichung #2" haben gar keine Alternativtexte. Die Uhr-Grafik der rechten Spalte trägt den aussagenlosen Alternativtext "A image like Kalendar". Zudem verweist sie auf den Digitalen Stammtisch, trägt aber das widersprechende title-attribut "Material- Kompass Link". Die Blätterstapel-Grafik der rechten Spalte trägt ebenfalls einen aussagenlosen Alternativ- und Linktext "too much papers". Verlinkte Grafiken dienen als Bedienelemente, bei denen der Alternativtext als Linktext fungiert. Dieser sollte Auskunft für das Ziel des Links bzw. die ausgelöste Aktion geben b - Links informieren über Dateiformat nicht Der Link "Handreichung" verweist unangekündigt auf eine PDF-Datei a - Valides HTML nicht 16 Fehler (siehe W3 HTML Validator) 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.1c - HTML-Strukturelemente für Zitate 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.4.2a - Ton abschaltbar 2.4.8b - Zweck der Alternativversion einleuchtend 3.1.2a - Anderssprachige Abschnitte ausgezeichnet 3.3.4a - Fehlervermeidung wird unterstützt 4.1.2a - Name und Rolle von Bedienelementen verfügbar

9 Seite 9 Seite 3: Digitaler Stammtisch 89,50 Punkte Prüfschritt Bewertung Anmerkung 1.3.1b - HTML-Strukturelemente für Listen 1.3.1d - Inhalte gegliedert Es gibt ein leeres Absatzelement e - Datentabellen richtig aufgebaut Die einfachen Datentabellen der Kalendermonate sind ausreichend gut strukturiert, allerdings könnte die Verständlichkeit mit dem Einfügen optisch versteckter Texte in den Spaltenüberschriften verbessert werden, z. B. "M<versteckt>ontag</versteckt>" b - Sinnvolle Reihenfolge 1.3.3a - Ohne Bezug auf sensorische Merkmale nutzbar 1.4.3a - Kontraste von Texten ausreichend 1.4.3b - Kontraste von Grafiken ausreichend 1.4.3c - Inhalte bei benutzerdefinierten Farben erkennbar 1.4.4b - Bei Zoom auf 200% benutzbar 1.4.5a - Verzicht auf Schriftgrafiken 2.1.1a - Ohne Maus nutzbar 2.2.1a - Zeitbegrenzungen anpassbar 2.2.2a - Bewegte Inhalte abschaltbar 2.3.1a - Verzicht auf Flackern 2.4.2a - Sinnvolle Dokumenttitel 2.4.3a - Schlüssige Reihenfolge bei der Tastaturbedienung 2.4.5a - Alternative Zugangswege 2.4.6a - Title-Attribut für Symbole 3.1.1a - Hauptsprache angegeben 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 Die Hervorhebung des aktuellen Tages im Kalender verschwindet. Tage mit Veranstaltungen sind nur an der Verlinkung erkennbar. Nach dem Suche-Schalter gibt es einen zweiten, unsichtbaren Suche-Schalter. Der Telefonhörer und der Brief in der Fußzeile sind allgemein gültige Symbole und benötigen keine zusätzliche Erläuterung.

10 Seite a - Fehlermeldungen hilfreich 1.2.2a - Videos mit Untertiteln eher Es gibt eine automatisch erzeugte Untertitelung. Diese ist allerdings nicht ganz korrekt, so dass es u. U. zu Verständnisproblemen kommen kann a - HTML-Strukturelemente für Überschriften eher Die Überschriftenhierarchie beginnt nicht mit einer h1, was aber in Ordnung ist. Nach der h1-seitenüberschrift "Digitaler Stammtisch" folgt eine Platzhalter-h2 "Haupt-Reiter", die auch entfallen kann. Stattdessen sollte die h3 "Kalender" eine Ebene höher rücken, wodurch die einzelnen Monatsüberschriften in dritter Ebene wieder korrekt darunter geschachtelt wären. Nach der h2 "Aktuelles aus dem Blog" folgen h4- Elemente der Meldungen, welche mit h a - Inhaltsbereiche strukturiert 2.4.7a - Aktuelle Position des Fokus deutlich 2.4.8a - Position im Webauftritt klar 3.3.2a - Formularfelder richtig beschriftet 4.1.1b - Verzicht auf veraltete Elemente und Attribute 1.1.1a - Alternativtexte für Bedienelemente eher eher eher eher eher teilweise ausgezeichnet sein sollten. Teilweise sind für sich nutzbare Inhaltsbereiche, z. B. die Suchfunktion oder das Kontaktformular, durch Überschriftenelemente erschlossen. Dies könnte noch verbessert werden, indem die Navigationsleiste oder die Fußzeile durch eigene Überschriften oder Sprunglinks erreichbar gemacht werden. Textlinks und verlinkte Grafiken erhalten eine schwarze Umrahmung bei Fokuserhalt. Bei den Grafiken hat dieser Rand aber eine zu geringe Breite und umfasst nicht die komplette Grafik. Aktive Seiten verweisen auf sich selbst. Zudem werden sie im Menü nur optisch hervorgehoben. Das Textfeld des einfachen Suchformulars benötigt ein verstecktes label-element oder ein title-attribut. Veraltete Attribute: color (1x) für link (1x). Die Blätterstapel-Grafik der rechten Spalte trägt einen aussagenlosen Alternativtext "too much papers". Die Teaser-Grafiken der nächsten Veranstaltungen tragen leere Alternativtexte. Verlinkte Grafiken dienen als Bedienelemente, bei denen der Alternativtext als Linktext fungiert. Dieser sollte Auskunft für das Ziel des Links bzw. die ausgelöste Aktion geben.

11 1.1.1b - Alternativtexte für Grafiken und Objekte teilweise Seite 11 Das Bagso-Logo sowie die "Gefördert durch"-grafik tragen keine aussagekräftigen Alternativtexte. Sinnvoll wären hier z. B. "Logo Bagso" statt "Bunden Logo" bzw. "Gefördert durch das Bundesministerium der Justiz und für Verbraucherschutz" statt "Ministerium Logo" a - Schriftgröße variabel teilweise Im Internet Explorer ist die Schrift, bis auf die zwei Schalter unterhalb der Kalender und die Datumsangaben der Aktuelles-Meldungen in der rechten Spalte, nicht skalierbar. Im Firefox ist die Kalenderansicht sehr gedrängt, wodurch es schwer lesbar wird. In der Veranstaltungsliste kommt es zu vereinzelten Überlappungen langer Wörter a - Aussagekräftige Linktexte teilweise Die Teaser-Grafiken der nächsten Veranstaltungen tragen leere Alternativtexte. Als Layoutgrafik ist das in Ordnung, da sie hier aber ohne weiteren Text im Link-Element verlinkt sind, ist zwingend ein Alternativtext notwendig. Die Blätterstapel-Grafik der rechten Spalte trägt einen hier irritierenden Alternativ- und damit Linktext "too much papers" a - Valides HTML nicht 22 Fehler (siehe W3 HTML Validator) 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.3a - Audiodeskription für Videos 1.3.1c - HTML-Strukturelemente für Zitate 1.3.1f - Zuordnung von Tabellenzellen 1.3.1g - Kein Strukturmarkup für Layouttabellen 1.3.2a - Layouttabellen linearisierbar 1.4.2a - Ton abschaltbar 2.4.4b - Links informieren über Dateiformat 2.4.8b - Zweck der Alternativversion einleuchtend Das Video "Digitaler Stammtisch" benötigt keine Audiodeskription. Die Tonspur vermittelt alle wesentlichen Inhalte, die visuellen Inhalte unterstützen lediglich die Erzählung.

12 3.1.2a - Anderssprachige Abschnitte ausgezeichnet 3.3.4a - Fehlervermeidung wird unterstützt 4.1.2a - Name und Rolle von Bedienelementen verfügbar Seite 12