Artikel

[Serie] Mit Barrierefreiheit arbeiten (1): Überschriften

Last modified: Februar 9, 2011

Um die sprungmarker-Wiederaufnahme gut anlaufen zu lassen, beginne ich nun mit einer Vertiefung des Themas Barrierefreiheit optimieren mit der Web Developer Toolbar. Wir beschränken uns hierbei aber nicht auf die Web Developer Toolbar, sondern stellen zu Schwerpunktthemen wie Überschriften, Formulare oder Datentabellen unterschiedliche Ansätze und Plugins vor.

Im ersten Teil sehen wir uns die Darstellungs- und Kontrollmöglichkeiten für Überschriften an, denn eine konsistente Überschriftenhierarchie ist zum einen eine semantische Notwendigkeit und zum anderen für Screenreader-Nutzer ein wichtiges Werkzeug, um schnell und sinnvoll durch eine Webseite zu gelangen. Mit dem Screenreader JAWS reicht das Drücken der Taste H, um zur nächsten Überschrift zu navigieren. Wir führen hier keine H1-Diskussionen, es geht hier vorrangig um die Kontrolle von Hierarchie und Anordnung der Überschriften.

Wir sehen uns die Erweiterungen Web Developer Toolbar, Accessibility Extension, HeadingsMap und die WAVE Toolbar im Hinblick auf die Darstellung von Überschriften genauer an.

Überschriftenkontrolle mit der Accessibility Extension

Beginnen wir mit der Erweiterung, die am wenigsten komfortabel im Umgang, aber durchaus interessant im Ergebnis ist. Die Accessibility Extension vom Illinois Center for Information Technology and Web Accessibility ist keine spezialisierte Erweiterung für Überschriften, sondern damit lassen sich barrierefreie Aspekte wie Bilder, Farben, Kontraste oder WAI-ARIA testen. Wir werden auf sie noch öfter in unserer Serie zurückkommen, heute interessiert uns jedoch nur die Überschriften-Darstellung.

Screenshot - Accessibility Extension: Menü-Auswahl Überschriften

Abbildung 1:Screenshot Accessibility Extension Menü-Auswahl Überschriften

Man wählt im zweiten Punkt Navigation die Option Heading (Abb. 1) aus und erhält dann ein neues Fenster List of Headings (Abb. 2), das nach dem Auftreten der Überschriften im Dokument diese sortiert darstellt. Diese Sortierung kann man schlicht umkehren, die Frage warum, darf mich sich ruhig stellen. :)

Screenshot Accessibility Extension: Liste der Überschriften im neuen Fenster

Abbildung 2:Screenshot Accessibility Extension Liste der Überschriften im neuen Fenster

Neben der Möglichkeit, die Sortierung der Überschriften zu verändern, wird auch sofort eine Überprüfung der Überschriften durchgeführt. Ich verwende auf sprungmarker mehrere H1-Überschriften, daher wird sofort angemerkt, dass man nicht mehr als eine verwenden sollte. Die fehlerhaften Überschriften – in diesem Fall die mehrfachen H1en – werden farbig hinterlegt und mit einer Fehlermeldung unten im Feld entsprechend beschrieben.

Screenshot Accessibility Extension: Anwählen einer Überschrift

Abbildung 3:Screenshot Accessibility Extension Überschrift auf der Seite anwählen

Mit der Option Move to kann man dann die einzelne Überschrift auf der Seite anwählen. Man markiert in der Liste die Überschrift und klickt auf den Button Move to. Dabei schließt sich das Fenster und man landet wieder auf der Webseite und die ausgewählte Überschrift liegt im Fokus.

Etwas ausgefeilter und für die Entwicklung handhabbarer ist jedoch, schlicht die Überschrift in der Liste nur anzuwählen und dann wird auf der Webseite die Überschrift auffallend gelb mit Rahmen hervorgehoben. So kann man das für alle Überschriften durchgehen, um zu sehen, wo sie konkret auf der Webseite situiert sind (Abb. 3). Etwas unhandlich dabei ist, dass das Fenster mit der Überschriftenliste über der Webseite liegt und wenn die Überschrift dann unterhalb des Fensters liegt, ist die Zuordnung eher beschwerlich. Da bleibt dann nur das Verschieben des Fensters – eher suboptimal. Auch steht keine Option zur Verfügung, alle Überschriften auf einmal auf der Webseite anzuzeigen.

Screenshot Accessibility Extension: Zusammenfassung  der Überschriften

Abbildung 4:Screenshot Accessibility Extension Überschriften-Zusammenfassung

Mit Klick auf den Button View Summary erhält man eine neue Seite, die alle Überschriften in einer Tabelle mit den Testergebnissen auflistet. Strukturiert ist die Tabelle nach dem Testgrad – Fail oder Pass -, der Rangfolge im Dokument, der Basis-Url, dem Level der Überschrift, der WAI-ARIA Role, dem Text der Überschrift und zusätzlichen Informationen zum Testergebnis. Das interessanteste an der Überschriften-Kontrolle der Accessibility Extension ist genau diese Testfunktion, weil sie eben nicht nur Überschriften kontrollieren lässt nach ihrer Rangfolge oder dem Ort ihrer Einbindung auf der Webseite, sondern vor allem auch die Richtigkeit testet. Kontrolliert wird etwa, ob überhaupt Überschriften auf der Webseite vorhanden sind und ob die Verschachtelung stringent ist. Gut – über die Vorgabe nur eine H1-Überschrift auf einer Seite zu haben, lässt sich gut debattieren. Trotzdem ist der Hinweis hilfreich. Getestet wird nach unter anderem nach dem WCAG und WCAG 2.

Fazit

Was lässt sich für ein Fazit ziehen:

  • Positiv: integrierter Test mit tabellarischer Zusammenfassung
  • Negativ: nicht sonderlich handlich, zu umständlich, wenig übersichtlich

Überschriftenkontrolle mit der HeadingsMap

Die Erweiterung HeadingsMap erzeugt in der Seitenleiste eine Überschriftenhierachie in einer wirklich sehr handlichen Baumstruktur zum Auf- und Zuklappen. Wie der Name schon sagt, ist die HeadingsMap eine Spezialerweiterung nur für Überschriften.

Screenshot HeadingsMag Baumstruktur

Abbildung 5:Screenshot HeadingsMap Überschriften-Hierarchie in Baumstruktur

Die HeadingsMap wird als Sidebar eingeblendet. Recht übersichtlich kann man sich nun die Struktur der Überschriften ansehen. Man kann auch die Sidebar während des Surfens aktiv lassen, der Baum aktiviert sich sofort bei einer neuen Seite und man kann immer die Überschriften-Hierarchie gleich mit begutachten.

Die Erweiterung arbeitet auch mit einer eingebauten Kontrollfunktion. Kontrolliert wird, ob überhaupt Überschriften vorliegen und ob die Hierarchie korrekt geschachtelt ist. Die fehlerhaften Überschriften oder das Fehlen werden mit einer Farbe hervorgehoben. Fehlerhaft ist dabei jedoch nicht, ob man mehr als eine H1 verwendet.

Screenshot HeadingsMap Optionen

Abbildung 6:Screenshot HeadingsMap – Optionen

Die Erweiterung selbst hat nicht sonderlich viele Optionen zu bieten. Einstellbar ist nur, ob Fehler angezeigt werden sollen und man kann Hierarchien anwählen und ganze Level aus- und einblenden. Die Möglichkeit, auch im iFrame Überschriften anzuzeigen, ist vorhanden, wird aber eher nicht so oft benötigt werden. Hinter der Option Other options verbirgt sich im Grunde nur noch die Möglichkeit, die Farbe für die Anzeige der Überschrift auf der Webseite einzustellen.

Screenshot HeadingsMap: Überschriftenanwahl

Abbildung 7:Screenshot HeadingsMap – Auswahl der Überschrift auf der Webseite

Die Anwahl der Überschriften funktioniert ähnlich wie bei der Accessibility Extension, man markiert die Überschrift im linken Baum und auf de Webseite wird die Überschrift farblich hervorgehoben und angewählt. Auch hier ist keine Möglichkeit, alle Überschriften gleichzeitig auf der Webseite anzuzeigen. Technisch kann man zwar mehrere Überschriften im linken Baum markieren, aber das hat keine Auswirkung auf die Anzeige auf der Webseite.

Fazit

Was lässt sich für ein Fazit ziehen:

  • Positiv: integrierter Check auf fehlerhafte Verschachtelung und das Fehlen von Überschriften generell
  • Postiv: Darstellung der Hierarchie in einer Baumstruktur – sehr komfortabel und kann quasi beim Surfen genutzt werden.
  • Negativ: keine Möglichkeit, alle Überschriften gleichzeitig auf der Webseite anzuwählen.

Überschriftenkontrolle mit der WAVE Toolbar

Die WAVE Toolbar ist eine Browser-Erweiterung und gehört zum Gesamtprojekt von WebAIM, dem Web Accessibility Evaluation Tool (WAVE) Projekt, das online kostenlos und automatisch Webseiten auf Barrierefreiheit validiert. Die WAVE Toolbar ermöglicht diese Validierung im Browser und lokal. Wieder handelt es sich um eine umfassendere Erweiterung, mit ihr lassen sich abgesehen von der umfassenden Validierung auch strukturelle Ansichten wie Nur-Text, Ohne Stylesheets oder die Hierarchie der Überschriften generieren.

Screenshot WAVE Toolbar - Menü

Abbildung 8:Screenshot WAVE Toolbar – Menüauswahl Structure/Order

Die Überschriften lassen sich mit der WAVE Toolbar mit Hilfe von zwei Optionen kontrollieren: Zum einen durch die Darstellung aller Überschriften auf der Webseite und zum anderen als Baumstruktur. Mit Hilfe der Menüauswahl Structure/Order werden unter anderem die Überschriften auf der Webseite angezeigt.

Screenshot WAVE Toolbar: strukturelle Darstellung

Abbildung 9:Screenshot WAVE Toolbar – Darstellung aller Überschriften

Er werden nicht nur Überschriften markiert, auch andere Strukturelemente wie etwa Listen. Immerhin kann man in dieser Ansicht gut die Platzierung sämtlicher Überschriften auf der Webseite einsehen.

Screenshot WAVE Toolbar Optionen

Abbildung 10:Screenshot WAVE Toolbar – Menüoption Outline

Mit Hilfe der Menüauswahl Outline wird ein Baumstruktur der Überschriften erzeugt. Sie ist längst nicht so komfortabel wie bei der HeadingsMap, sie läßt sich weder zu- noch aufklappen und kommt damit sehr stark an die Outline-Ansicht der Web Developer Toolbar ran.

Screenshot WAVE Toolbar - Überschriften Outline

Abbildung 11:Screenshot WAVE Toolbar – Überschriften-Hierarchie in Baumstruktur

Fazit

Was lässt sich für ein Fazit ziehen:

  • Positiv: im generellen strukturellen Check werden auf der Webseite alle Überschriften gleichzeitig markiert
  • Negativ: Die Darstellung als Baumstruktur ist eine rein statische Ansicht, sie setzt keine Verbindung zur Position auf der Webseite. Die HeadingMap zeigt bei der Anwahl im Baum direkt die Überschrift auf der Webseite an.
  • Negativ: Wenn keine Überschrift vorhanden ist oder die Hierarchie nicht korrekt ist, wird das auch nicht als Fehler gewertet in der Validierung, sondern schlicht als Alert.
  • Das Problem mit der Erweiterung ist auch die ganz eigene Nomenklatur der Validierungs-Icons, an die man sich erst gewöhnen muss und die durch Überlagerungen nicht immer klar auf der Webseite zu erkennen sind.

Überschriftenkontrolle mit der Web Developer Toolbar

Die Web Developer Toolbar ist ja mittlerweile so gängig, dass man sie kaum mehr vorzustellen braucht. Lediglich eine stärkere Fokussierung auf die barrierefreie Optimierung, wie ich sie in meiner Serie vornehme, ist noch nicht wirklich gängig. Wir nehmen uns daher immer nur Einzelaspekte heraus, klar ist, dass sie neben Firebug das Werkzeug für die tägliche Entwicklung ist.

Screenshot Webdeveloper Toolbar - Menüoption Outline

Abbildung 12:Screenshot Web Developer Toolbar – Menü View Document Outline

Mit der Web Developer Toolbar sind ähnlich wie mit der WAVE Toolbar zwei Ansichten für die Überschriften herstellbar. Zum einen eine rein statische Baumstruktur, ebenfalls nicht auf- und zuklappbar. Über die Menüoption Information > View Document Outline öffnet sich ein neues Fenster mit der Ansicht der Überschriften in einer Baumstruktur.

Screenshot Web Developer Toolbar: Überschriftenbaum

Abbildung 12:Screenshot Web Developer Toolbar – Ansicht der Überschriften in statischer Baumstruktur

Auch in dieser statischen Ansicht gibt es keine Möglichkeit, eine Überschrift anzuwählen und ihre Position auf der Webseite zu erkennen. Davon getrennt bietet die Toolbar die Möglichkeit, die Überschriften insgesamt auf der Webseite anzuzeigen.

Screenshot Web Developer Toolbar Option Outline Heading

Abbildung 13:Screenshot Web Developer Toolbar – Menüoption Outline Headings

Um die Überschriften auf der Webseite insgesamt anzuzeigen, wählt man im Menü Outline die Option Outline Headings aus. Wichtig, damit man nicht nur mit einem Rahmen ausgewählte Elemente auf der Webseite erkennt, immer auch die Option Show Element Names When Outlining anwählen.

Screenshot Web Developer Toolbar: Überschriften-Hervorhebung

Abbildung 14:Screenshot Web Developer Toolbar – Hervorhebung der Überschriften auf der Webseite

In dieser Ansicht kann man recht gut Abfolge und Anordnung der Überschriften einsehen.

Fazit

Was lässt sich für ein Fazit ziehen:

  • Positiv: es gibt eine Gesamtansicht aller Überschriften auf der Webseite.
  • Negativ: Die statische Baumansicht der Überschriften ist hinreichend, aber lässt keine direkte Querverbindung zur Postion auf der Webseite zu.
  • Negativ: es gibt keine Validierung der Überschriften.

Welche Erweiterung werde ich nun nutzen?

Schwierig zu sagen. :) Optimal ist sicherlich die HeadingsMap, weil sie komfortabel und übersichtlich Hierarchie, Position und Validierung von Überschriften darstellt und übernimmt. Andererseits bedeutet das wieder eine zusätzliche Erweiterung. Wenn ich möglichst wenige Erweiterungen nutzen möchte, würde ich bei der Web Developer Toolbar bleiben und etwa das Fehlen der Validierung in Kauf nehmen.

4 Gedanken zu “[Serie] Mit Barrierefreiheit arbeiten (1): Überschriften

  1. Interessanter Artikel, Sylvia.

    Habe gerade das HeadingsMap installiert und im Test. Das Teil meckert mich grad an, weil ich von ner H3 direkt auf ne H5 gesprungen bin:-) Wie konnte ich nur…

  2. @Andreas

    :) Ja, da sind die Werkzeuge gnadenlos. Grundsätzlich ist es wichtig, die Überschriftenhierarchie einzuhalten, weil es sonst schwierig ist, die Gesamtstruktur immer zu verstehen.

  3. Pingback: Bithalter Webzeuglinks 018′09 | Webzeugkoffer Webdesign

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert mit dem Hinweis "(Pflicht)".

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>