Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Barrierefreiheit optimieren mit der Web Developer Toolbar

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Barrierefreiheit optimieren mit der Web Developer Toolbar

Barrierefreiheit ist für viele immer noch ein schwieriges Unterfangen. Wo nur anfangen? Genau da, wo man ohnehin mit Webstandards arbeitet. Sylvia Egger zeigt, wie man mit der Web Developer Toolbar einen Anfang macht.

Barrierefreiheit ist für viele immer noch ein schwieriges Unterfangen. Da haben wir die Gesetzgebung, das BITV oder das WCAG, die Betroffenen und dann auch noch eine Webseite, die barrierefrei werden soll. Wo nur anfangen?

Genau da, wo man ohnehin mit Webstandards arbeitet und sich auf seine täglichen Werkzeuge verlassen kann. Ich greife dafür die Web Developer Toolbar heraus, die als Standarderweiterung für den Firefox nicht mehr wegzudenken ist. Damit lassen sich auch Bereiche optimieren, die gerade für eine barrierefreie Webseite wichtig sind. Dafür muss man mitunter auch verschiedene Optionen kombinieren, muss quasi die Toolbar ausreizen. Ich greife drei Bereiche beispielhaft heraus: die Farben der Webseite, Überschriften und Datentabellen.

Farben der Webseite deaktivieren

Web Developer Toolbar - Farben der Webseite deaktivieren - Collage

Abb.1: Farben der Webseite deaktivieren mit der Web Developer Toolbar

So wunderbar Farben sind, sie dürfen nicht allein dafür verwendet werden, um etwa aktuelle Position oder aktive Zustände darzustellen. Wenn Farben, aus welchen Gründen auch immer, nicht richtig wahrgenommen werden, wird eine Navigationsstruktur schnell unverständlich. Die Farben der Webseite lassen sich über Deaktivieren > Farben der Seite deaktivieren ganz leicht entfernen. Testen Sie es selbst, sie werden kaum eine Webseite online finden, die nicht allein auf Farbcodierung basiert. Das ist bedauerlich. Dabei zeigen Beispiele wie Pfizer oder die Webseite von Jan Eric Hellbusch (Abb.1), dass Struktur auch ohne Farben erkennbar ist. Jan Eric Hellbusch hat eine eigene CSS-Border-Technik dafür erarbeitet.

Überschriften optimieren

Web Developer Toolbar - Überschriften-Hierarchie anzeigen - Collage

Abb.2: Überschriften-Hierarchie anzeigen mit der Web Developer Toolbar

Überschriften sollen auch als solche ausgezeichnet werden, das ist längst Webstandardspraxis. Für Screenreader-Nutzer gewinnen Überschriften noch mal an Brisanz. Überschriften bieten eine Art Inhaltsverzeichnis, eine erste, schnelle Orientierung auf der Webseite. Hören Sie sich doch mit der Erweiterung Fire Vox eine beliebige Webseite an, drücken Sie Ctrl + Shift + H für die Überschriftenhierarchie und navigieren Sie durch die Überschriften. Sie erhalten einen guten Eindruck, wie man sich mit Überschriften auf einer Webseite bewegen kann.

Überschriften sollen vor allem sinnvoll strukturiert sein. Bei Sprüngen in der Hierarchie wird es schwerer, die Struktur der Webseite zu erfassen. Die Web Developer Toolbar bietet mehrere Möglichkeiten, um sich Überschriften und deren Hierarchie anzeigen zu lassen. Mit Hilfe von Informationen > Dokumentengliederung anzeigen erhält man die vollständige Gliederung der Überschriften. Durch die Baumstruktur lassen sich Sprünge in der Hierarchie schnell erkennen und wo die Struktur inhaltlich noch nicht schlüssig ist.

Web Developer Toolbar - Überschriften auf der Webseite anzeigen - Collage

Abb.3: Überschriften auf der Webseite anzeigen mit der Web Developer Toolbar

Die Dokumentengliederung ist hilfreich, um sich einen generellen Überblick zu verschaffen. Mit der Option Hervorheben > Überschriften hervorheben werden die Überschriften auf der Webseite angezeigt. Die Option Hervorheben > Elementnamen beim Hervorheben einblenden sollte man ebenso aktivieren, um den Namen des HTML-Elements anzuzeigen. Mit dieser Kombination kann man Struktur und Positionen der Überschriften kontrollieren. Im Bedarfsfall erkennt man schnell, wo noch Überschriften fehlen oder wo die Verteilung noch nicht wirklich stringent ist.

Datentabellen optimieren

Web Developer Toolbar - Tabellenelemente hervorheben - Collage

Abb.4: Tabellenelemente anzeigen mit der Web Developer Toolbar

Datentabellen sind ja immer noch das Stiefkind der Webentwickler. Sicherlich wissen einige, dass man sie speziell auszeichnen muss, aber noch wenige wissen, welche Attribute notwendig sind, um sie barrierefrei zu optimieren. Es reicht nicht nur, eine Tabelle mit Überschriften (TH) zu versehen, für Sreenreader-Nutzer müssen Überschriften eindeutig mit dem Rest der Tabelle verbunden werden. Die Toolbar kann dabei helfen, diese grundlegende Semantik offen zu legen.

Mit der Option Hervorheben > Tabellenelemente hervorheben > Tabellenüberschriften, Tabellenzellen oder Tabellen lassen sich TH- und TD-Elemente sichtbar machen. Mit der Option Tabellenüberschriften ist im übrigen nicht eine TH gemeint, sondern die CAPTION. Die Option Tabellenzellen differenziert jedoch zwischen TH und TD.

Web Developer Toolbar - Tabelleninformation einblenden - Collage

Abb.5: Tabelleninformationen einblenden mit der Web Developer Toolbar

Mit der Option Informationen > Tabelleninformationen einblenden geht man einen Schritt tiefer und kann sich die Zuordnungen der Tabelle anzeigen lassen. Hier wird es dann richtig interessant. Die Werte des SCOPE-Attributs werden ausgegeben: COL als Spaltenüberschrift, ROW als Zeilenüberschrift, sogar Abkürzungen werden berücksichtigt. Und es geht auch noch komplexer: Es werden COLGROUP (Überschrift für Spaltengruppe), ROWGROUP (Überschrift für Zeilengruppe), HEADERS und AXIS (Achse) dargestellt. Üben Sie doch einfach mit den Tabellenbeispielen von Einfach für Alle. Auch wenn die Übersichtlichkeit bei komplexeren Tabellen leidet, sind die Optionen für den täglichen Umgang durchaus hinreichend und man kann fehlerhafte Zuordnungen schnell erkennen.

Fazit

Das war nur ein kleiner Ausschnitt der Möglichkeiten, seine Webseite in Richtung Barrierefreiheit einen deutlichen Schritt weiter zu bringen. Gerade in der Kombination mehrere Optionen liegt die Stärke der Web Developer Toolbar. Freilich kann das nur ein Anfang sein, für eine wirklich barrierefreie Seite sind weitere Tools, eine Menge Erfahrung und unablässiges Testen notwendig. Aber mit Hilfe der Web Developer Toolbar steht man bald nicht mehr am Anfang.

Kommentare

Stefan Walter (Webkraut)
am 16.12.2008 - 15:25

Sehr schöner Beitrag - sowas wünsche ich mir öfter: Praktische Anleitungen anstatt Diskussionen im Elfenbeintürmchen :)

Permanenter Link

Maxx Hilberer
am 16.12.2008 - 17:16

ich nutze Webdeveloper schon seit gefühlten Ewigkeiten und kannte einige der genannten Möglichkeiten nicht oder nur vom Überfliegen. Mal wieder ein Indiz für die Vielseitigkeit dieses zu Recht als Schweizer Taschenmesser der Webworker bezeichneten Werkzeugs. Gerne mehr davon - ich glaube das Thema Webdeveloper Toolbar wird garantiert nicht so schnell langweilig werden... und natürlich vielen Dank für den prima Artikel

Permanenter Link

Wolfgang
am 16.12.2008 - 17:40

Wieso ist auf den Screenshots im Artikel der Web Developer Toolbar auf deutsch? Bei mir ist alles auf Englisch und ich habe in den Einstellungen keine Auswahl-Möglichkeit gefunden, die Sprache einfach zu wechseln.

Herzlichen Dank.

Permanenter Link

Maxx Hilberer
am 16.12.2008 - 18:09

@Wolfgang: du musst zusätzlich die deutsche "localization" installieren: http://chrispederick.com/work/web-developer/localization/

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 16.12.2008 - 19:58

@Wolfgang
Maxx Hilberer hat die Frage ja schon beantwortet. Ich habe die deutsche Version verwendet, damit sie hier in den Beispielen verständlicher ist. Selbst arbeite ich jedoch mit der englischen Version. Sicherlich bin ich an die englische Version gewöhnt, aber bei einer Auflösung von 1024 habe ich mit den langen deutschen Begriffen leider auch ein Darstellungsproblem. Da sind schon mal wichtige Menüpunkte abgeschnitten. :)

@Maxx
Ja, im Grunde ist der Artikel auch ein wenig zu knapp, eigentlich könnte man daraus eine Serie machen. Mach ich vielleicht auch.

Permanenter Link

Peter
am 17.12.2008 - 01:43

Du schreibst: "Damit lassen sich auch Bereiche optimieren,..."

Ich würde eher sagen, mit der Webdeveloper-Toolbar lassen sich die Bereiche "raussuchen" die man gerne optimieren möchte => die optimiert werden sollen, da die Webdeveloper-Toolbar nur indirekt ein Live-Bearbeitungstool ist.

Ich selber kann mir ein arbeiten ohne diese nicht mehr vorstellen, da mir sehr viel Arbeit abgenomen wird durch diese.

Aber Fakt ist: Barrierefreiheit ist immer noch überwiegend Handarbeit!

Grüße

Peter

Permanenter Link
Sylvia Egger

Sylvia Egger (Autor)
am 17.12.2008 - 09:39

@Peter
Die Webdeveloper-Toolbar ist kein Live-Instrument, das stimmt, sie ist ein Kontrollinstrument. Ich habe drei Bereiche ausgesucht, aber es lassen sich noch einige mehr finden. Mir war wichtig, dass man an einem gebräuchlichem Werkzeug zeigt, was man alles schon für die Barrierefreiheit damit kontrollieren kann. Es war auch ein Versuch, das Arbeiten mit und für die Barrierefreiheit etwas zu entmystifizieren, dass jeder einen Anfang damit machen kann.

Auch halte ich es für möglich - auch das ist etwas entmystifizierend -, sehr viel für das barrierefreie Arbeiten zu automatisieren. Handarbeit in allen Ehren, aber es lassen sich auch schon Templates sehr wohl darauf vorbereiten. Überwiegend Handarbeit würde ich heute nicht mehr sagen, selbst die Untertitelung von Videos läßt sich heute automatischer angehen. Freilich bleibt Inhalt Inhalt und der muss erst generiert und gepflegt werden.

Permanenter Link

Die Kommentare sind geschlossen.