Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Struktur von Überschriften

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

Struktur von Überschriften

Überschriften können die Arbeit mit CSS erleichtern, aber man sollte sie vor allem so einsetzen, dass sie gebrauchstauglich sind. Die Verwendung einer Überschriftenstruktur kann die Bedienung einer Seite für Tastaturnutzer erheblich vereinfachen. Jan Eric Hellbusch bietet einen Überblick über die wichtigsten Gedanken zu einem Outline von Überschriften.

Überschriften sind ein wichtiger Aspekt der Lesbarkeit von Texten. Der Einsatz von Überschriftenelementen (H1 bis H6) auf Webseiten ist dabei die standardkonforme Auszeichnung. Aber warum sollten Überschriften mit den HTML-Überschriftenelementen ausgezeichnet werden?

Es gibt dafür mindestens drei Gründe:

  1. Webseiten sind auch Dokumente und bedürfen einer semantischen Aufbereitung.
  2. Überschriften bieten Tastaturnutzern eine zusätzliche Möglichkeit zum Navigieren (z.B. in einem Screenreader).
  3. In einer Darstellung ohne CSS vermitteln Überschriften die Dokumentstruktur und das Lesen wird erleichtert.

Inhalte

Die meisten Inhalte im Web sind Artikel und die meisten Designs sehen eine größere Hauptüberschrift sowie weitere Zwischenüberschriften vor. Hier sollte die Hauptüberschrift eine H1 sein. Die weiteren Überschriften sind dann meist H2 oder H3. Die logische Strukturierung, also z.B. auf eine H1 sollte nach der Logik einer Überschriftenstruktur eine H2, aber nicht eine H3 folgen, hilft sehr bei der Navigation mit der Tastatur.

Übersichtsseiten

Auf sehr vollen Seiten oder einigen Übersichtsseiten wie eine Startseite findet sich oft keine Überschrift im inhaltlichen Bereich, unter der alle weiteren Überschriften untergeordnet werden können. Es spricht nichts dagegen, für derartige Seiten auch mehrere H1 zu setzen. Wenn der Inhalt mehrere Hauptüberschriften vorweist, dann sind auch mehrere H1 erforderlich.

Überschriften in Anwendungen/Formularen

In Formularen sollten zusammenhängende Formulargruppen mit FIELDSET und LEGEND unterteilt werden. Dies kann aber im Screenreadern zu Usability-Problemen führen, so dass eine logische Überschriftenstruktur wie bei Artikeln in Erwägung gezogen werden kann.

Navigationsbereiche

Die meisten Navigationsbereiche (z.B. die Hauptnavigation oder die Fußleiste) besitzen keine Überschrift. Für die Barrierefreiheit werden aber unsichtbare Überschriften eingesetzt, um die Tastaturnavigation zu optimieren. Diese Überschriften können direkt angesprungen werden und stellen eine Optimierung für die Navigation mit der Tastatur dar. Weil auch die Überschriftenebene bei dieser Art der Navigation eine Rolle für die Gebrauchstauglichkeit spielt, sollten sämtliche unsichtbaren und sichtbaren Überschriften im Navigationsbereich einheitlich sein.

Der Einsatz von H1 sollte dabei für Inhalte reserviert sein, um über die Ebene 1 direkt zu den Inhalten der Seite gelangen zu können.

Schlussbemerkung

Da es keine Konventionen zu Überschriftenhierarchien gibt, sollte der Tastaturnutzer als Ausgangspunkt für ein Outline bestimmt werden:

  • H1 sollte für die inhaltliche(n) Hauptüberschrift(en) genutzt werden.
  • Andere inhaltliche Überschriften sollten logisch der H1 untergeordnet werden.
  • Für die Navigationsbereiche wird eine einheitliche Überschrift eingesetzt, aber keine H1.

Es bleibt das Branding oder der Titel einer Seite: Da solche Texte i.d.R. keine zu erreichende Funktionen enthalten, brauchen sie nicht als Überschrift ausgezeichnet werden.

Kommentare

Tobias
am 02.12.2007 - 01:54

Super Beitrag *thumbs up*. Allerdings wiederspricht das setzten von Überschriften außerhalb des Contents meiner Vorstellung von Semantik doch ganz schön. Die Auszeichnungen H1-H6 sind doch dazu da eine Überschriftenhierarchien zu bilden und nicht um die Navigation zu markieren. Hierfür haben wir ja hoffentlich bald ein spezielles Elemente.

Eine weitere, meiner Meinung nach falsche, Anwendung ist es wenn Inhalte wie "Suche", "Neuste Kommentare" oder auch das Logo mit Image-Replacment, also alles was nicht zum eigentlichen Content gehört, als Überschriften gekennzeichnet werden.

Permanenter Link

Daniel
am 02.12.2007 - 09:11

Also ich habe mir, rein vom Titel her, mehr von dem Beitrag erhofft. Für mich liest sich das eher nach einer Rechtfertigung die H1 öfter zu verwenden.

Eigentlich sollte doch klar sein, das die mehrfache Verwendung von H1 in Suchmaschinen nichts bringt und auch zum Thema Barrierefreiheit ist es doch wesentlich sinnvoller auch die anderen Überschriften häufiger zu verwenden.

Ich vergleiche das immer gerne mit der Verwendung von Überschriften in Word-Dokumenten. Da kommt die größte Überschrift auch grundsätzlich nur einmal pro Kapitel vor und wenn ich das auf eine Webseite übertrage macht die H1 entweder Sinn um den Firmennamen hervorzuheben oder den Titel der Seite.

Daher sollte, meiner Meinung nach, die H1 nur einmal im Quelltext stehen und danach die H2 als Abschnittsüberschrift verwendet werden. Darauf folgen dann ggf. die anderen Überschriften je nach Text. Die Aufgabe, die Du der H1 zuweist sollte also eher die H2 erfüllen.

Zum Thema Formulare: Du übertreibst hier schon, wenn Du von Usability-Problemen sprichst. Das wiederholte Vorlesen von LEGEND kann ja durchaus sinnvoll sein, wenn man den Inhalt von LEGEND kurz hält und ein sehr umfangreiches Formular hat.

Zu den unsichtbaren Überschriften: Zunächst wäre ich mir nicht sicher, ob das wirklich Sinn macht. Bisher war mir nur bekannt, das man eine Navigation mit Sprungmarken an den Anfang des Quelltext setzt und dann die entsprechenden Bereich der Seite über diese erreichbar macht. Diese Navigation wird dann mit CSS ausgeblendet. Warum jetzt eine ergänzende unsichtbare Überschrift hier sinnvoll wäre verstehe ich noch nicht.

Entschuldige bitte die kritischen Worte aber Du beschreibst hier einige Dinge absolut gegensätzlich zu dem was mir bekannt und vertraut ist.

Permanenter Link
Stefan David

Stefan David (Webkraut)
am 02.12.2007 - 11:41

@Daniel: Jan hat in seinem Artikel ganz klar von "einer H1" als Hauptüberschrift gesprochen. Die weiteren Überschriften sollten dann hierarchisch untergeordnet sein.

Wie du darauf kommst, Jan SEO-Ambitionen zu unterstellen, kann ich nicht nachvollziehen. Der Artikel sagt zumindest nichts dazu aus.

Permanenter Link

Daniel
am 02.12.2007 - 15:47

@Stefan

H1 sollte für die inhaltliche(n) Hauptüberschrift(en) genutzt werden.

liest sich für mich nicht so als wäre nur von einer H1 die Rede.

Vielleicht habe ich mich unglücklich ausgedrückt aber ich betrachte gerade ein Thema wie Überschriften immer aus beiden Blickkrichtungen SEO und Barrierefreiheit. Wobei ich der Überzeugung bin, das sich beide Blickrichtungen sehr ähneln.

Ich kenne viele von den hier erwähnten Dingen anders und gerade was die mehrfache Verwendung von H1 oder die unsichtbaren Überschriften angeht war ich bisher und bin ich noch der festen Überzeugung, das es nicht richtig wäre. Ich lasse mich aber hier gerne korrigieren. :-)

Permanenter Link
Jan Hellbusch

Jan Hellbusch (Autor)
am 02.12.2007 - 17:47

@daniel
Das Thema SEO habe ich nicht diskutiert aus einem ganz einfachen Grund: Für SEO wird man sicher eine andere Strategie bei der Entwicklung einer Überschriftenstruktur wählen. Von daher sehe ich die Kommentare zu SEO als nebensächlich. Hier geht es natürlich in erster Linie um die Nutzbarkeit mit einem Screenreader. Wenn ich die Kommentare lese, dann kommt die Vermutung hoch, dass Du noch nicht mit einem Screenreader gearbeitet hast? Jedenfalls gibt es nicht so viele Navigationsmöglichkeiten in einem Screenreader, aber eine ist die Navigation über Überschriften und Überschriftenstrukturen.

Einige Deiner Anmerkungen möchte ich kommentieren:

- Du schreibst "zum Thema Barrierefreiheit ist es doch wesentlich sinnvoller auch die anderen Überschriften häufiger zu verwenden". Wofür? Wenn sich Entwickler eine Überschriftenstruktur für Navigationsbereiche ausdenken, werden diese mitunter nicht gut nutzbar, denn als Nicht-Sehender wird man diese Struktur erst erlernen müssen. Deswegen plädiere ich – wenn man sich für Überschriften in den Navigationsbereichen entscheidet – dass man mit einer einheitlichen Überschrift arbeitet. Das ist immer leicht zu lernen. Für die Inhalte gilt natürlich das oben geschriebene.

- Du schreibst auch "Ich vergleiche das immer gerne mit der Verwendung von Überschriften in Word-Dokumenten." Da sind wir sicher einer Meinung, was den Inhalt angeht. Aber in Word-Dokumenten hat man auch Fußleistenbereiche, Inhaltsverzeichnisse u.v.m. mit eigenen Strukturmerkmalen. Im Web werden Inhalte und anderen Navigations- und Informationsbereichen sowie Funktionen alle mit HTML ausgezeichnet und auch hier ist es für den Nicht-Sehenden praktisch unmöglich, die unterschiedlichen Bedeutungen auf Anhieb zu erkennen. Für Sehende werden Spalten, Farben u.v.m eingesetzt, um die unterschiedlichen Bedeutungen zu vermitteln.

- Zum Thema Legend macht Deine Aussage mehr als deutlich, dass Du die Problematik noch nicht verstanden hast. Es ist richtig, dass ein kurzer Legend nützlich ist, aber ich habe schon viele Formulare mit einem Screenreader ausgefüllt. Ich behaupte, die meisten Webentwickler wissen nicht, wie Legend in einem Screenreader funktioniert, denn sonst würden die Legends ganz anders aussehen.

Ansonsten empfehle ich Dir, den Text noch mal durchzulesen und eventuell auch die Links im Text zu verfolgen. Es geht um Gebrauchstauglichkeit in nicht-visuellen, linearen und tastaturorientierten Medien und ganz sicher nicht um die Verwendung von 1 oder mehr H1 auf einer Seite – das hast Du falsch verstanden!

@tobias
Ob Überschriften für die funktionalen Bereiche einer Seite eingesetzt werden sollen oder nicht, ist sicher diskussionswürdig. Und in der Tat gibt es derzeit keine wirklich guten Lösungen, um die Navigation durch eine Seite (nicht einer Site!) in nicht-visuellen und mauslosen Medien zu ermöglichen. Die Überschriften haben sich als brauchbarste Lösung erwiesen und das nicht erst seit gestern, denn tastaturorientierte Medien bieten eben die Navigation über die Strukturen (Überschriften, Listen etc.) einer Seite. Mit CSS können diese Seitenelemente beliebig formatiert werden und dem sehenden Nutzer fällt es nicht weiter auf. Aber die Überschriften mit Image Replacement zu realisieren, halte ich ebenfalls für falsch, s. den Artikel dazu bei Einfach für Alle von Tomas Caspers und mir.

Permanenter Link

Gerhard
am 02.12.2007 - 19:16

Mit Überschriften sollte nicht nur der eigentliche Inhalt sondern das gesamte Dokument gegliedert werden.

Permanenter Link

Daniel
am 03.12.2007 - 00:33

@Jan
Also ich habe bisher noch nicht intensiv mit einem Screenreader gearbeitet aber mir schon einige Texte zur barrierefreien Gestaltung einer Webseite angesehen. Wir optimieren Webseiten ja auch nicht nur für Screenreader sondern für alle Besuchergruppen!

Du erwähnst sicherlich einige Punkte die man berücksichtigen kann aber ich halte es teilweise einfach für übertrieben. Trotzdem werde ich mich da jetzt nochmal intensiver mit beschäftigen. Viele der Dinge die Du in Deinem Kommentar geschrieben hast hätten auch dem Artikel gut getan. So wird mir jetzt doch einiges klarer.

Was SEO angeht: Eine gute Webseite zeichnet u.a. aus, das sie optisch gut aufgemacht ist, barrierefrei gestaltet ist und für Suchmaschinen optimiert ist. Keiner der drei Punkte schliesst einen anderen aus und daher halte ich Punkte wie SEO doch für sehr wichtig auch wenn man einen Schwerpunkt auf Barrierefreiheit legt. Daher hoffe ich das mein Einwurf, was SEO angeht, verständlich ist. Ich versuche bei der Erstellung von Webseiten alle Punkte zu berücksichtigen. Schon alleine weil es viele gibt die Mängel in einem der drei genannten Punkte mit der Berücksichtigung eines anderen Punktes rechtfertigen möchten. Aber ein gutes Design schliesst nicht aus, das die Seite barrierefrei ist und eine barrierefreie Seite kann auch für Suchmaschinen optimiert sein. Wenn hier jetzt Praktiken vermittelt werden, die gegen andere Grundsätze verstossen, dann ist das sicherlich auch für ein barriereärmeres Netz nicht förderlich.

Permanenter Link

MAIN_blog
am 03.12.2007 - 07:12

Manueller Trackback - der automatische kam nicht an - Webkrauts im Advent:
http://www.mainweb.at/blog/2007/12/02/webkrauts-im-advent/

Permanenter Link

Eric Eggert
am 03.12.2007 - 08:28

Daniel:

Ich verstehe gerade nicht worauf du hinaus willst. Was haben denn Überschriften generell mit der Optimierung speziell für Screenreader zu tun? Für Sehende ist es erstmal egal, ob eine Überschrift eine h1, eine h4 oder einfach nur fetter großer Text ist. Für sie ist das sehr gut zu unterscheiden. Für Screenreader-Nutzer sind Überschriften eine wichtige Orientierungshilfe. Selbst wenn es ein Sprungmenü gibt (welches auf jeder Seite anders gestaltet ist) geben Überschriften doch immer die Möglichkeit sich auf konsistentem Weg durch eine Seite zu navigieren.

Das mit den mehreren h1 ist ebenfalls einfach erklärt: Stelle dir eine Newsseite vor, die mehrere Hauptmeldungen hat (etwa Spiegel Online). In diesem Fall ist das nicht nur vertretbar sondern guter Stil alle diese Überschriften auf einer Ebene anzubieten. Mit der h1 priorisiert man sie zusätzlich so, dass sich ein Screenreader-Nutzer per Tastendruck einen Überblick über die Schlagzeilen bekommt. Das ist sehr einfach und eine große Erleichterung.

Wenn hier jetzt Praktiken vermittelt werden, die gegen andere Grundsätze verstossen, dann ist das sicherlich auch für ein barriereärmeres Netz nicht förderlich.

Ich kann hier keinen „Verstoß“ gegen „Grundsätze“ feststellen. Übrigens kann man davon ausgehen, dass Menschen die Screenreader benutzen wissen, was förderlich für ein barrierearmes Netz ist.

Jans Text bricht – so leid es mir persönlich tut – eben genau nicht mit etablierten Konventionen sondern listet in kompakter Form auf, was zu beachten ist und schon immer war. Zudem ist der Text für Webseiten gemacht die Menschen, nicht Suchmaschinen, als Zielgruppe haben.

Permanenter Link

Glödu
am 03.12.2007 - 12:20

Nach dem interessanten Gedankenanstoss des Artikels bleiben mir zwei Fragen.

Zu:

Es bleibt das Branding oder der Titel einer Seite: Da solche Texte i.d.R. keine zu erreichende Funktionen enthalten, brauchen sie nicht als Überschrift ausgezeichnet werden.

Wäre es in diesem Sinn zulässig, vor der eigentlichen Hauptüberschrift h1 einen als Absatz ausgezeichneten Text zu haben?

Als zweites: Wenn h-Elemente bei der Seitennavigation mit Screenreadern hilfreich sind (habe mit Screenreadern keine Erfahrung), welche Rolle spielen dabei dann noch die Skip-Links? Sind die eigentlich überflüssig?

Permanenter Link

Daniel
am 03.12.2007 - 14:04

Interessanterweise verwendet Spiegel Online eine H3 für die aktuellsten Meldungen und wenn ich nicht irre ist dies trotzdem mit einem Screenreader ansprechbar.

Die H1 wird für den Titel der Seite "Spiegel Online" verwendet.

Da der Spiegel jetzt sicherlich als Referenz nicht herhalten kann wüsste ich mal gerne wo die von Dir genannten Techniken konsequent umgesetzt werden. Ich verstehe nämlich noch immer nicht den tieferen Sinn und bleibe bei meiner Behauptung das der geringe Mehrwert für die Nutzer von Screenreadern diese nicht rechtfertigt.

Permanenter Link

Daniel
am 03.12.2007 - 14:21

Also um das nochmal klar zu stellen: Ich lerne gerne dazu und möchte das meine Seiten so barrierearm wie möglich sind. Trotzdem gibt es bei mir Barrierefreiheit nur in der Kombination mit Suchmachinenoptimierung und ansprechender Gestaltung.

Ich habe hier das Gefühl das die angesprochenen Veränderungen am Quelltext keinen hohen Mehrwert für den Benutzer bringen. Sicherlich kann man hier über das Thema streiten und lange Diskussionen führen aber worum es mir eigentlich geht ist eine angemessene Lösung für dieses Problem.

Bisher habe ich mit Skip-Links gearbeitet damit Personen mit Screenreadern schnell zum Inhalt meiner Seite oder zur Navigation kommen konnten. Ich frage mich ob das jetzt überflüssig ist oder ob es mehr Sinn macht beides zu kombinieren.

Der Artikel ist mir hier irgendwie nicht konkret genug und betrachtet die Webseitengestaltung in meinen Augen nur aus einem sehr eingeschränkten Blickfeld. Ich lasse mich wirklich gerne korrigieren und lerne gerne hinzu.

Permanenter Link

Per
am 03.12.2007 - 20:02

Als blinder Durchschnittsnutzer und Vielleser liebe ich Webseiten mit sinnvoll verteilten Überschriften. Sie ermöglichen mir mit dem Screen Reader Jaws eine sehr schnelle & effiziente Seitennavigation. Mit "h" oder "Shift+h" springe ich schnell von Überschrift zu Überschrift und kann mir so innerhalb von Sekunden einen ungefähren Überblick über den Seitenaufbau, die Menüs und den Inhalt verschaffen. Skip Links habe ich dagegen fast noch nie benutzt und finde sie eher störend, da sie mit Jaws oder anderen SR weitere 2 bis 3 unnötige Zeilen produzieren. Im Netz gab es noch vor einigen Jahren kaum Seiten mit Überschriftsformatierungen und damals war solch ein Skiplink Wahrscheinlich sehr nützlich, um schnell zum Inhalt oder Navigationsmenü zu kommen. Heutzutage ist das dank der zahlreichen Seiten mit gut verteilten Überschriften glücklicherweise nicht mehr
nötig, da die Screenreader sie gezielt anspringen können. Auch lässt sich mit anderen gezielt anspringbaren Elementen wie Eingabefeldern oder Tabellen auf bekannten Seiten mit "f", "e" oder "t" sehr gut navigieren. Aus meiner Sicht sind solche Skiplinks daher fast schon eher ein Usability-Problem für blinde Nutzer, da sie ständig unnötige Cursorbetätigungen erfordern. Auf Seiten ohne Überschriften mögen sie vielleicht sinnvoll sein aber Überschriften sind eine wesentlich bessere Lösung. Ob nun h1, h2 oder hx verwendet wird, ist mir dabei ziemlich egal. Diese lassen sich zwar von Jaws auch mit den Zahlentasten von 1 bis 6 gezielt anspringen aber das triggern der Buchstabentaste "h" geht schneller & einfacher. Gelungene Beispiele für gute Überschriftsplazierungen sind beispielsweise die Google-Treffer oder Wikiseiten mit dem Monobook Skin. Auch bei "Einfach für alle" und auf zahlreichen anderen Seiten lässt sich auf diese Weise sehr gut navigieren.

Permanenter Link

Glödu
am 04.12.2007 - 11:05

@Per

Danke für die ausführliche Beschreibung.

Permanenter Link
Jan Hellbusch

Jan Hellbusch (Autor)
am 04.12.2007 - 20:02

@Glödu

Sicher kann vor der ersten Überschrift auch ein Absatz stehen. Immerhin, es werden Seiten gebaut, damit sie von Nutzern genutzt werden können, nicht damit der Code ästhetisch ist. Und wenn Du vor der ersten Überschrift ein Bild oder sonst was bringen willst, dann musst Du nicht aus irgendwelchen Gründen eine H1 daran setzen.

Die Skip-Links werden in der Tat völlig missbraucht. Es gibt eigentlich nur eine Situation, wo ein Skip-Link erforderlich ist, nämlich um direkt zum Inhalt zu springen. Ansonsten ist die Überschriftennavigation mit Abstand komfortabler. M.W. wird in der WCAG2 auch nur der eine Skip-Link gefordert, alle anderen Navigationsmöglichkeiten erledigt der Screenreader durch die strukturelle Navigation via Überschriften, Listen und anderen Elementen. Und bei sehr umfangreichen Seiten lässt sich auch ein zweiter Skip-Link begründen, aber das muss man immer individuell entscheiden.

Permanenter Link
Matthias Koch

Matthias Koch (Webkraut)
am 05.12.2007 - 09:18

Wäre es denn ein Schritt in Richtung barrierearme Umsetzung, wenn man der Navigation (Liste mit <a>-Elementen) eine Überschrift unterhalb 1. Ordnung gibt?

<h2>Inhalte auswählen</h2>
<ul id="navi">
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>

Das wäre dann einfach und ohne große Verrenkungen für alle umsetzbar - oder verwechsele ich da womöglich etwas?

Permanenter Link

Jan Eric Hellbusch
am 05.12.2007 - 15:01

@Matthias

Klar ist das der richtige Weg. Dabei würde ich aber zwei Dinge noch berücksichtigen:

1. Den Überschriftentext konkretisieren (also "Navigation" o.ä. anstatt "Inhalte auswählen")
2. Die Überschrift wirst Du vermutlich unsichtbar stellen wollen. Bitte nicht display:none oder so was nehmen, sondern den Text aus dem Viewport schieben. Mit display:none werden die Texte aus dem DOM ausgeblendet und sind auch für Screenreader nicht mehr erfassbar.

Um die Navigation auf der Seite mit einer solchen strukturellen Navigation zu vereinfachen, sollten diese Art Überschrift möglichst einheitlich sein (z.B. H2 wie in Deinem Beispiel oder H3 ... oder H6). Das gilt sowohl für sichtbare und auch unsichtbare Überschriften.

Permanenter Link
Matthias Koch

Matthias Koch (Webkraut)
am 07.12.2007 - 04:29

Zu 1: Die Diskussion ist zwar schon älter, aber ich halte "Auswahl" für angemessen, weil ich "Navigation" als sprachliche Barriere, z.B. für Grundschüler, einschätze. Das ist Ansichtssache und je nach Kontext konkretisiert.
Zu 2: Ein Screenreader hat bei einem negativen horizontalen margin einen absolut Wert, der nicht überschriten werden sollte. Wie ist dieser aus deiner Erfahrung zu setzen, ohne dass unschöne Nebeneffekte auftreten, z. B. bei JAWS?

Permanenter Link

Jan Eric Hellbusch
am 07.12.2007 - 07:03

Ob "Auswahl" oder "Navigation" musst Du entscheiden. Ich könnte aber mit "Auswahl" nichts anfangen.

Wegen der Positionierung: Leider keine Ahnung. Ich verwende selbst -1000 für left und top und stelle bei mir keine Probleme fest.

Permanenter Link

Auge
am 08.12.2007 - 02:51

Hallo

Man kann über die Ausformung der Überschriftenhierarchie geteilter Meinung sein. Gemäß der Meinen sollte h1 für die Hauptüberschrift/den Titel der betreffenden Seite stehen und die Überschriften für Navigation etc. mit h2 ausgezeichnet werden. Aber sei's drum, solange man ein/sein solches System konsequent anwendet, sollte es (h1 oder h2) egal sein.

Allerdings wiederspricht das setzten von Überschriften außerhalb des Contents meiner Vorstellung von Semantik doch ganz schön.

Warum sind unsichtbare Überschriften "außerhalb des Contents"? Sie erklären in diesem Zusammenhang doch nur die Dinge, die man für graphische Browser über Farben und Formen zugänglich macht. Die Navigation ist ein Abschnitt einer Seite, warum sollte man sie nicht überschreiben? Dass die Navigation, so sie in einem graphischen Browser gestylt daherkommt, selbsterklärend aussieht und man die Überschrift somit nicht braucht und ausblenden kann, ändert daran nichts.

Mal ganz abgesehen von der Möglichkeit der Navigation in den Überschriften.

Was SEO angeht: Eine gute Webseite zeichnet u.a. aus, das sie optisch gut aufgemacht ist, barrierefrei gestaltet ist und für Suchmaschinen optimiert ist.

Komisch, und ich dachte, Webseiten würden für menschliches Publikum geschrieben. *scnr*

Keiner der drei Punkte schliesst einen anderen aus ...

Die bevorzugte Bedienung des Publikums vor den Suchmaschinenrobotern schließt eine optimale Bedienung letzterer natürlich nicht aus. SEO sollte so durchaus erreichbar sein.

Dennoch sollte der Mensch, also der Besucher der Webseite vorne stehen. Wenn man ihm also mit einer konsequenten Überschriftenhierarchie helfen kann, sollte man das auch tun.

Permanenter Link

GE
am 09.12.2007 - 18:00

Hallo, ich bin vor allem über die Empfehlung gestolpert, versteckte oder unsichtbare Überschriften einzusetzen. Wenn die Seite bei google erscheinen soll, ist es sehr ratsam, so etwas nicht zu tun. Ich selbst bin schon mal mit einer Seite komplett von google gekickt worden, wegen unsichtbaren Texten. Das kann sehr weh tun, wenn man mir der Seite sein Geld verdient.

Gott sei Dank konnte ich google damals überzeugen, dass diese unsichtbaren Texte nicht der Suchmaschinen- Manipulation dienten, und war innerhalb einer Woche wieder auf meiner gewohnten Position bei google. Aber ob das immer so gelingt ...

Permanenter Link

Rainer
am 12.12.2007 - 00:18

@GE
Habe mit unsichtbaren Texten oder Überschriften noch nie Probleme gehabt, auch bei Google nicht. Und bei mir sind sie alle aus dem sichtbaren Bereich mit absoluter negativer Positionierung geschoben (siehe 19.)

Generell: ob Skiplinks oder sauberer Überschrifteneinsatz; es gibt wie immer nicht den einzig wahren Weg. Ich persönlich glaube: wichtig sind die Überschriften (sowohl für Screenreader als auch für SEO), dazu ist es sicher nicht verkehrt, sparsam Skiplinks einzusetzen (zum Beispiel einen zum Hauptinhalt und einen zweiten zur Suchfunktion sofern vorhanden). Das überlastet nicht und bietet damit mehrere Orientierungsmöglichkeiten.

@Jan
Danke, dass ich nicht allein mit der Meinung dastehe, dass es gewaltige Unterschiede gibt zwischen semantisch korrekt strukturierten Worddokumenten beziehungsweise Büchern und semantisch aufgebauten Webseiten. Man muss einfach Unterschiede machen beim Einsatz von Überschriften, also auch mehrfachen H1. Ein Buch halte ich immer komplett in der Hand und habe am Anfang ein einziges Inhaltsverzeichnis. Im Web habe ich jede Seite einzeln in beliebiger Reihenfolge und auf jeder Seite das Inhaltsverzeichnis. Bildet das mal auf Papier ab, dann wisst ihr, dass es ein Unterschied wie Bratäpfel und Lebkuchen ist.

Da es noch keiner erwähnt hat: Allen eine schöne Weihnachtszeit :-)

Permanenter Link

Rainer
am 12.12.2007 - 00:26

Weil ich es eben vergaß: verlassen wir kurz den Fokus blinder Screenreaderbenutzer. Skiplinks helfen auch sehenden mauslosen Tastaturbenutzern. Vorausgesetzt, die Links werden beim Antabben sichtbar. Beispiele: www.einfach-fuer-alle.de oder www.sybit.de.

Permanenter Link

Matthias Koch
am 14.12.2007 - 09:17

@Rainer
Stimmt! :-)

Permanenter Link

Ralph
am 14.04.2008 - 21:15

Sehr, sehr interessant, der Artikel und die Kommentare. Leider ist die Diskussion bereits beendet. Ich finde diese wirklich sehr interessant.

Ralph

Permanenter Link

Björn Hahnefeld
am 31.07.2008 - 08:40

Ein nicht zu verkennender Vorteil ist (mal abgesehen von den wirklich nicht von der Hand zu weisenden Fakten über Barrierefreiheit), dass sich diese Arbeit auch in den Suchmaschinen-Ergebnissen auszahlt.

Seiten mit H1-H6-Überschriften sind nicht nur generell leserlicher, sondern auch für Google sauber aufbereitet (wenn auch der Rest des Quelltextes passt) und somit gerne auf den ersten Plätzen gesehen...

Permanenter Link

Die Kommentare sind geschlossen.