inclusive Design: Die beste Überschriftenstruktur

Barrierefreie Überschriften sind ein Thema, über das man praktisch nie einen Konsens findet. Grundlegende Dinge sind aber klar. Gedanken zu einem Dauerstreitthema

Die Überschriftenstruktur muss den inhaltlichen Aufbau einer Seite semantisch nachvollziehbar wiedergeben.

Ich persönlich wüsste nicht, wie man anders eine Forderung aussprechen könnte, die frei von persönlichen Befindlichkeiten ist und nicht über die WCAG oder EN hinaus geht.

Das kann mit mehreren oder mit nur einer h1 passieren.

Logo oder Seitenbetreiber als h1?

Ein Logo – und auch der Name der Seite oder des Seitenbetreibers – ist keine Überschrift. Wenn man hier eine h1 verwendet, führt das dennoch nicht direkt zu einer unzugänglichen Seite. Als Prüfer würde ich es als „eher erfüllt“ bewerten, was einem „bestanden“ entspricht.

Die Absicht dahinter ist ja klar: ich bin der Anbieter der Seite und alles weitere stammt von mir. Deshalb bin ich auch der Beginn einer Baumstruktur, die die Seite beschreibt.

Das Argument würde ich mir nicht aneignen, kann es aber nachvollziehen. Das Vorgehen selber bin ich gewohnt, weil sehr viele (früher praktisch alle) Seiten das so machen. Daher ist dieses Vorgehen auch verständlich.

Für Navigationsbereiche beschriftete nav-Elemente?

Statt mit einer HTML-Überschrift (h1 bis h6) kann man dem Element nav Attribute wie aria-label oder aria-described mitgeben, die den Zweck einer Navigation vermitteln (z.B. Hauptnavigation).

Selbst Blinde kommen damit nur unter weiteren Bedingungen gut zurecht. So müssen alle Navigationen korrekt mit nav ausgezeichnet sein, alle per aria vergebenen Namen müssen jedem Nutzer verständlich sein (was ist eine Meta-Navigation oder Service Navigation?!?). Außerdem solltenav nur in einer sinnvollen Anzahl verwendet werden (auf manchen Seiten findet man echt viele davon und nicht ausschließlich für Navigationsbereiche im Sinne der HTML Spec).

Für mich sind das ziemliche viele Vorbedingungen, was eine optimale Umsetzung schwierig und fehleranfällig macht (und in der Praxis findet man bei diesem Ansatz „gefühlt“ auch viele Fehler).

Vorteile von Überschriften für Navigationen

Der Ansatz auch die Navigationen per Überschriften zu gliedern hat für mich mehrere Vorteile:

  1. Er ist konsistent
    Man benutzt denselben Mechanismus wie beim Rest der Seite
  2. Er kann innerhalb der Navigation weiter beibehalten werden
    Im Fußbereich hat man häufig eine Spiegelung der Hauptnavigation mit zwei Ebenen. Die erste Ebene thront fett und groß über den offen sichtbaren Punkten der zweiten Ebene und dient offensichtlich dazu die zweite Ebene zu überschreiben.
    Es macht daher Sinn die erste Ebene auch mittels hx auszuzeichnen, aber welche Ebene soll man wählen nach einem nav aria-label=“xyz“?
    Ähnliche Unterteilungen kann man sich auch für eine sichtbare Unternavigation vorstellen. Der Wechsel zwischen Überschriften einerseits und andererseits nav-landmarks, die mit ARIA-Attributen beschriftet werden, führt zu einer inkonsequenten Auszeichnung und damit sowohl zu einer inkonsistenten Gliederung als auch zu unterschiedlicher Bedienung. Überschriften werden anders angesteuert als Landmarks. Landmarks werden unbemerkt übersprungen, wenn Blinde eine Seite scannen, indem sie von Überschrift zu Überschrift navigieren.
  3. Überschriften stehen einem größeren Nutzerkreis zur Verfügung als aria-Attribute
    Mir ist keine Technik bekannt (Browser-PlugIns o.ä.), die Beschriftungen mittels aria-Atttributen sinnvoll für sehende Nutzerinnen in einer Seite einblendet. Ein Anwender ohne Vorleseprogramm wird die in aria-Attributen mitgelieferten Informationen (die mitunter nicht nur für blinde Menschen hilfreich sind) niemals erreichen. Auch nicht, wenn mal etwas technisch schief läuft, wie zum Beispiel ein Stylesheet nicht geladen wird oder Nutzer ein eigenes Stylesheet oder einen Textbrowser verwenden.

Wenn die Formatvorlage aus solchen Gründen nicht genutzt wird, sind die per CSS ausgeblendeten Überschriften sichtbar. Wer mal eine Seite ohne CSS betrachtet hat, weiß wie hilfreich das dann ist. Schließlich wird die Information „ich bin eine Navigation“ durch rein visuelle Eigenschaften vermittelt (vor allem typische Platzierung und Gestaltung).

Fehlt die Darstellung helfen die Überschriften beim Verständnis.

Nicht überbewerten

Um klar zu sagen, worüber wir hier reden: in den allermeisten Fällen benötigen nur Blinde das, was man als versteckte Überschrift (ARIA-Hinweise) umsetzen würde – wir reden hier also über sehr wenige Menschen, für die echte HTML-Überschriften in der Praxis einen Mehrwert bieten.

Persönlich ziehe ich es vor, wenn Informationen nicht so versteckt werden, dass diese ausschließlich mit wenig verbreiteter Technik erreichbar ist. Außerdem ist mir progressive enhancement wichtig bei der Entwicklung. Ich möchte, dass Webseiten ohne CSS verständlich sind und per CSS dann weiter verbessert werden.

Auch spricht ARIA-Regel Nummer eins gegen die Verwendung von Überschriften, nach der ARIA nur verwendet werden soll, wenn natives HTML nicht die Möglichkeit bietet, bestimmte Informationen zu transportieren.

Insofern sind Überschriften guter Stil, der in der Praxis nur selten einen Unterschied macht.

Meine persönliche Präferenz

h1 für Cookiebanner, Hauptinhalt (hier ggfs. mehrere). Seitenbereiche meist als h2 und davon ausgehend weitere Ebenen.

Überschriften auch über und innerhalb von Navigationen.

Im folgenden ein paar Gedanken als Erläuterung für diese Aufteilung.

Überschriften nach „Wichtigkeit“ vergeben

Je wichtiger eine Überschrift ist, desto höher die Ebene, daher eine h1 über dem wichtigsten Bereich der Seite (Hauptinhalt), ist eine häufig benutzte Logik. Das mag bei der h1 noch funktionieren, aber wie will man „Wichtigkeit“ auf die weiteren Ebenen konsequent und vor allem objektiv nachvollziehbar anwenden? Das scheint mir eine sehr subjektive Herangehensweise zu sein, der viele Nutzerinnen oft nicht folgen können

Seitenbereiche (in der Regel) mit h2 auszeichnen

Eine Seitenleiste (aside) ist schon im HTML-Standard ein Bereich der dem Hauptinhalt mitgegeben ist und gehört daher thematisch zumindest entfernt zum Inhalt – daher passt eine h2 meistens für eine Seitenleiste, die für den Artikel nicht nötige Informationen enthält.

Ob der anschließende Fußbereich nun mit einer h1 oder h2 überschrieben wird, ist meiner Meinung nach schon fast nebensächlich, würde es persönlich aber nicht dem Hauptdokument zuordnen wollen und daher eher ein h1 verwenden.

In einem Textdokument würde ich den Anhang ja auch mit einer h1 vom Hauptinhalt trennen.

Blinde kommen mit einem einzigen Tastendruck an den Hauptinhalt

Viele Blinde mögen es gerne, wenn eine einzige Überschrift h1 verwendet wird, die über den wichtigsten Text der Seite steht, weil man so direkt zum Hauptinhalt kommt, wenn man zur ersten h1 navigiert. Man kann auch die Landmark main direkt anspringen und zwei oder drei Drücke auf die Taste für h1 ist auch noch sehr schnell machbar.

Weiterhin befindet sich der Sprunglink zum Hauptinhalt hoffentlich ganz am Anfang der Seite. Insofern gibt es auch bei mehreren h1 vor dem Hauptinhalt mehrere sehr bequeme Möglichkeiten für Blinde sehr schnell zum Hauptinhalt zu kommen. Insgesamt ist das sowieso eher ein Usability-Problem (wie komme ich am bequemsten an eine Stelle) und kein Zugänglichkeitsproblem (wie komme ich nachvollziehbar und konsistent an eine Funktion/ Information)

Auch hier gilt wieder: wir wollen Seiten, die für alle Menschen verständlich und nutzbar sind, nicht nur für Menschen mit Hilfsmitteln.

Die h1 sagt einem schnell das Thema der Seite

Mitunter wird auch angeführt, dass man so sehr schnell weiß, um was es auf einer Seite geht. Sehende und Blinde erfahren das aber ohnehin direkt am Seitenanfang über den Seitentitel. Blinden wird der gleich beim Aufruf der Seite ausgegeben und Sehenden steht der zwar auch theoretisch im Browsertab zur Verfügung. Aber besser sichtbar thront derselbe Text meist als auffälligste Überschrift (egal ob als h1 oder h2 ausgezeichnet) über dem Hauptinhalt der Seite.

Quasi Standard?

Da so wenige Seiten wirklich barrierefrei sind, kann man sich als Anwenderin nicht darauf verlassen eine bestimmte Unterstützung auf allen/ den meisten Webseiten vorzufinden.

Die Gewöhnung an eine einzelne h1 wird aber auch für Blinde ein Problem, wenn es mehrere gleichwertige „Hauptinhalte“ gibt, weil man einfach nach der ersten h1 keine weitere mehr erwartet (gibt es sonst ja auch nie). Was wenn mehrere h1 im Hauptinhalt Sinn machen würden? Beispielsweise in einem Shop die Bereiche Lebensmittel, Drogerie usw oder auf einer Nachrichtenseite Ausland, Inland, Kultur usw?

In dem Fall wird unter Umständen nur die erste h1 bemerkt.

Man kann dann zwar hilfsweise eine zusätzliche generische Überschrift „Hauptinhalt“ hinzufügen, aber dann hat man nicht den gewünschten Effekt, dass man besonders schnell beim Hauptinhalt ankommt, sondern man hat im Gegenteil einen völlig nutzlosen und nichtssagenden Zusatzstop eingebaut, nur um seiner Überzeugung (es darf nur eine h1 geben) treu zu bleiben. Das wird auch nicht besser, wenn man statt „Hauptinhalt“ auf einer Nachrichtenseite die Überschrift „Nachrichten“ oder in einem Shop die Überschrift „Abteilungen“ verwendet. Man weiß an dem Punkt längst, dass man sich auf Tagesschau.de oder auf amazon.de befindet und diese überflüssige Ebene verlangsamt nur das Erreichen der eigentlichen Kategorien.

„Ich will mit einem Sprung zur h1 direkt beim Hauptinhalt sein, zwei- oder dreimal eine Taste zu drücken ist zu viel“, ist meiner Meinung nach ein sehr schwaches Argument.

Es kommt drauf an

Der letzte Punkt deutet es an: es gibt im Leben fast immer eine „Es-kommt-drauf-an“-Komponente. Eine dogmatische Festlegung auf ein richtig oder falsch verhindert u.U., dass man den spezifischen Erfordernissen einer ungewöhnlichen Seite gerecht wird, weil man im Kopf die Zensur-Schere aktiviert hat, die mehr als eine h1 je Seite verbietet. Diesen gedanklichen Automatismus gilt es zu verhindern, wenn man auf der Suche nach der „besten“ Lösung ist, denn letztendlich ist jeder Hauptinhalt ein individuelles Problem. Man würde ja auch nie vorgeben: „Jede Seite muss genau drei Überschriften der zweiten Ebene haben“. Das klingt für jeden sofort absurd. Für mich klingt „jede Seite darf nur eine h1“ haben fast genauso absurd.

Blinde wollen das so

Der hier implizierte Konsens ist so nicht vorhanden, bestenfalls gibt es eine Mehrheit, die sich das so wünscht, denn nicht alle Blinde wollen das so. Selbst einige Blinde die das so wollen, geben auf persönliche Nachfrage an, dass zweimal oder dreimal zu einer h1 zu springen um zum Hauptinjalt zu kommen, auch noch sehr bequem, verständlich und gut nutzbar ist.

Zwei Beispiele

Blog-Artikel

Ein einfaches und für mich eindeutiges Beispiel ist der hier vorliegende Artikel. „inclusive Design: Die beste Überschriftenstruktur“ ist hier die einzige Überschrift erster Ordnung.
Alles andere ist „nur drumrum“ und dient eigentlich nur dazu, von diesem Dokument weg zu kommen. Das würde ich auch klar vom Hauptinhalt trennen.
Alles vor dem Hauptinhalt würde demnach mit h2 oder niedriger ausgezeichnet werden, weil es ja nicht einer späteren Überschrift untergeordnet wird. So kommt man mit einem Sprung zu h1 auch gleich zum Hauptinhalt. Für den Fußbereich dann wie oben ausgeführt eine h1.

In eigener Sache: Warum habe ich hier meine eigene Empfehlung nicht umgesetzt?

Ich verwende hier noch den Klassik-Editor von WordPress, der es mir nicht erlaubt, eigene Überschriften für die Seitenbereiche und den Fußbereich zu vergeben. Das hier verwendete Theme macht Vorgaben, die ich nicht abändern kann. Allerdings ist das Theme schon sehr barrierearm. Den Aufbau hier würde ich wohl auch noch mit „eher erfüllt“ und daher „bestanden“ werten.
Aber es geht besser und bei einem Relaunch wird es auch besser!

Übliche Startseite großer Portale

Hier wünsche ich mir meistens mehrere h1, zum Beispiel:
  • Wichtige Neuigkeiten (oft als Slider umgesetzt – lieber keine Slider verwenden!)
  • Name vom Top-Thema der Woche
  • Weitere Themen
  • Aktuelle Nachrichten

Diese Überschriften würde ich nicht verstecken, sondern allen anzeigen. Nicht nur für Menschen mit kognitiven Einschränkungen.

Fazit

Es gibt mehrere legitime Überschriftenkonzepte. Was als das beste empfunden wird, hängt einerseits von nachvollziehbaren Faktoren ab (z.B. ob Hilfsmittel benutzt werden oder nicht), andererseits von Vorlieben und Gewohnheiten der Nutzerinnen. Nutzen Blinde beispielsweise das main-element zur Navigation zum Hauptinhalt, kümmert es sie meist recht wenig, ob es mit einer h1 oder h2 weiter geht. Die Blinden mit denen ich darüber gesprochen habe, navigieren meistens zur „nächsten Überschrift“, nicht zu einer bestimmten Ebene.

Als Prüfer lasse ich sehr viele Varianten zu, diese müssen objektiv nachvollziehbar die thematische Struktur der Seite wiedergeben. Ob dabei eine oder mehrere h1 verwendet werden, spielt für mich eine untergeordnete Rolle. Hauptsache ich finde eine nachvollziehbare Logik, ein Konzept.
Die Praxis die „wichtigsten“ Inhalte mit den höchsten Überschriftenebenen zu versehen finde ich problematisch, weil es objektiv keinen Konsens für „wichtig“ gibt. Auch wenn man damit eine formale Prüfung wohl bestehen kann, würde ich es nicht als best practice empfehlen.
Für „typische informationstragende Webseiten“ ist es meist sinnvoll möglich, über dem Hauptinhalt eine/ die erste h1 zu setzen. Das mache ich dann auch selber so. Seitenbereiche davor würde ich meistens mit einer h2 überschreiben, Seitenbereiche, die nach dem Hauptinhalt kommen und klar davon abgetrennt werden sollen (z.B. der Fußbereich) würde ich mit einer h1 überschreiben.
Aber: immer würde ich vorher überlegen, ob eine oft verwendete Lösung für eine konkrete Seite wirklich die beste ist.
Dogmen sind hinderlich bei der Suche nach einer individuellen Lösung für ein individuelles Problem.

Alles klar?

Die wichtigste Info dieses Beitrags ist vielleicht: eine Prüfung auf Konformität zu Normen und Gesetzen besteht vermutlich jede Überschriftenstruktur, über die man sich konzeptionell Gedanken gemacht hat. Selbst wenn es im Detail bessere oder schlechtere Lösungen für manche Nutzer gibt.
Insofern kann man das Thema mit einer gewissen Gelassenheit angehen. Allen recht machen ist ein unerreichbares Ziel. Das zeigen die vielen Diskussionen zum Thema, die nie zu einem Konsens führen.

Mitmachen

Schreibt gerne Eure Zustimmung, Kritik, Ergänzungen oder Fragen in die Kommentare.

Schreibe einen Kommentar

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