31. Oktober 2007, von Jan Eric Hellbusch

Strukturelle Navigation: Beispiel der Gebrauchstauglichkeit

Nach dem ersten Eintrag auf dieser Accessibility Blog Parade am 10. Oktober 2007 zum Sinn der Barrierefreiheit gab es einige weitere Einträge in der Blogosphäre zum Thema. Einige teilweise namhafte BloggerInnen äußerten sich und referenzierten sogar diesen Beitrag. Allerdings fand ich, dass die wichtigste Aussage des Beitrags zum Begriff “Barrierefreiheit” geflissentlich übergangen wurde:

“Es handelt sich um eine Gebrauchstauglichkeit vor dem Hintergrund einer Behinderung.”

Es wurden Themen wie Moral, Barrierearmut und Ausgrenzung nicht behinderter Menschen thematisiert, was sicher nicht verwerflich ist, und doch eine gewisse Abgrenzung zumindest zu meinem Anliegen darstellt. Deshalb möchte ich ein kleines Beispiel bringen, um die Aussage zur Gebrauchstauglichkeit zu verdeutlichen.

Navigation auf standardkonformen Webseiten

Die meisten NutzerInnen werden eine Maus zum Navigieren durch das Web nutzen, aber manche sind auf die Bedienung mit der Tastatur angewiesen. Wie navigieren TastaturnutzerInnen im Web? Die erste richtige Antwort lautet: Mit der Tabulatorentaste. Wer das mal versucht, wird schnell feststellen, dass die Bedienung einer beliebigen Webseite mitunter beschwerlich sein kann oder unmöglich ist. Aber das ist hier nicht das Thema.

Gehen wir von einer standardkonformen Seite aus. Das HTML besteht aus Absätzen, Überschriften, Listen und einigen DIV-Elementen für das Layout. Auf die weiteren Elemente wie Links, Grafiken usw. brauchen wir hier nicht einzugehen, aber das Folgende ließe sich mit weiteren Erläuterungen auch auf solche Elemente beziehen.

Strukturelle Navigation

Eine Überschrift hat eine strukturierende Wirkung. Wir setzen solche Überschriften ein, um einen Artikel zu gliedern. Die Hauptüberschrift bekommt eine H1 und im Idealfall werden die nachfolgenden Überschriften hierarchisch untergeordnet, d. h. die Zwischenüberschriften erhalten H2 und weitere Untergliederungen H3 und H4.

Ein Screenreader-Nutzer kann nun durch Drücken einer einzelnen Taste direkt zur ersten Überschrift springen. In JAWS wäre das z. B. die Taste 1 um die erste H1 anzussteuern oder mit der generischen Taste H kann er einfach die nächste Überschrift anspringen. Ähnliche Mechanismen gibt es im Browser Opera (mit den Tasten S und D) und für Firefox gibt es entsprechende Plug-Ins, die aber meines Wissens noch nicht so ausgereift sind. Die zweite Antwort lautet also: “Man kann mit speziellen von der Zugangssoftware bereitgestellten Tasten navigieren.”

Im übrigen ist die strukturelle Navigation nicht auf Überschriften und Überschriftenebenen beschränkt: Neben Listenelementen, Tabellenelementen, Bildern oder besuchten und nicht besuchten Links, können gar einzelne DIV-Elemente angesteuert werden.

Erreichbarkeit von Seiten- und Navigationsbereichen

Besonders vorteilhaft ist das direkte Ansteuern von Überschriften, wenn vor dem Inhalt Kopfzeile und ein oder mehrere Navigationsbereiche sofort übersprungen werden können. Durch den klugen Einsatz von Überschriften können also TastaturnutzerInnen gezielt bestimmte Bereiche einer Seite erreichen.

WebdesignerInnen standardkonformer Webseiten sind schon längst dazu übergegangen, auch für Navigationsbereiche Überschriftenelemente einzusetzen, also z. B.

<h2>Navigation</h2>
[gefolgt von einer Linkliste]

Das ist gut und hilfreich.

Bestimmung der zusätzlichen Überschriften

Jetzt kann ein Tastaturnutzer mit entsprechender Zugangssoftware auch über die Überschriftenstruktur der Seite direkt zur Navigation springen ohne alle davorliegenden Links anzutabben. Aber es entsteht auch ein Problem oder genauer gesagt: Es entstehen mindestens zwei Probleme.

Problem 1: Wann fördern Überschriften die strukturelle Navigation?

Nachdem geklärt ist, für wen die Überschriften einen Nutzen stiften (ich lasse die effizienzsteigernden Aspekte für den Code-Monkey mal weg), lautet die erste zu beantwortende Frage: “Welche Navigations- und sonstigen Seitenbereiche brauchen denn überhaupt eine Überschrift?”

Zunächst sind es Linklisten wie eine Navigations- oder Fußleiste. Das eben aufgeführte Beispiel mit der Navigation erlaubt es, diese direkt über die Überschriftenstruktur zu finden. Diese Anforderung ergibt sich übrigens auch aus der Bedingung 13.6, der in Deutschland geltenden BITV. Das Tolle ist, wenn die Seite komplett mit Überschriften durchstrukturiert ist, dass die Navigation auf der gleichen Weise übersprungen werden kann:

<h2>Navigation</h2>
[gefolgt von einer Linkliste]
<h1>Inhaltliche Überschrift</h1>

Aber es sind auch Seitenbereiche mit Überschriften zu versehen, wenn es sich nicht um eine Linkliste handelt, etwa wenn unterschiedliche Inhalte auf zwei Spalten verteilt werden. Visuell ist die Trennung der Inhalte durch das Layout offensichtlich, aber in linearen Medien, wozu neben einem Screenreader auch mobile Geräte noch gelten, ist das Layout so nicht erkennbar. Mit Überschriften kann nicht nur eine Übersicht in solchen Medien geschaffen, sondern ebenfalls das Überspringen einer Spalte zur nächsten erlaubt werden. Diese Anforderung ergibt sich ebenfalls aus der BITV, nämlich Bedingung 13.8.

Problem 2: Wie sehen die Überschriftenebenen außerhalb des Inhalts aus?

Die zweite Frage, die sich aus dem Einsatz von Überschriften zur Navigation mit der Tastatur ableiten läßt, ist: “Welche Überschriftenebene(n) sollen denn für die strukturelle Navigation eingesetzt werden?” Es gibt hierfür leider keine eindeutige Antwort, aber doch einige Überlegungen:

• Manche Anwendungen wie Screenreader lassen das direkte Ansteuern einer Überschriftenebene zu. Wenn die H1 für die inhaltliche Überschrift eingesetzt wird und wir davon ausgehen, dass ein Nutzer in vielen Fällen auch direkt zum Inhalt will, dann sollte vor der inhaltlichen H1 keine weitere H1 vorkommen.
• Die meisten Inhalte sind gegliedert und die Navigations- und sonstigen Seitenbereiche sind linearisiert sowohl vor als auch nach dem Inhalt verteilt. Eine Hierarchie, die in einem Outline durchweg logisch erscheint (eine H1 mit untergeordneten Überschriften für Inhalte sowie Seiten- und Navigationsbereiche) wird mit der ersten Überlegung kaum möglich sein. Aber das Web ist kein Buch: Im Gegensatz zum Buch ist auf einer Webseite mehr als der Inhalt auf einer einzelnen Seite zu finden. Also sollten bitte schön auch nicht die gleichen Anforderungen an eine Webseite gestellt werden! Die Navigation, die Zusatzinformationen, die Werbung … sie stellen alle andere inhaltliche Ebenen dar als der Artikel, die Anwendung, die Nachricht.
• Für das gezielte Ansteuern von einzelnen Navigations- und Seitenbereichen ist es wichtig, dass die Überschriften auf einer gleichen Ebene gelegt sind, denn nur dann können sie gezielt angesteuert werden mit einem minimalen Lernaufwand. Wenn die H1 ausgeklammert ist (s. erste Überlegung) dann bleiben H2 bis H6. Das gilt dann, wenn die Überschriften sichtbar sind oder - wenn sie speziell für blinde NutzerInnen berücksichtigt wurden - auch unsichtbar sind.

Persönlich ziehe ich die H6 für die strukturelle Navigation vor. Das hat auch bestimmte Gründe:

• Die H6 wird im Inhaltsbereich eigentlich nie benutzt. Es gibt deshalb keine Verwechselungsgefahr. Die H6 ist klar außerhalb der inhaltlichen Hierarchie.
• H6 erinnert an F6. Na und? Naja, zumindest ist in vielen Windows-Anwendungen die F6-Taste dafür bestimmt, zwischen einzelnen Ansichten zu wechseln, was in Microsoft Word oder im Browser gilt. Die Eselsbrücke hilft verstehen.

Wichtig ist allerdings, dass die Navigations- und Seitenbereiche mit einer einheitlichen Überschriftenebene versehen werden. Das könnte dann wie folgt aussehen:

<h6>Seitenübergreifende Links</h6>
[gefolgt von einer Linkliste zu Hilfe, Kontakt ... und/oder einer Suchbox]
<h6>Navigation</h6>
[gefolgt von einer Linkliste mit den inhaltlichen Themen des Webauftritts]
<h6>Inhalt</h6>
<h1>Inhaltliche Überschrift</h1>
[gefolgt von dem gegliederten Inhalt]
<h6>Fußleiste</h6>
[gefolgt von einer Linkliste]

Resümee

Der Einsatz bestimmter HTML-Elemente für den Aufbau einer Seite ist nicht alleine Sache des Webentwicklers. Natürlich kann eine Systematik helfen, das “Gewicht” der CSS-Datei zu minimieren, aber es muss auch an den Nutzer gedacht werden. Diese Art der Gebrauchstauglichkeit ist vielleicht anders als für den mausnutzenden Bildschirmnutzer, aber sie ist eben die Gebrauchstauglichkeit vor dem Hintergrund einer speziellen Behinderung.

In den Richtlinien steht übrigens nicht, dass die strukturelle Navigation mit Überschriften realisiert werden soll, sondern es wird lediglich die Bezeichnung von Informationsblöcken und - bei Linklisten - die Überspringbarkeit gefordert. Und das ist der Hintergrund der eingangs getroffenen Aussage: Die technischen Richtlinien zur Barrierefreiheit stellen mitunter unklare Regeln auf, die aber erst durch Nutzertests ein brauchbares Ergebnis für die Gruppe der (hier von der Tastatur abhängigen) NutzerInnen liefern können.

31. Oktober 2007 · Jan Eric Hellbusch · Thema: Barrierefreiheit, Blog Parade, Internet · Tags: accessibility, accessibilityblogparade, Behinderung, tabben, web
· Sie können einen Kommentar schreiben, oder einen Trackback auf Ihrer Seite einrichten.