Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar

Transkript

1 Evaluation der Barrierefreiheit mit der Firefox Web Developer Toolbar Viele Betreiber von Webseiten sind sich unsicher, wie sie die Barrierefreiheit ihrer Webseite evaluieren können. Der Vortrag soll praktikable Möglichkeiten aufzeigen, die komplexen Vorgaben der BITV (Barrierefreie Informationstechnik-Verordnung) in wichtigen Punkten zu testen. Dieser erste Überblick über die Zugänglichkeit einer Seite kann mithilfe des Firefox Browsers und der Erweiterung Web Developer Toolbar (Download unter gewonnen werden. Die Prüfungen, die nicht mit der Web Developer Toolbar zu leisten sind, werde ich in diesem Vortrag ausklammern. 1. Alternative Beschreibungen visuelle Inhalte 1. 1 Grafiken mit ALT-Attributen Nutzer von Screenreadern oder Textbrowsern können die Grafiken, die auf einer Webseite verwendet werden nicht sehen. Deshalb sollte bei der Erstellung von Webseiten darauf geachtet werden, dass die Grafiken durch alternative Textbeschreibungen ersetzt werden können. D.h. die Seite muss auch dann noch problemlos zu nutzen sein, wenn die grafischen Inhalte durch die entsprechenden Alternativtexte ersetzt wurden. Ein Test mit der Web Developer Toolbar erfolgt über die Menüpunkte: Grafiken > Grafiken durch ALT-Attribute ersetzen.

2 Alle Grafiken sollten mit einer angemessenen und entsprechenden Text-Alternative versehen sein. Angemessene Textalternativen sind kurz gefasst und geben bei Schriftgrafiken den Text wieder, bei Symbolen deren Bedeutung und bei Fotos eine kurze Beschreibung des Abgebildeten. Bei Schaltflächen muss die Aktion erkennbar sein die durch einen Klick ausgelöst wird. Bei komplexeren Darstellungen wie Diagrammen sollten ausführliche Beschreibungen nicht im Alternativtext, sondern im Kontext der Abbildung zur Verfügung gestellt werden, d.h. im zugehörigen oder einem verlinkten Text (mit D-Link oder Longdesc-Attribut). Anschließend wird untersucht, ob sich auf der Seite Grafiken befinden, die gar kein ALT-Attribut besitzen: Grafiken > Grafiken hervorheben > Grafiken ohne ALT-Attribute 1. 2 Grafiken mit leeren ALT-Attributen Wenn Grafiken nur zu Layoutzwecken eingesetzt werden, sollten sie mit einem leeren ALT- Attribut versehen werden, z.b.: <img src="beispiel.gif" alt="" />. Die beste Lösung besteht darin, diese Grafiken, die nur der Verschönerung dienen, über CSS als Hintergrundgrafiken einzubinden. Bei Grafiken ohne ALT-Attribut werden von den meisten Screen-Readern die Dateinamen vorgelesen. Grafiken mit leerem ALT-Attribut werden dagegen ignoriert, was bei rein dekorativen Grafiken sinnvoll ist. Wenn auf der untersuchten Seite solche Grafiken verwendet werden, können diese mit der Toolbar über: Grafiken > Grafiken hervorheben > Grafiken mit leeren ALT-Attributen identifiziert werden.

3 2. Bestimmungsgemäße Verwendung der Markup-Sprachen 2. 1 Keine Schriftgrafiken Bei der Darstellung von Informationen sollte möglichst eine Markup-Sprache (z.b. (X)HTML) statt einer Schriftgrafik verwendet werden. Grafiken haben entscheidende Nachteile. Sie können nicht in Größe und Farbe an die individuellen Bedürfnisse der Nutzer angepasst werden. Deshalb sollten Textgrafiken nur in Ausnahmefällen verwendet werden wie z.b. für Firmenlogos. Zum Testen wird in der Web Developer Toolbar die Funktion Grafiken > Grafiken ausblenden aufgerufen und geprüft, ob dadurch Schriftgrafiken verschwinden.

4 2. 2 Verwendung des Title-Attribut bei Symbolen Auch Symbol-Grafiken lassen sich nicht an die Bedürfnisse der Nutzer anpassen. Außerdem kann die Bedeutung vieler Symbole unklar oder zweideutig sein. Deshalb sollten Symbole zusätzlich zum ALT-Attribut (das nicht in allen Browsern als Tooltip angezeigt wird) mit dem TITLE- Attribut versehen werden. Dazu wird die Seite im Firefox geöffnet (in diesem Browser werden Alternativtexte nicht als Tooltips anzeigt) und geprüft, ob die Bedeutung der Symbole auch für sehende Besucher in irgendeiner Weise (zum Beispiel im TITLE-Attribut der Grafik) in Textform angegeben ist Valider Quellcode Webseiten, die sich nicht an die offizielle (X)HTML-Syntax halten oder fehlerhaften Quellcode enthalten können nicht mit allen Browsern oder Wiedergabegeräten problemlos dargestellt werden. Die Web Developer Toolbar bietet einfache Möglichkeiten, um die aktuelle Seite und das verlinkte Style Sheets mit dem HTML- und dem CSS Validator des W3C (World Wide Web Consortium) zu testen. Dies erfolgt über die Menüpunkte Werkzeuge > Validate CSS und Werkzeuge > Validate HTML. Die aktuellen Standards für HTML und XHTML zielen auf die Trennung von Inhalt und Layout. Viele veraltete Elemente wie z.b.: center, font, menu, u, background, bgcolor, hspace, vspace stehen dieser Trennung entgegen. Diese missbilligten ( deprecated ) Elemente werden im folgenden Prüfschritt identifiziert. Zuerst wird in der Toolbar die Option Hervorheben > Typ der Elemente beim Hervorheben einblenden aktiviert. Dann den Menüpunkt Hervorheben > Missbilligte Elemente hervorheben aufrufen

5 2. 4 Gestaltung und Präsentation mit Stylesheets Die Verwendung von Stylesheets folgt dem Paradigma der Inhalt/Layout Trennung. Diese Art der Positionierung erlaubt dem Besucher einer Webseite die Anpassung an die eigenen Bedürfnisse (z.b. mit einem User-Stylesheet).. Zur Prüfung wird in der Web Developer Toolbar die Funktion Hervorheben > Tabellen hervorheben aufgerufen, um zu Testen, ob Tabellen auf der Seite vorkommen. Falls Tabellen angezeigt werden, ist zu prüfen, ob es sich um Layouttabellen handelt, die allein der Positionierung von Elementen dienen.

6 2. 5 Schriftgröße veränderbar Auch hier geht es um die Möglichkeiten der individuellen Anpassung an die Bedürfnisse des Besuchers. Zur Prüfung die Schrift bei einer Browserfenstergröße von 800x600 durch zweimaliges wählen von Ansicht > Schriftgrad > vergrößern (oder zweimaliges Drücken der Tastenkombination Strg + +) um zwei Stufen vergrößern. Dieser Prüfschritt muss auch im Internet Explorer durchgeführt werden, da dieser Browser bis zur Version 6.0 Schriftgrößen, die in px angegeben sind nicht skaliert. Dort unter Ansicht > Schriftgrad die Schrift auf "Sehr groß" stellen. Alle Texte sollten jetzt noch gut lesbar sein ohne sich zu überlappen oder abgeschnitten zu werden Bei geringer Bildschirmauflösung lesbar Die Seite soll auch von Besuchern mit einer kleinen Bildschirmauflösung problemlos nutzbar sein. Zum Testen die Seite aufrufen und mithilfe der Web Developer Toolbar (Größe > 800x600) die Browserfenstergröße einstellen und die Lesbarkeit prüfen. Oder unter Verschiedenes > für Kleinbildschirm rendern.

7 2. 7 HTML-Strukturelemente für Überschriften, Listen und Zitate Zur korrekten Strukturierung von HTML-Seiten gehört die Auszeichnung von Überschriften, Listen und Zitaten mit den entsprechenden Tags (<h1>...<h6>, <ul>, <li>, <blockquote>). Nur so können Nutzer, die auf assistive Technologien angewiesen sind, bestimmte zusätzliche Funktionalitäten nutzen, um einfacher auf einer Seite zu navigieren. Durch die richtige Verwendung von Überschriften können z.b. Screen-Reader eine Übersicht über die Dokumentstruktur erstellen, die es ermöglicht, einen schnellen Überblick zu gewinnen. Mit der Auswahl Hervorheben > Block-Level-Elemente hervorheben kann sehr schnell überprüft werden ob die Überschriften, Listen und Zitate mit den entsprechenden Tags ausgezeichnet wurden oder ob bestimmte Elemente abweichend von der eigentlichen Bedeutung benutzt wurden, um Layout-Effekte zu erzielen (z.b. Einrückungen mit dem <blockquote>-element) Inhalte gegliedert Bei diesem Test wird geprüft, ob visuell voneinander abgesetzte Gruppen von Formularelementen mit <fieldset> oder mithilfe von Überschriften strukturiert sind, ob für tabellarische Daten <table> verwendet wird, für Absätze <p> und ob Hervorhebungen in Texten mit <strong> und <em> ausgezeichnet sind.

8 3. Korrekte Verwendung und Beschreibung von Tabellen 3. 1 Tabellenüberschriften kenntlich machen Bei dieser Forderung steht die Trennung von Inhalt und Layout und die damit verbundene Möglichkeit der Anpassung an Nutzer-Bedürfnisse wieder im Vordergrund. Zudem können Screenreader z.b. beim Springen in eine neue Tabellenzeile die jeweilige Zeilenüberschrift vorlesen und so die Orientierung erleichtern. In der Web Developer Toolbar die Funktion Hervorheben > Benutzerdefinierte Elemente hervorheben aufrufen und die entsprechenden Elemente eintragen (<caption>, <th>,...) um zu prüfen, ob die Tabellen entsprechendes Markup enthalten.

9 3. 2 In komplexen Tabellen die Zuordnung der Zellen kennzeichnen Um die Daten in einer Tabelle mit einem Screenreader richtig interpretieren zu können, müssen in komplexen Tabellen die Zusammenhänge zwischen Daten-Zellen und Überschriften-Zellen eindeutig erkennbar sein. Zudem sollte eine Zusammenfassung der Tabellendaten mit dem SUMMARY-Attribut vorhanden sein. Dazu in der Toolbar Informationen > Tabellen-Informationen einblenden aufrufen.

10 3. 3 Layouttabellen linearisierbar Layouttabellen sind nach der BITV nicht grundsätzlich verboten. Sie sollten aber linearisierbar sein. D.h. die Informationen sollten auch verständlich sein wenn sie in der Reihenfolge des Auftretens im Quelltext dargestellt werden. Denn Screenreader lesen die Inhalte einer Seite in der Regel in dieser Reihenfolge vor. Bei Tabellen bedeutet dies, dass die Inhalte von oben nach unten zeilenweise vorgelesen werden. Bei mehrspaltigem Tabellenlayout kann die Linearisierung zur Folge haben, dass Inhalte in einer Reihenfolge angezeigt werden, in der sie nicht mehr verständlich sind. Die Linearisierbarkeit kann mit der Toolbar unter Verschiedenes > Seite linear darstellen getestet werden.

11 3. 4 Kein strukturierendes Markup für Layouttabellen Wenn Tabellen zu Layoutzwecken verwendet werden dürfen diese kein strukturierendes Markup enthalten. Die Verwendung von Strukturmarkup in Layouttabellen würde z.b. blinden Nutzern falsche Informationen übermitteln. Informationen > Tabellen-Informationen einblenden aufrufen um zu prüfen, ob die Tabellen entsprechendes Markup enthalten. 4. Auch ohne neuere Technologien nutzbar 4. 1 Ohne Stylesheets nutzbar Für Nutzer älterer Browser, die CSS noch nicht richtig umsetzen oder von Geräten mit kleinen Displays, ist eine lineare Darstellung ohne vorgegebenes Layout die beste Möglichkeit eine Webseite zu benutzen. Auch ohne Stylesheets sollte die Webseite gut nutzbar sein. Seiten welche HTML nutzen, um bestimmte visuelle Darstellungsformen zu erreichen (z.b. font- Tags, Layouttabellen, text/link/background-farben als body-attribute) bereiten Nutzern Probleme, die die Darstellung der Webseite an ihre eigenen Bedürfnisse Anpassen wollen oder müssen. Um zu testen, ob das komplette Seiten-Layout über CSS kontrolliert wird und die Seite auch ohne Style-Sheets noch gut strukturiert und lesbar ist, werden alle Style-Sheets mit in der Toolbar mit CSS > Styles deaktivieren > Alle Styles abgeschaltet.

12 4. 2 Ohne Skripte nutzbar Scripte werden von Screenreadern und von Browsern für Palms oder Handys schlecht oder gar nicht verarbeitet. Zudem deaktivieren einige Nutzer Java-Script oder Java aus Sicherheitsgründen. Die Seiten sollten auch ohne diese Technologien noch in vollem Umfang nutzbar sein. D.h. alle Inhalte sollten vorhanden sein, Navigationselemente und Formulare sollten funktionieren. Die Web Developer Toolbar erlaubt das einfache Abschalten dieser Technologien über Deaktivieren > Java deaktivieren und Deaktivieren > JavaScript deaktivieren. 5. Label mit Formularelementen verknüpft Screenreader können Formularelemente und deren Beschriftung nur sicher miteinander in Verbindung bringen wenn die Beschriftungen mit dem LABEL-Element gekennzeichnet sind. Außerdem bereiten Checkboxen und Radiobuttons ohne Verknüpfung mit dem Label wegen ihrer geringen Größe Nutzern Probleme die unter koordinativen Einschränkungen leiden und die Maus nicht exakt bedienen können. Die korrekt verknüpften Labels sind anklickbar und vergrößern damit die Schaltfläche um ein vielfaches. Einen schnellen Überblick über alle Formularelemente und Label auf einer Seite kann man sich mit der Funktion Formulare > Formular Informationen anzeigen verschaffen.

13 Quellen: _checkpoints Software: Web Developer Toolbar: