SFK - Barrierefreies Webdesign - BITV Test. Der BITV-Test Ein Testverfahren zur Prüfung von Internetseiten auf Barrierefreiheit nach der BITV

Transkript

1 1 Der BITV-Test Ein Testverfahren zur Prüfung von Internetseiten auf Barrierefreiheit nach der BITV

2 2 BIK-Testverfahren: 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

3 3 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.

4 4 Prüfinstrumente für die Prüfschritte 1. Internet Explorer 6 2. Firefox Opera 8 4. AIS Web Accessibility Toolbar Colour Contrast Analyser 6. ColorZilla 7. Web Developer Extension 8. Webformator W3C-Validator ( 10. WAVE 3.0 Web Accessibility Tool 11. Bookmarklet "Veraltete Elemente und Attribute" 12. Bookmarklet "Inhalte gegliedert" 13. Acrobat 7.0 Professional 14. (X)HTML-Quellcode-Editor mit Preview (z.b. HTML-Kit) (Vollständige Liste unter

5 5 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

6 Alternativtexte für Bedienelemente WAVE: IE mit WAT: Doc Info List Links Mozilla/Firefox mit WDT: Images Outline Images Without Alt Attributes

7 Alternativtexte für Grafiken und Objekte WAVE: IE mit WAT: Images Image List Mozilla/Firefox mit WDT: Images Outline Images Without Alt Attributes

8 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

9 Alternativen für serverseitige Imagemaps WAVE: Lynx: ismap

10 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.

11 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.

12 12 2. Verständlichkeit ohne Farbe Auch ohne Farben nutzbar Grafiken vor wechselndem Hintergrund erkennbar Helligkeitskontraste von Grafiken ausreichend Helligkeitskontraste von Texten ausreichend

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

14 Grafiken vor wechselndem Hintergrund erkennbar Firefox: Extras Einstellungen Schriftarten & Farben oder Firefox-Extension Accessibar nutzen.

15 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

16 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

17 17 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

18 Verzicht auf Schriftgrafiken Firefox mit WDT: Images Make Images Invisible bzw. Images Replace Images with Alt Atributes

19 Title-Attribut für Symbole Firefox (da Alternativtexte dort nicht als Tooltip): Sichtprüfung, ob Tooltip bei Symbolen vorhanden.

20 Valides HTML IE mit WAT: Validate W3C HTML Validator Validate HTML Firefox mit WDT Tools Validate HTML

21 Stylesheets für die Positionierung verwendet WAVE: Firefox mit WDT: Outline Outline Table Cells

22 Schriftgröße variabel Internet Explorer Ansicht Schriftgrad Sehr groß Ansicht Schriftgrad Sehr klein sowie Sichtprüfung, ob u.a. Überschneidungen bei 800x600

23 Bei geringer Bildschrimauflösung lesbar IE mit WAT: Resize 800 X 600 Resize 640 X 480 Mozilla/Firefox mit WDT: Resize 800x600 Resize 640x480

24 HTML-Strukturelemente für Überschriften WAVE: IE mit WAT: Structure Heading Structure Firefox mit WDT: Outline Outline Block Level Elements

25 HTML-Strukturelemente für Listen WAVE: IE mit WAT: Strucuture List Items Mozilla/Firefox mit WDT: Outline Outline Block Level Elements

26 HTML-Strukturelemente für Zitate WAVE: Mozilla/Firefox mit WDT: Outline Outline Custome Elements q blockquote

27 27 4. Kenntlichmachung sprachlicher Besonderheiten Anderssprachige Wörter ausgezeichnet Anderssprachige Abschnitte ausgezeichnet Hauptsprache angegeben

28 Anderssprachige Wörter ausgezeichnet Opera: User Mode Emulate Text Browser

29 Anderssprachige Abschnitte ausgezeichnet Opera: User Mode Emulate Text Browser

30 Hauptsprache angegeben Quelltextanalyse: Prüfen, ob im öffnenden html-tag das lang-attribut verwendet wird und die Hauptsprache der Seite richtig angegeben ist.

31 31 5. Nutzung und Beschreibung von Tabellen Tabellen mit Überschriften Zuordnung von Zellen in komplexen Tabellen Layouttabellen linearisierbar Kein Strukturmarkup für Layouttabellen

32 Tabellen mit Überschriften WAVE: IE mit WAT: Structure Simple Data Table

33 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.

34 Layouttabellen linearisierbar Opera: User Mode Disable Tables IE mit WAT: Structure Linearize (Remove Tables)

35 Kein Tabellenmarkup für Layouttabellen? IE mit WAT: Structure Simple Data Table

36 36 6. Nutzbarkeit ohne neuere Technologien Auch ohne Stylesheets nutzbar Auch ohne Skripte nutzbar

37 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

38 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

39 39 7. Kontrolle zeitgesteuerter Änderungen des Inhalts Verzicht auf Blinken Verzicht auf bewegte Inhalte Verzicht auf Auto-Aktualisierung Verzicht auf Weiterleitung1

40 Verzicht auf Blinken Sichtprüfung

41 Verzicht auf bewegte Inhalte Sichtprüfung

42 Verzicht auf Auto-Aktualisierung Quelltextanalyse: Steht im Kopfbereich "<meta http-equiv="refresh"..."? Lynx: Steht "REFRESH" in der ersten Zeile? Sichtprüfung

43 Verzicht auf Weiterleitung? Quelltextanalyse: Steht im Kopfbereich "<meta http-equiv="refresh"..."? Lynx: Steht "REFRESH" in der ersten Zeile? Sichtprüfung

44 44 8. Zugänglichkeit von Benutzerschnittstellen Zugängliche Alternativen für programmierte Objekte

45 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

46 46 9. Unabhängigkeit der Funktionen von Einund Ausgabegeräten Auch ohne Maus nutzbar Aktuelle Position des Fokus deutlich Schlüssige Reihenfolge bei Tastaturbedienung

47 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.

48 Schlüssige Reihenfolge bei Tastaturbedienung IE oder Mozilla/Firefox: Mit der Tabulatortaste die Links, Formularelemente und Objekte durchgehen und prüfen, ob die Reihenfolge im Wesentlichen nachvollziehbar ist.

49 Aktuelle Position des Fokus deutlich IE und Firefox: Alle Links durchtabben und prüfen, ob sie mit vergleichbaren grafischen Veränderungen auf den Fokus reagieren wie bei Mausbedienung (zum Beispiel mit Farbwechseln, Unterstreichungen oder eingeblendeten Symbolen).

50 Verwendbarkeit älterer assistiver Technologien Verzicht auf automatische Pop-Ups, neue Fenster angekündigt Beschriftung von Formularfeldern richtig angeordnet

51 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

52 Beschriftung von Formularfeldern richtig angeordnet IE mit WAT: CSS Disable CSS Structure Linearize (Remove Tables) Opera: User Mode Disable Tables

53 Öffentlichkeit und Dokumentation verwendeter Technologien Alternativen für PDFs und Office-Dateien Verzicht auf veraltete Elemente und Attribute Seiten für alle (keine Textversion)

54 Alternativen für PDFs und Office- Dateien Prüfen, ob MS-Office- und PDF-Dokumente verwendet werden und ob HTML-Alternativen vorhanden sind. PDFs mit Belegcharakter müssen zugänglich sein.

55 Verzicht auf veraltete Elemente Firefox mit installiertem Bookmarklet: Lesezeichen veraltete Elemente

56 Seiten für alle (keine Textversion) Sichtprüfung: Gibt es Verweise auf eine barrierefreie Version / Textversion?

57 Kontext- und Orientierungsinformationen Frames mit Titel und Name Aufbau der Frames verständlich Inhalte gegliedert Label mit Formularelementen verknüpft

58 Frames mit Titel und Name IE mit WAT: Doc Info List Frames WAVE:

59 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.

60 Inhalte gegliedert Firefox mit installiertem Bookmarklet: Lesezeichen Inhalte gegliedert

61 Label mit Formularelementen verknüpft? IE oder Mozilla/Firefox: Die zu einem Eingabefeld zugehörige Beschriftung anklicken: Springt der Cursor in das Eingabefeld? WAVE:

62 Gestaltung von Navigationsmechanismen Aussagekräftige Linktexte Links informieren über Dateiformat Sinnvolle Dokumenttitel Sitemap oder ähnliche Orientierungshilfe Navigation einheitlich Position im Webauftritt klar

63 Aussagekräftige Linktexte IE mit WAT: Doc Info List Links

64 Links informieren über Dateiformat IE mit WAT: Doc Info List Links Links auf nicht-html-angebote in der Linkliste anhand der URL identifizieren

65 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?

66 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?

67 Navigation einheitlich Sichtprüfung: Gibt es klar abgrenzbar Navigationsbereiche und sind diese Bereiche fix?

68 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?

69 Förderung des allgemeinen Verständnisses Einfache Wörter

70 Einfache Wörter? Sichtprüfung: nicht gebräuchliche Fremdworte? veraltete Wörter (Speise und Trank)? Fachwörter? Redewendungen? Abkürzungen?