Der BITV Test. SFK, Schulung Medienfachwirte. Prüfschritte, Beispiele, Übungen

Transkript

1 Der BITV Test SFK, Schulung Medienfachwirte Prüfschritte, Beispiele, Übungen Dipl.-Ing. Detlef Girke BIK-Hamburg, Beratung und Schulung SFK, Schulung Medienfachwirte 21. Februar

2 Grundsätzliches zum BITV-Test 52 Prüfschritte Jeder Prüfschritt bringt 1 bis 3 Punkte Maximal können 100 Punkte erreicht werden Mindestens 95 Punkte: Sehr gut zugänglich Mindestens 90 Punkte: Gut zugänglich Mindestens 80 Punkte: Eingeschränkt zugänglich Unter 80 Punkte: Schlecht zugänglich 2

3 Grundsätzliches zum BITV-Test Das Testverfahren ist öffentlich verfügbar unter Jeder Prüfschritt liefert folgende Informationen: Technische Angaben Was wird geprüft? Warum wird das geprüft? Wie wird geprüft? Einordnung des Prüfschritts Diskussion Quellen Fragen zum Prüfschritt SFK, Schulung Medienfachwirte 21. Februar

4 Prüfverfahren Was gehört zum Prüfumfang, was soll ausgeschlossen werden? Auswahl von Seiten: Suchen nach potenziellen Fehlerquellen (Datentabellen, Formulare,...) Archivierung der zum Test ausgewählten Seiten. Für jede Seite: Prüfschritte anwenden (ggf. inkl. Korrekturvorschlägen). Zusammenfassende Beurteilung verfassen. Prüfbericht mit Detailergebnissen erstellen. SFK, Schulung Medienfachwirte 21. Februar

5 Prüfinstrumente für die Prüfschritte 1. Internet Explorer 6 2. Firefox 1.5 oder Opera 9 4. AIS Web Accessibility Toolbar Colour Contrast Analyser 6. ColorZilla 7. Web Developer Extension 8. Webformator W3C-Validator ( 2. WAVE 3.0 Web Accessibility Tool 3. Bookmarklet "Veraltete Elemente und Attribute" 4. Bookmarklet "Inhalte gegliedert" 5. Acrobat 7.0 Professional 6. (X)HTML-Quellcode-Editor mit Preview (z.b. HTML-Kit) 7. (Vollständige Liste unter SFK, Schulung Medienfachwirte 21. Februar

6 Projektintegration Entwicklungsbegleitender Test Eine Beratungsstelle prüft Auf Wunsch Hinweise zur Behebung von Mängeln Auf Wunsch Workshop zur Vermittlung der Testergebnisse Ausführlicher Prüfbericht Keine Möglichkeit der Veröffentlichung der Testergebniisse SFK, Schulung Medienfachwirte 21. Februar

7 Projektintegration Abschließender Test Zwei unabhängige Prüfvorgänge Zwei weitere Beratungsstellen (Ansprechpartner testet nicht) Abschließende Qualtätskontrolle Ergebnis darf veröffentlicht werden SFK, Schulung Medienfachwirte 21. Februar

8 Weitere Zertifizierungsmöglichkeiten DIN Certco Verwendet das BIK-Prüfverfahren Vergibt das Zertifikat für ein Jahr, dann Nachtest Drei Sterne Modell BITV Priorität 1 BITV Priorität 1 und 2 Prüfung der Inhalte (Verständlichkeit, Gebärdensprache,...) SFK, Schulung Medienfachwirte 21. Februar

9 Vorarbeiten 1. Installation des WAVE 3.0 Bookmarklets von 2. Installation der BIK-Bookmarklets Veraltete Elemente und Inhalte gegliedert von 3. Übertragen und Konfigurieren des Colour Contrast Analysers auf die Pool-PCs SFK, Schulung Medienfachwirte 21. Februar

10 1. Bereitstellung äquivalenter Alternativen für Audio- und visuelle Inhalte Alternativtexte für Bedienelemente Alternativtexte für Grafiken und Objekte Leere ALT-Attribute für Layoutgrafiken Alternativen für serverseitige Imapemaps Audiodeskription für Videos Videos mit Untertiteln SFK, Schulung Medienfachwirte 21. Februar

11 Alternativtexte für Bedienelemente WAVE: IE mit WAT: Doc Info List Links Mozilla/Firefox mit WDT: Images Display Alt Attributes SFK, Schulung Medienfachwirte 21. Februar

12 Alternativtexte für Bedienelemente Übung (Firefox): Öffnen Sie die Seite - WDT: Images - Display Alt Attributes Finden Sie Bedienelemente mit nur unzureichendem oder ohne Alternativtext. SFK, Schulung Medienfachwirte 21. Februar

13 Alternativtexte für Grafiken und Objekte WAVE: IE mit WAT: Images Image List Mozilla/Firefox mit WDT: Images Display Alt Attributes SFK, Schulung Medienfachwirte 21. Februar

14 Alternativtexte für Grafiken und Objekte SFK, Schulung Medienfachwirte 21. Februar

15 Alternativtexte für Grafiken und Objekte Übung: Öffnen Sie die Seite - WDT: Images - Display Alt Attributes Finden Sie Grafiken und Objekte mit nur unzureichendem oder ohne Alternativtext. SFK, Schulung Medienfachwirte 21. Februar

16 Leere ALT-Attribute für Layoutgrafiken WAVE: IE mit WAT: Images Toggle Image/Alt Mozilla/Firefox mit WDT: Images Outline Images With Empty Alt Attributes Übung: Finden Sie âuf Layoutgrafiken und prüfen Sie, ob diese einen leeren Alternativtext besitzen. SFK, Schulung Medienfachwirte 21. Februar

17 Alternativen für serverseitige Imagemaps WAVE: Lynx: ismap SFK, Schulung Medienfachwirte 21. Februar

18 Audiodeskription für Videos Falls auf der Seite Videos mit zu beschreibendem Inhalt (z.b. keine Gebärdenvideos) vorhanden sind, ist zu prüfen, ob sie über Audiodeskriptionen verfügen. SFK, Schulung Medienfachwirte 21. Februar

19 Videos mit Untertiteln Falls auf der Seite Videos mit Tonspur vorhanden sind, ist zu prüfen, ob sie über Untertitel (evtl. auch zuschaltbar) verfügen. SFK, Schulung Medienfachwirte 21. Februar

20 2. Verständlichkeit ohne Farbe Auch ohne Farben nutzbar Grafiken vor wechselndem Hintergrund erkennbar Helligkeitskontraste von Grafiken ausreichend Helligkeitskontraste von Texten ausreichend SFK, Schulung Medienfachwirte 21. Februar

21 Auch ohne Farben nutzbar Sichtprüfung: Prüfen, ob Text sich über die Angabe der Farbe auf Elemente der Webseite bezieht. SFK, Schulung Medienfachwirte 21. Februar

22 Auch ohne Farben nutzbar Zum Beispiel SFK, Schulung Medienfachwirte 21. Februar

23 Grafiken vor wechselndem Hintergrund erkennbar Firefox: Extras Einstellungen Schriftarten & Farben oder Firefox-Extension Accessibar nutzen. (Empfehlung: Auch in Opera und IE prüfen. Die Darstellung z.b. von Bestätigungs-Schaltflächen kann von Browser zu Browser divergieren) SFK, Schulung Medienfachwirte 21. Februar

24 Grafiken vor wechselndem Hintergrund erkennbar Zum Beispiel hamburg.de SFK, Schulung Medienfachwirte 21. Februar

25 Helligkeitskontraste von Grafiken ausreichend IE plus Colour Contrast Analyser, Firefox plus Extension Colorzilla: Prüfen, ob Helligkeitsunterschied bei informativen Grafiken 125 oder mehr beträgt. Grundlage: W3C-Formel ((Rot-Wert x 299) + (Grün-Wert x 587) + (Blau-Wert x 114)) / 1000 SFK, Schulung Medienfachwirte 21. Februar

26 Helligkeitskontraste von Grafiken ausreichend SFK, Schulung Medienfachwirte 21. Februar

27 Helligkeitskontraste von Texten ausreichend IE plus Colour Contrast Analyser (CCA), Firefox plus Extension Colorzilla / CCA: Prüfen, ob Helligkeitsunterschied bei Fließtext 125 oder mehr, ansonsten mind. 110 beträgt. Grundlage: W3C-Formel ((Rot-Wert x 299) + (Grün-Wert x 587) + (Blau-Wert x 114)) / 1000 SFK, Schulung Medienfachwirte 21. Februar

28 3. Korrekte Verwendung der Markup- Sprachen Verzicht auf Schriftgrafiken Title-Attribut für Symbole Valides HTML Stylesheets für die Positionierung verwendet Schriftgröße variabel Bei geringer Bildschirmauflösung lesbar HTML-Strukturelemente für Überschriften HTML-Strukturelemente für Listen HTML-Strukturelemente für Zitate SFK, Schulung Medienfachwirte 21. Februar

29 Verzicht auf Schriftgrafiken Firefox mit WDT: Images Make Images Invisible bzw. Images Replace Images with Alt Atributes SFK, Schulung Medienfachwirte 21. Februar

30 Verzicht auf Schriftgrafiken Übung: Suchen Sie auf nach wesentlichen Inhalten, die als Schriftgrafiken realisiert wurden. SFK, Schulung Medienfachwirte 21. Februar

31 3.1.2 Title-Attribut für Symbole Firefox (da Alt-Texte dort nicht als Tooltip dargestellt werden): Sichtprüfung, ob Tooltip bei Symbolen vorhanden ist. Übung: Suchen Sie auf nach Symbolen ohne Title-Attribut.. SFK, Schulung Medienfachwirte 21. Februar

32 3.1.2 Title-Attribut für Symbole SFK, Schulung Medienfachwirte 21. Februar

33 Valides HTML IE mit WAT: Validate W3C HTML Validator Validate HTML Firefox mit WDT Tools Validate HTML Übung: Prüfen Sie auf valides HTML. SFK, Schulung Medienfachwirte 21. Februar

34 Stylesheets für die Positionierung verwendet WAVE: Firefox mit WDT: Outline Outline Table Cells SFK, Schulung Medienfachwirte 21. Februar

35 Stylesheets für die Positionierung verwendet Übung: Prüfen Sie auf Layout-Tabellen. SFK, Schulung Medienfachwirte 21. Februar

36 Schriftgröße variabel Internet Explorer Ansicht Schriftgrad Sehr groß Ansicht Schriftgrad Sehr klein sowie Sichtprüfung, ob u.a. Überschneidungen bei 800x600 SFK, Schulung Medienfachwirte 21. Februar

37 Schriftgröße variabel SFK, Schulung Medienfachwirte 21. Februar

38 3.4.2.Bei geringer Bildschrimauflösung lesbar IE mit WAT: Resize 800 X 600 Resize 640 X 480 Mozilla/Firefox mit WDT: Resize 800x600 Resize 640x480 SFK, Schulung Medienfachwirte 21. Februar

39 HTML-Strukturelemente für Überschriften WAVE: IE mit WAT: Structure Heading Structure Firefox mit WDT: Outline Outline Block Level Elements Bookmarklet Inhalte gegliedert SFK, Schulung Medienfachwirte 21. Februar

40 HTML-Strukturelemente für Überschriften Übung: Prüfen Sie auf ob für alle Überschrifte H-Tags verwendet wurden. SFK, Schulung Medienfachwirte 21. Februar

41 HTML-Strukturelemente für Listen WAVE: IE mit WAT: Strucuture List Items Mozilla/Firefox mit WDT: Outline Outline Block Level Elements Ansicht ohne CSS SFK, Schulung Medienfachwirte 21. Februar

42 HTML-Strukturelemente für Listen Ansicht ohne CSS SFK, Schulung Medienfachwirte 21. Februar

43 HTML-Strukturelemente für Zitate WAVE: Mozilla/Firefox mit WDT: Outline Outline Custom Elements q blockquote SFK, Schulung Medienfachwirte 21. Februar

44 4. Kenntlichmachung sprachlicher Besonderheiten Anderssprachige Wörter ausgezeichnet Anderssprachige Abschnitte ausgezeichnet Hauptsprache angegeben SFK, Schulung Medienfachwirte 21. Februar

45 Anderssprachige Wörter ausgezeichnet Opera: User Mode Emulate Text Browser SFK, Schulung Medienfachwirte 21. Februar

46 Anderssprachige Wörter ausgezeichnet SFK, Schulung Medienfachwirte 21. Februar

47 Anderssprachige Abschnitte ausgezeichnet Opera: User Mode Emulate Text Browser SFK, Schulung Medienfachwirte 21. Februar

48 Hauptsprache angegeben Quelltextanalyse: Prüfen, ob im öffnenden html-tag das lang-attribut verwendet wird und die Hauptsprache der Seite richtig angegeben ist. SFK, Schulung Medienfachwirte 21. Februar

49 Hauptsprache angegeben Übung: Öffnen Sie die Seite und prüfen Sie im Quelltext, ob die Hauptsprache angegeben wurde. SFK, Schulung Medienfachwirte 21. Februar

50 5. Nutzung und Beschreibung von Tabellen Tabellen mit Überschriften Zuordnung von Zellen in komplexen Tabellen Layouttabellen linearisierbar Kein Strukturmarkup für Layouttabellen SFK, Schulung Medienfachwirte 21. Februar

51 Tabellen mit Überschriften WAVE: IE mit WAT: Structure Simple Data Table SFK, Schulung Medienfachwirte 21. Februar

52 Tabellen mit Überschriften Übung: Prüfen Sie die Tabelle auf auf Standardkonformität. SFK, Schulung Medienfachwirte 21. Februar

53 Zuordnung von Zellen in komplexen Tabellen IE mit WAT: Structure Complex Data Table wählen Prüfen, ob der Geltungsbereich von Tabellenüberschriften über das Scope-Attribut definiert ist oder die einzelnen Zellen mithilfe von headers- und id- Attributen ihren Überschriften zugeordnet sind. WDT: Outline Custom Elements SFK, Schulung Medienfachwirte 21. Februar

54 Zuordnung von Zellen in komplexen Tabellen SFK, Schulung Medienfachwirte 21. Februar

55 Layouttabellen linearisierbar Opera: User Mode Disable Tables IE mit WAT: Structure Linearize (Remove Tables) Firefox mit WDT: Miscellaneous Linearize Page SFK, Schulung Medienfachwirte 21. Februar

56 Layouttabellen linearisierbar Übung: Stellen Sie die Seite mit Hilfe des Firefox linearisiert dar. SFK, Schulung Medienfachwirte 21. Februar

57 5.4.1.Kein Tabellenmarkup für Layouttabellen? IE mit WAT: Structure Simple Data Table Quelltextanalyse Firefox mit WDT: Outline Show Element Names When Outlining, dann Outline Outline Custom Elements SFK, Schulung Medienfachwirte 21. Februar

58 Kein Tabellenmarkup für Layouttabellen? Übung: Prüfen Sie anhand von ob dieser Prüfschritt dort erfüllt ist. SFK, Schulung Medienfachwirte 21. Februar

59 6. Nutzbarkeit ohne neuere Technologien Auch ohne Stylesheets nutzbar Auch ohne Skripte nutzbar SFK, Schulung Medienfachwirte 21. Februar

60 Auch ohne Stylesheets nutzbar IE mit WAT: CSS CSS On/Off und CSS Inline CSS Off Mozilla/Firefox mit WDT: Disable Disable Styles Disable all Styles SFK, Schulung Medienfachwirte 21. Februar

61 Auch ohne Stylesheets nutzbar Übung: Deaktivieren Sie auf das Stylesheet und prüfen Sie, ob die Seite dann noch nutzbar ist. SFK, Schulung Medienfachwirte 21. Februar

62 Auch ohne Skripte nutzbar Opera: Tools Quick Preferences Enable Plug-ins IE mit WAT: IE Options Toggle Javascript Mozilla/Firefox mit WDT: Disable Disable Javascript SFK, Schulung Medienfachwirte 21. Februar

63 Auch ohne Skripte nutzbar Übung: Deaktivieren Sie im Firefox das Ausführen von Javascript und prüfen Sie auf unter Dienste > Newsletter > Der Tag, ob die Suchfunktion dann noch nutzbar ist. SFK, Schulung Medienfachwirte 21. Februar

64 7. Kontrolle zeitgesteuerter Änderungen des Inhalts Verzicht auf Blinken Verzicht auf bewegte Inhalte Verzicht auf Auto-Aktualisierung Verzicht auf Weiterleitung1 SFK, Schulung Medienfachwirte 21. Februar

65 Verzicht auf Blinken Sichtprüfung SFK, Schulung Medienfachwirte 21. Februar

66 Verzicht auf bewegte Inhalte Sichtprüfung SFK, Schulung Medienfachwirte 21. Februar

67 Verzicht auf Auto-Aktualisierung Quelltextanalyse: Steht im Kopfbereich "<meta http-equiv="refresh"..."? Lynx: Steht "REFRESH" in der ersten Zeile? Sichtprüfung SFK, Schulung Medienfachwirte 21. Februar

68 Verzicht auf Weiterleitung? Quelltextanalyse: Steht im Kopfbereich "<meta http-equiv="refresh"..."? Lynx: Steht "REFRESH" in der ersten Zeile? Sichtprüfung SFK, Schulung Medienfachwirte 21. Februar

69 8. Zugänglichkeit von Benutzerschnittstellen Zugängliche Alternativen für programmierte Objekte SFK, Schulung Medienfachwirte 21. Februar

70 Zugängliche Alternativen für programmierte Objekte Falls programmierte Objekte vorhanden (z.b. Flash o. Java mit eigenen Schaltflächen oder Eingabefeldern), prüfen ob eine Alternative vorhanden ist, oder ob die Funktionalität auch bei abgeschaltetem PlugIn gewährleistet ist SFK, Schulung Medienfachwirte 21. Februar

71 9. Unabhängigkeit der Funktionen von Ein- und Ausgabegeräten Auch ohne Maus nutzbar Aktuelle Position des Fokus deutlich Schlüssige Reihenfolge bei Tastaturbedienung SFK, Schulung Medienfachwirte 21. Februar

72 Auch ohne Maus nutzbar IE oder Mozilla/Firefox: Mittels TAB-Taste die Links der Internetseite anspringen und prüfen, ob alles erreichbar und nutzbar ist. Übung: Prüfen Sie mittels TAB-Taste, ob Sie alle Links und Formularfelder auf der Seite auch ohne Maus erreichen können. SFK, Schulung Medienfachwirte 21. Februar

73 9.2.2.Schlüssige Reihenfolge bei Tastaturbedienung IE oder Mozilla/Firefox: Mit der Tabulatortaste die Links, Formularelemente und Übung: Objekte durchgehen und prüfen, ob die Reihenfolge im Wesentlichen nachvollziehbar ist. Prüfen Sie mittels TAB-Taste, ob auf alle Links in einer für Sie schlüssigen Reihenfolge angesprungen werden können.. SFK, Schulung Medienfachwirte 21. Februar

74 Aktuelle Position des Fokus deutlich IE und Firefox: Alle Links durchtabben und prüfen, ob sie mit vergleichbaren grafischen Veränderungen auf den Fokus Übung: reagieren wie bei Mausbedienung (zum Beispiel mit Farbwechseln, Unterstreichungen oder eingeblendeten Symbolen). Prüfen Sie auf der Seite ob der Prüfschritt hier erfüllt ist. SFK, Schulung Medienfachwirte 21. Februar

75 10. Verwendbarkeit älterer assistiver Technologien Verzicht auf automatische Pop-Ups, neue Fenster angekündigt Beschriftung von Formularfeldern richtig angeordnet SFK, Schulung Medienfachwirte 21. Februar

76 Verzicht auf PopUps bzw. neue Fenster angekündigt IE mit WAT: Structure JavaScript / New Window Links WAVE: Opera: User Mode Emulate Textbrowser Anschließend praktisch verifizieren SFK, Schulung Medienfachwirte 21. Februar

77 Verzicht auf PopUps bzw. neue Fenster angekündigt Übung: Prüfen Sie auf der Seite ob der Prüfschritt hier erfüllt ist. SFK, Schulung Medienfachwirte 21. Februar

78 Beschriftung von Formularfeldern richtig angeordnet IE mit WAT: CSS Disable CSS, Structure Linearize (Remove Tables) Opera: User Mode Disable Tables Übung: Prüfen Sie auf der Seite ob alle Formularfeld-Beschriftungen richtig angeordnet sind.. SFK, Schulung Medienfachwirte 21. Februar

79 11. Öffentlichkeit und Dokumentation verwendeter Technologien Angemessene Formate Verzicht auf veraltete Elemente und Attribute Seiten für alle (keine Textversion) SFK, Schulung Medienfachwirte 21. Februar

80 Angemessene Formate Prüfen, ob MS-Office- und PDF-Dokumente verwendet werden Wird das PDF zur Erfüllung der angestrebten Aufgabe benötigt? Gibt es HTML-Alternativen zu Office-Dokumenten? Gibt es ein Konzept für barrierefreie PDFs? Kurz-Demonstration: Prüfen mit dem Adobe Acrobat 7. SFK, Schulung Medienfachwirte 21. Februar

81 Verzicht auf veraltete Elemente Firefox mit installiertem Bookmarklet: Lesezeichen veraltete Elemente SFK, Schulung Medienfachwirte 21. Februar

82 Seiten für alle (keine Textversion) Sichtprüfung: Gibt es Verweise auf eine barrierefreie Version / Textversion? SFK, Schulung Medienfachwirte 21. Februar

83 12. Kontext- und Orientierungsinformationen Frames mit Titel und Name Aufbau der Frames verständlich Inhalte gegliedert Label mit Formularelementen verknüpft SFK, Schulung Medienfachwirte 21. Februar

84 Frames mit Titel und Name IE mit WAT: Doc Info List Frames WAVE: SFK, Schulung Medienfachwirte 21. Februar

85 Aufbau der Frames verständlich Lynx: Prüfen, ob das System der Frames aus den Titeln oder den Namen der Frames zusammen mit den zusätzlichen Erläuterungen leicht zu verstehen ist. SFK, Schulung Medienfachwirte 21. Februar

86 Inhalte gegliedert Firefox mit installiertem Bookmarklet: Lesezeichen Inhalte gegliedert Übung: Gliederung der BPB- Startseite überprüfen. SFK, Schulung Medienfachwirte 21. Februar

87 Label mit Formularelementen verknüpft? IE oder Mozilla/Firefox: Die zu einem Eingabefeld zugehörige Beschriftung anklicken: Springt der Cursor in das Eingabefeld? WAVE: Übung: Überprüfen Sie das Formular auf auf das Vorhandensein von Labels. SFK, Schulung Medienfachwirte 21. Februar

88 13. Gestaltung von Navigationsmechanismen Aussagekräftige Linktexte Links informieren über Dateiformat Sinnvolle Dokumenttitel Sitemap oder ähnliche Orientierungshilfe Navigation einheitlich Position im Webauftritt klar SFK, Schulung Medienfachwirte 21. Februar

89 Aussagekräftige Linktexte IE mit WAT: Doc Info List Links Opera: STRG + j Übung: Überprüfen Sie auf mehr -Links und stellen Sie fest, ob diese aussagekräftig sind. SFK, Schulung Medienfachwirte 21. Februar

90 Links informieren über Dateiformat IE mit WAT: Doc Info List Links Links auf nicht-html-angebote in der Linkliste anhand der URL identifizieren SFK, Schulung Medienfachwirte 21. Februar

91 Sinnvolle Dokumenttitel Sichtprüfung: Besitzen die zu prüfenden Seiten eine immer gleiche, allgemeine Bezeichnung des Webauftritts und eine unterscheidende, individuelle Bezeichnung der jeweiligen Seite? SFK, Schulung Medienfachwirte 21. Februar

92 Sitemap oder ähnliche Orientierungshilfe Sichtprüfung: Wird der Inhalt des Webauftritts zusammengefasst oder so übersichtlich dargestellt, dass man sich einen Überblick über den Webauftritt verschaffen kann? SFK, Schulung Medienfachwirte 21. Februar

93 Navigation einheitlich Sichtprüfung: Gibt es klar abgrenzbar Navigationsbereiche und sind diese Bereiche fix? SFK, Schulung Medienfachwirte 21. Februar

94 Position im Webauftritt klar Sichtprüfung: Ist erkennbar, an welcher Stelle innerhalb der Website man sich befindet oder wie man zu dieser Seite (von der Startseite) gelangt ist? SFK, Schulung Medienfachwirte 21. Februar

95 14. Förderung des allgemeinen Verständnisses Einfache Wörter SFK, Schulung Medienfachwirte 21. Februar

96 Einfache Wörter? Sichtprüfung: nicht gebräuchliche Fremdworte? veraltete Wörter (Speise und Trank)? Fachwörter? Redewendungen? Abkürzungen? SFK, Schulung Medienfachwirte 21. Februar