Hej marctrix,
Dennoch gibt es weitere nachvollziehbare und sinnvolle Möglichkeiten einer Überschriftenstruktur, die nach wcag erlaubt und für alle Menschen zugänglich sind.
Name des Angebotes als h1, Bereiche werden mit h2 überschrieben
Beispiele
- Hauptinhalt
- Navigation
- Seitenleiste
- Footer
Vorteile
- Ein Baum mit einer "Wurzel" analog zu HTML
- Es macht Sinn: Screenreader-Nutzern wird zunächst der Name der Seite vorgelesen, der meist weitgehend identisch sein sollte mit der Überschrift des Hauptinhaltes. Hier macht es Sinn, nachdem man erfahren hat, um was es auf der Seite geht, als nächstes zu erfahren von wem die Seite ist (Screenreader-Nutzer können per Taste eine h1 direkt anspringen)
- Es ist zugänglich
- Das System kann intuitiv bedient werden, denn es ist aufgrund seiner weiten Verbreitung bekannt
- Es wird vom W3C empfohlen (die meisten Beispiele machen das übrigens so, ein weiteres)
- Es besteht den BITV-Test
- Es ist auch für Nutzer ohne Screenreader nachvollziehbar
Nachteile
- Screenreader-Nutzern wird nach dem
title
-Element direkt noch mal derselbe Text vorgelesen - Es wird mehrfach vorgetragen (z.B. von Heydon Pickering in "Inclusive Design Patterns" oder in der von @Gunnar Bittersmann verlinkten Diskussion), dass Screenreader-Nutzer durch einfachen Druck auf die Taste "1" direkt zum Hauptinhalt springen können. Das ist zwar richtig, es gibt aber auch die Möglichkeit, h2 zur Navigation zu benutzen. Da sich vor dem Hauptinhalt in der Regel keine überschriebenen Inhalte außer der Navigation befinden, sind das lediglich zwei zusätzliche Tastendrücke, die zudem auch noch den Aufbau der Seite klar machen. Meiner Meinung nach kein Nachteil. Außerdem stehen auf Webseiten, bei denen so viel Gedanken zur Zugänglichkeit gemacht wurden, in der Regel zwei weitere Möglichkeiten zur Verfügung, den Hauptinhalt direkt anzuspringen: die Skip-Navigation und das
main
-Element. Mag jeder selbst entscheiden ob das nötig ist: Drei Navigationsmöglichkeiten mit denselben Ziel, zwei davon exklusiv für Screenreader-Nutzer, eine weitere (Skip-Navi) exklusiv für Tastatur-Nutzer (was Screenreader einschließt) ist nett für Screenreader-Nutzer und es entstehen keine Nachteile für andere Nutzergruppen (dem einen oder anderen mag es bei eigenem CSS oder fehlendem CSS komisch vorkommen, dass ein Dokument nicht mit einer Überschrift/ nicht mit der größten Überschrift beginnt) Außerdem müsste man mit demselben Argument auch Navigation, Seitenleiste und Foooter per h1 zugänglich machen. Siehe auch drittes Beispiel.
Eine einzige h1 als Überschrift des Hauptinhaltes
Vorteile
- ein Druck auf die Taste für einen Sprung zur h1 bringt einen Screenreader-Nutzer immer direkt zum Hauptinhalt (so wie das Folgen des entsprechenden Skip-Links und das direkte Anspringen des
main
-Elementes) - Es ist zugänglich
- Es wird vom W3C empfohlen
Nachteile
- Ein korrekter "Baum" entsteht (insbesondere für Screenreader-Nutzer) nur für den Hauptinhalt, nicht für das gesamte HTML-Dokument
- Vielen Screenreadern-Nutzern mag diese Möglichkeit, den Hauptinhalt direkt anspringen zu können, angenehm sein, andere nutzen statt dessen die Möglichkeit der Skip-Links oder den Hauptbereich direkt anspringen zu können. Dass man direkt im Hauptinhalt landet und der Rest der Dokument-Struktur ausgeblendet wird, ist überraschend und verwirrend, kann aber erlernt werden, erfordert allerdings Übung und Nachdenken, was man eigentlich vermeiden möchte.
Mehrere Überschriften erster Ordnung
Kann theoretisch die Vorteile beider Lösungen verbinden. Dass es nur eine h1 in einem HTML-Dokument geben sollte, ist ein seit Anbeginn strittiges, nicht entschiedenes Thema. Die Zugänglichkeit wird jedenfalls nicht negativ beeinflusst, wenn die Struktur nachvollziehbar bleibt.
Was nicht geht ist jedenfalls, sich auf die in keinem Browser/UA implementierten HTML5-Outline-Algorythmus zu verlassen. Die Spee
Mir persönlich sagt diese Lösung dennoch am wenigsten zu, ich kann es aber schlecht begründen, es ist vermutlich nur Gewohnheit, also irrational. Über echte Gründe für oder gegen die Verwendung mehrere h1 würde ich mich freuen!
Vorteile
- Mit mehrfachem Betätigen der Taste zur Navigation in der h1-Ebene können Screenreader alle Bereiche der Website komfortabel erreichen
- Leicht verständlich
Nachteile
- unüblich
Marc