Web Developer Extension für Mozilla-basierte Browser

[ Dies ist eine Übersetzung des englischsprachigen Artikels „The Web Developer Extension for Mozilla-based Browsers„. Copyright © by www.Webaim.org ]

Einführung in die Web Developer Erweiterung

Die Web Developer Erweiterung, die von Chris Pederick entwickelt wurde, ist ein sehr beliebtes und nützliches Werkzeug für Web-Designer. In diesem Abschnitt wird es vor allem darum gehen welche Tools diese Erweiterung beinhaltet, die Entwicklern dabei helfen können barrierefreiere Inhalte zu erstellen

Notiz

Diese Erweiterung wurde speziell für Chrome, Firefox und Opera Browser entwickelt und sie wird auf jeder Plattform laufen, die diese Browser unterstützen. Nach der Installation wird ein konfigurierbares Menü und eine Toolbar mit zahlreichen Tools für Entwickler im Browser integriert.

Einsatz der Erweiterung

Folgen Sie den angegebenen Instruktionen, um die Erweiterung First, follow the instructions provided to herunterzuladen und zu installieren.

Im nächsten Schritt vergewissern Sie sich bei der Nutzung Ihres Browsers, dass Sie wissen wie Sie die Enticklertools Menüpunkte finden (Anzeigen > Entwickler) oder wie Sie die Toolbar anzeigen lassen (Anzeigen > Entwickler > Web Developer Toolbar).

Nun erforschen wir einige der vorhandenen Tools in der Toolbar, die speziell für jene nützlich sein werden, die interessiert sind barrierefreie Inhalte zu erstellen. Die Menüpunkte CSS und Tabellen werden nicht besprochen, weil das eher Tools sind, die generell auf die Web-Entwicklung und nicht speziell auf die Barrierefreiheit ausgerichtet sind.

Disable

Disable menu optionsMit Hilfe dieser Funktion ist es möglich einzelne Dinge auf der Webseite zu deaktivieren. Für die Barrierefreiheit sind dabei vor allem die Punkte „Images, Styles, Page Colors und JavaScript“ zu beachten.

Das Deaktivieren der Bilder ermöglicht es dem Entwickler den Alternativen Text des jeweiligen Bildes an seiner Stelle zu sehen. Das Deaktivieren der Styles ermöglicht es den Entwicklern zu sehen wie Bildschirmlesegeräte den Inhalt einer Webseite laut lesen. Entwickler sollten dabei die Aufmerksamkeit auf solche Dinge wie den Lesefluss richten und ob einige Farben fehlen oder ob sich die Platzierung auf den Sinn des Inhalts auswirkt. Das Deaktivieren der Farben erzeugt eine kontrastreiche Version der Webseite, was den Einstellungen von Menschen mit Sehbehinderungen entspricht wobei einige dieser Personen eine farbumgekehrte Version mit dunklem Hintergrund und hellem Text bevorzugen.

Das Deaktivieren von JavaScript erlaubt es den Entwicklern festzustellen ob die Webseite auch ohne JavaScript mindestens so funktioniert wie mit unterstützenden Technologien. In der Version 2.0 von den Webinhalt-Barrierefreiheit-Richtlinien ist JavaScript erlaubt solange es die Parameter der Barrierefreiheit zulässt. (siehe JavaScript). Die Section 508 Richtlinien haben den gleichen Standpunkt. Die Version 1.0 von den Webinhalt-Barrierefreiheit-Richtlinien besagt, dass Inhalte barrierefrei zugänglich sein sollten auch wenn JavaScript ausgeschaltet ist.

Images

Images menu options Während Bilder durch das „Disable“-Menü deaktiviert werden können, bietet das „Image“-Menü die Möglichkeit Bilder noch tiefer zu untersuchen. Dieses Menü hat Optionen, die gewählt werden können, um:

  • zu zeigen welche Bilder einen leeren oder gar keinen alt Text beinhalten.
  • zu zeigen, welche Bilder überhaupt keinen alt Text besitzen.
  • Bilder mit ihrem zugehörigen alt Text zu ersetzen.

Alle Bilder einer Webseite sollten entweder einen sinnvollen alt Text oder einen leeren alt Text besitzen. Bilder, die wichtige Informationen vermitteln, sollten einen sinnvollen alt Text haben. Bilder, die nur einen dekorativen Charakter haben sollten gar keinen alt Text oder einen leeren alt Text beinhalten. Die Option, mit deren Hilfe man sehen kann welche Bilder keinen alt Text beinhalten kann dabei helfen einen der am meisten gemachten Barrierefreiheits-Fehler, dem Weblassen von alt Text, zu verhindern.

Information

Information menu optionsDas Informations-Menü bietet sehr gute Möglichkeiten um Dinge wie die tabindex und accesskey Attribute herauszufiltern, detaillierte Informationen (alle Links, alle Bilder) und id bzw. class Details, etc anzuzeigen. Diese Informationen sind wichtig für Entwickler, die barrierefreien Inhalt erstellen, weil sie potentiell sehen können wie jemand, der ein Bildschirmlesegerät benutzt den Inhalt erlebt. tabindex und accesskey Attribute, die richtig erstellt wurden, stellen eine Navigation über die Tastatur für Leute bereit, die unterstützende Technologien wie zum Beispiel ein Bildschirmlesegerät benutzen. Die Liste der Links bei den detaillierten Seiteninformationen kann Entwicklern dabei helfen festzustellen ob sie angemessen beschreibende Namen für Links benutzen und ob sie nicht mehrmals den gleichen Text für verschiedene Links benutzt haben, wie zum Beispiel „Klick hier“. Das Anzeigen der id und class Details ist bei der Fehlerbehebung von Style Sheets hilfreich.

Miscellaneous

Miscellaneous menu options Das Miscellaneous Menü beinhaltet die Option der Linealisierung der Seite. Dies ist hilfreich um zu sehen wie einige unterstützende Technologien Ihre Webseite interpretieren. Dieses Menü bietet ebenfalls die Option den Inhalt zu vergrößern oder zu verkleinern, was dabei hilfreich ist, um zu sehen wie Bildschirmlupen (die von sehbehinderten Menschen benutzt werden) den Inhalt der Webseite zeigen.

Das Miscellaneous Menü beinhaltet ebenfalls die Option wichtige Standard-Dokumente, die vom W3C erstellt wurden, zu sehen. Diese Dokumente beinhalten CSS, das WCAG 1.0 (aufgelistet als WAI 1) und HTML. Es ist wichtig, dass alle Entwickler mit diesem Inhalt vertraut sind und in der Lage sind Web-Inhalte nach den W3C Standards zu designen und zu entwickeln.

Outline

Outline menu optionsDie Optionen unter dem Outline Menü können dazu verwendet werden um alle veralteten Elemente innerhalb des Codes einer Webseite anzuzeigen. Barrierefreier Inhalt muss nach den neuesten Standards von HTML geschrieben sein, was bedeutet, dass veraltete Elemente durch aktuell gültige Codes ersetzt werden müssen.

Ein anderer Menüpunkt unter Outlines zeigt Links ohne Titel. Das hilft den Entwicklern zu wissen, dass die Nutzung von Titeln für Links logisch und angemessen sein muss.

Resize

Resize menu optionsDas Resize Menü kann dazu genutzt werden, um das Browser-Fenster auf 800X600 oder auf jeden andere beliebige Größe einzustellen. Das ist nützlich um zu sehen ob ein Design auch bei Leuten, die eine Bildschirmlupe benutzen um den Inhalt zu vergrößern oder bei Leuten, die im Web mit Hilfe eines alten Monitors unterwegs sind oder auch bei Leuten mit einem neuen Mobilgerät im Internet sind, richtig angezeigt wird. Diese Maßnahme hilft auch bei der Erfüllung des 4. Prinzips der WCAG 2.0, welches besagt, dass „Inhalt stabil genug sein muss, um mit aktuellen und zukünftigen Technologien zu funktionieren.“

Tools

Tools menu optionsDas Tools Menü bietet die Möglichkeit so ziemlich alles auf einer Webseite zu validieren: HTML, CSS, Link und Barrierefreiheit (gelistet als Section 508 und WAI). Dies ist ein notweniger Schritt bei der Erstellung von barrierefreiem Inhalt.

Zusätzliche Validierungs-Tools können zu dem Tools-Menü hinzugefügt werden, indem man das
Web Developer Extension’s Options Menü verwendet (Options > Options, wähle Tools dann Add).

Das Tools Menü bietet außerdem die Option einen Speed Report für eine Webseite anzusehen. Dies hilft dabei die Stabilität des Inhalts (eins der Prinzipe von WCAG 2.0) für unterschiedliche Verbindungsgeschwindigkeiten zu bewerten. Die Downloadgeschwindigkeit ist ebenfalls eine der Richtlinien für Australien.
Commonwealth Guide to Minimum Web Site Standards: Electronic Publishing – Interface Design

Options

Options menu optionsUnter dem Options-Menü können zusätzliche Bewertungs-Tools zu dem Tools-Menü hinzugefügt werden. Dies ist vor allem dann nützlich, wenn Sie andere Tools öfter benutzen als die, die aufgelistet sind. Um WAVE zu Ihrer Liste mit Tools hinzuzufügen geben Sie folgende Zeile als die URL an: http://wave.webaim.org/report?url=

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.