Navigation und Service

Einfach teilhaben (Link zur Startseite)


Anleitung

Informationen auf Webseiten beschränken sich nicht nur auf Texte und Bilder. Auch Schriftformate, Farben, Anordnungen und Positionen gehören zu den Informationen einer Webseite. Sie geben der Webseite eine Struktur, dienen der Übersicht, kennzeichnen Links, heben Wörter oder Seitenbereiche hervor oder haben andere Bedeutungen. Solche Strukturinformationen sind wichtig und Sie sollten sie überall da nutzen, wo ihr Einsatz sinnvoll erscheint. Aber, Sie dürfen sich dabei nicht ausschließlich auf das Aussehen in der normalen Browser-Darstellung verlassen.

Semantische Strukturen

HTML wurde so konzipiert, dass viele Elemente semantische Bedeutungen haben. Zu den semantischen Elementen gehören unter anderem:

  • Überschriften
  • Hervorhebungen
  • Quellcode
  • Zitate
  • Listen
  • Links

Wenn Sie für bestimmte Textbereiche oder Wörter eine spezielle Formatierung wählen, ist dies immer ein Zeichen dafür, dass Sie an dieser Stelle eine besondere Struktur deutlich machen möchten. Suchen Sie deshalb in diesen Fällen nach dem am besten geeigneten HTML-Element und nutzen Sie dieses. Das gewünschte Aussehen legen Sie dann durch CSS-Eigenschaften fest.

Wichtiges Prinzip bei der Erstellung von Webseiten ist die Trennung von Struktur und Information von der Darstellung.

Überschriften

Häufig ist zum Beispiel ein HTML-Code ähnlich dem Folgenden in Webseiten zu finden:

<!-- so nicht!!! -->
<div style="font-size:20px;font-weight:bold">
   Dies ist nur großer fetter Text
</div>

Die Textzeile sieht auf einer Webseite wie eine Überschrift aus, faktisch handelt es sich dabei aber nur um normalen Text, der lediglich groß und fett formatiert wurde.

Beispiel-Screenshot: Zwei gleich aussehende Überschriften, eine Echte und eine durch CSS-Eigenschaften simulierte Überschrift. Beispiel-Screenshot: Zwei gleich aussehende Überschriften, eine Echte und eine durch CSS-Eigenschaften simulierte Überschrift.

HTML bietet für Überschriften die Elemente h1 bis h6 an. Nutzen Sie diese Elemente, wie im folgenden Quellcode, um Ihre Webseite zu gliedern.

<h3>Dies ist eine echte Überschrift</h3>

Neben der Bedeutung, dass der so gekennzeichnete Text eine Überschrift ist, kann mit diesen Elementen auch eine Überschriften-Hierarchie festgelegt werden. Wichtig ist hier, dass die Hierarchie korrekt und in sich schlüssig ist, d.h. keine Überschriften-Ebene sollte ausgelassen werden. Aus einer guten Überschriften-Hierarchie kann, wie die nächsten Abbildung zeigt, ein sinnvolles Inhaltsverzeichnis generiert werden, mit dem sich alle Nutzerinnen und Nutzer auf der Webseite orientieren können. Ein Screenreader generiert solche Inhaltsverzeichnisse zum Beispiel automatisch und liest sie auf Wunsch der blinden und sehbehinderten Person vor.

Beispiel-Screenshot: Klassische Überschriftenstruktur als automatisch generiertes Inhaltsverzeichnis Beispiel-Screenshot: Klassische Überschriftenstruktur als automatisch generiertes Inhaltsverzeichnis

Das Beispiel oben zeigt eine auf Webseiten häufig anzutreffende Überschriften-Hierarchie. Beachten Sie bitte, dass es durchaus auch andere sinnvolle Hierarchien gibt, das Beispiel zeigt nur eine von vielen Möglichen. Wichtig ist, dass die gewünschte Hierarchie sinnvoll ist und die Überschriften entsprechend der logischen Ebenen strukturiert wurden.

Hervorhebungen

Häufig sollen auch besondere Textpassagen oder Wörter optisch hervorgehoben werden. Die Gründe für diese Hervorhebungen können unterschiedlich sein, zum Beispiel kann ein Wort besonders wichtig sein oder eine Textpassage kann ein Zitat sein. Weblinks sind ebenfalls Wörter oder Sätze mit einer speziellen Bedeutung und werden optisch hervorgehoben.

Wichtige Worte werden in HTML mit dem strong-Element oder dem em-Element hervorgehoben. strong sollte dabei von Browsern und assistiven Technologien stärker hervorgehoben werden als em. Screenreader sollen zum Beispiel die Betonung ändern oder eine andere Stimme wählen. Browser stellen in der Regel strong als fetten Text dar und em als kursiven Text. Das Aussehen kann aber durch CSS-Attribute dem gewünschten Design angepasst werden.

<p>
   Bei der Bundestagswahl haben Sie 
   <strong>zwei</strong> Stimmen!
</p>

Mit verschiedenen CSS-Eigenschaften könnte das Wort "zwei" optisch beliebig hervorgehoben werden.

Beispiel-Screenshot: Hervorhebung eines Wortes mittels mehrerer CSS-Eigenschaften Beispiel-Screenshot: Hervorhebung eines Wortes mittels mehrerer CSS-Eigenschaften

Bei einer transformierten Darstellung ohne CSS würden die Standard-Einstellungen des Browsers genutzt werden. Der hervorgehobene Text wäre zumindest noch fett geschrieben und eine Hervorhebung bliebe auch bei einer Darstellung ohne die gegebenen CSS-Eigenschaften erhalten. Ebenso könnte eine Sprachausgabe die Hervorhebung durch einen Wechsel der Stimmlage deutlich machen. Folgende Bildschirmabbildung zeigt eine spezielle Reader-Ansicht auf einem Smartphone. Auch hier bleibt die Hervorhebung dank des richtigen HTML-Elements vorhanden.

Beispiel-Screenshot: Darstellung auf einem iPhone im Reader-Modus, die Hervorhebung bleibt dank des strong-Elements vorhanden Beispiel-Screenshot: Darstellung auf einem iPhone im Reader-Modus, die Hervorhebung bleibt dank des strong-Elements vorhanden

Quellcode

Der Quellcode einer Programmiersprache sollte ebenfalls durch ein HTML-Element kenntlich gemacht werden. Browser zeigen den Text, der im code-Element steht, meist in einer nichtproportionalen Schriftart (Alle Zeichen sind gleich breit) an. Zeilenumbrüche werden nicht, wie bei HTML üblich, ignoriert, sondern angezeigt. Mittels CSS kann die Darstellung von Quellcode weiter angepasst werden.

Für eine Screenreader-Nutzerin oder -Nutzer ist das Vorlesen eines Quellcodes anstrengend und häufig sehr schwer verständlich, deshalb bieten Screenreader eine einfache Möglichkeit an, solche Textblöcke per Tastendruck zu überspringen.

Zitate

Für Zitate sind mit dem q-Element und dem blockquote-Element HTML-Elemente zur Auszeichnung vorhanden. Mit dem Block-Element blockquote können ganze Abschnitte als Zitat gekennzeichnet werden und das Inline-Element q kennzeichnet einzelne Wörter oder Sätze eines Abschnittes als Zitat. Einige Browser setzen die bei Zitaten üblichen Anführungszeichen automatisch vor und hinter ein Zitat. Da die Browser hierbei nicht einheitlich vorgehen, sollten durch CSS-Eigenschaften den Automatismus zu verhindern und die Anführungszeichen manuell im Text zu setzen. Im Layout werden Zitatblöcke in der Regel vom Browser nach rechts eingerückt dargestellt. Dies hat dazu geführt, dass das blockquote-Element häufig für Einrückungen missbraucht wurde, obwohl kein Zitat vorlag. Vermeiden Sie einen solchen Missbrauch und nutzen Sie die Zitat-Elemente nur für echte Zitate.

Links

Selbst Links, die zum grundlegenden und namensgebenden Konzept von HTML gehören, werden manchmal nicht in ihrer semantischen Bedeutung verwendet. Gerade bei moderneren Webseiten wird häufig der Versuch unternommen, Weblinks mittels JavaScript nachzubauen. Solche nachgebauten Links können bei entsprechenden CSS-Eigenschaften zwar wie normale Links aussehen, sie würden von Browsern und assistiven Technologien, wie etwa einen Screenreader, aber nicht als Link erkannt werden. Dank JavaScript funktioniert zwar das Anklicken mit der Maus, aber der nachgebaute Link wäre weder mit der Tastatur anwählbar, noch würde der Link von einem Screenreader angesagt werden.

Listen

HTML bietet verschiedene Möglichkeiten Listen semantisch auszuzeichnen. Dabei werden folgende Listentypen unterschieden:

  • ungeordnete Listen (ul-Element)
  • geordnete Listen (ol-Element)
  • Definitionslisten (dl-Element)

Welche der Listen Sie verwenden sollen, hängt von der gewünschten Bedeutung ab.

Ungeordnete Listen werden für einfache Listen verwendet, bei denen die Reihenfolge der Elemente keine Bedeutung hat. Die Liste oben ist ein solches Beispiel. Ungeordnete Listen finden Sie auch häufig im Navigationsbereich einer Webseite. Die Links eines Menüs werden im Allgemeinen semantisch als Listenelemente angesehen und mit dem li-Element ausgezeichnet.

Geordnete Listen werden verwendet, wenn die Reihenfolge für das Verständnis wichtig ist. Eine solche Liste wäre zum Beispiel die Liste der Liedtitel einer Musik-CD. Die einzelnen Titel würden mit dem li-Element als Listenelemente ausgezeichnet.

Mit den Definitionslisten können Sie Begriffe und deren Definitionen auflisten. Ein typische Beispiel für eine Definitionsliste ist ein Wörterbuch oder ein Glossar. Hierbei werden die Begriffe aufgelistet und zu jedem Begriff existiert dann eine Beschreibung oder eine Erklärung. Die Begriffe werden dabei mit dem dt-Element ausgezeichnet und die Beschreibung steht im dd-Element.

Tabellen und Formulare

Für die Verwendung von Tabellen und Formularen stellt HTML zahlreiche semantische HTML-Elemente zur Verfügung. Da der richtige Aufbau von Tabellen und Formularen ein sehr komplexes Thema ist, wurden hierfür zwei extra Abschnitte im BITV-Lotse erstellt. Lesen Sie bitte hierzu die Kapitel "Datentabellen" und "Formulare".

weitere Bedeutungen

Für alle Fälle, in denen Sie die gewünschte Bedeutung nicht mit der gegebenen Semantik der HTML-Elemente wiedergeben können, müssen Sie die Bedeutung der Nutzerin oder dem Nutzer anderweitig mitteilen. Verlassen Sie sich dabei nicht auf die Standarddarstellung der Browser, denn diese können bei der Transformation in ein anderes Format verloren gehen. Nutzen Sie reinen Text, um die Bedeutung zu erläutern. Mit einer einfachen Textpassage, einem Satz oder manchmal auch nur mit einem ausgeschriebenen Wort ist es möglich, eine zusätzliche Erklärung für eine Hervorhebung zu geben.

Wenn Sie zum Beispiel ein Formular verwenden und Sie wollen Pflichtfelder farbig hinterlegen, dann reicht dies nicht aus. Nutzen Sie eine zusätzliche Markierung in der Beschriftung des Eingabefeldes, zum Beispiel ein "*"-Zeichen und zusätzlich einen erläuternden Text zu Beginn des Formulars: "Pflichtfelder sind rot hinterlegt und mit einem *-Zeichen markiert". So würde die Information, dass es sich um ein Pflichtfeld handelt bei einer Transformation, nicht verloren gehen.

Reihenfolge

Die Reihenfolge, mit der alle Elemente auf einer Webseite behandelt werden, wird in der Regel durch den Quellcode festgelegt. Wird eine Webseite in der Reihenfolge des Quellcodes vorgelesen, sollte diese Reihenfolge ein sinnvolles Ergebnis liefern.

Eine "sinnvolle" Reihenfolge bedeutet hier nicht die "beste" oder die "verständlichste" Reihenfolge. Es geht nur darum eine Reihenfolge festzulegen, die einen Sinn ergibt. Wesentlich ist dass es nicht aufgrund eines besonders trickreichen Layouts zu Sprüngen zwischen verschiedenen Inhaltsbereichen kommt. In der Regel ist die Reihenfolge im HTML-Code bereits eine sinnvolle Reihenfolgen.

Ein Beispiel für eine nicht sinnvolle Reihenfolge ergibt sich aus folgendem recht häufig anzutreffenden Problem: Eine Übersichtsseite enthält mehrere Anreißer (Teaser), die zum Weiterlesen verleiten sollen. Die Anreißer bestehen jeweils aus einer Überschrift, einem kurzem Text und einem kleinem Bildelement. Folgendes Bild zeigt einen so aufgebauten Anreißer.

Beispiel-Screenshot: Typischer Anreißer mit Bild, Überschrift und Text Beispiel-Screenshot: Typischer Anreißer mit Bild, Überschrift und Text

Eine sinnvolle Lesereihenfolge wäre in diesem Fall:

  1. Überschrift
  2. Alternativtext des Bildes
  3. Text-Abschnitt

Aus technischen Gründen ist es häufig so, dass zunächst das Bild nach links gesetzt wird und die Texte danach das Bild rechts umfließen. Das Bild steht also im Quellcode vor der Überschrift. Diese Reihenfolge wäre nicht korrekt! Das folgende Bild zeigt links die nicht korrekte Reihenfolge, die sich aus dem Quellcode ergibt und rechts eine korrekte Reihenfolge, wie sie sich aus der optischen Anordnung ergeben würde.

Lesereihenfolgen des Anreißers. Links, eine nicht korrekte Reihenfolge. Rechts, eine der möglichen korrekten Reihenfolgen Lesereihenfolgen des Anreißers. Links, eine nicht korrekte Reihenfolge. Rechts, eine der möglichen korrekten Reihenfolgen

Aus semantischer Sicht, die sich aus dem Quellcode ergibt, gehört das Bild und dessen Alternativtext also zur Überschrift des vorherigen Anreißers. In der Abbildung unten gehört das Bild des nächsten Anreißers zum Thema Lebensmittel semantisch zum Anreißer über das Konsumklima. Diese, sich aus dem Quellcode ergebene Reihenfolge, ist natürlich falsch. Der Quellcode muss umgeschrieben werden.

Beispiel-Screenshot: Semantische Anordnung durch nicht korrekte Lesereihenfolge Beispiel-Screenshot: Semantische Anordnung durch nicht korrekte Lesereihenfolge

Die Webseite des Presse- und Informationsamts der Bundesregierung aus denen dieses Beispiel entlehnt wurde, hat das Problem gut gelöst. Durch geschicktes verschieben der Positionen mittels CSS-Eigenschaften wurde dieselbe optische Anordnung erzielt, obwohl das Bild im HTML-Code korrekt zwischen Überschrift und Text positioniert ist.

Anweisungen und Hinweise

Wenn eine Webseite in andere Layouts, anderen Farbsystemen oder in ganz andere Formate transformiert werden kann, sollten Sie in Ihren Texten nicht ausschließlich auf Formen, Farben, Größen, Positionen und Ausrichtungen hinweisen. Anweisungen wie: "in der rechten Spalte finden Sie", machen nur in der Standarddarstellung des Browsers Sinn. Bei der Verwendung von Nutzer-Clients, die keine Spalten darstellen können, kann nur geraten werden, wo sich die rechte Spalte befindet. Ebenso sind Anweisungen wie: "Klicken Sie den grünen Pfeil um zur nächsten Seite zu gelangen" nicht ausreichend. Eine WCAG-Technik schlägt hier zunächst vor den Pfeil zu Beschriften und dann in der Anweisung auf Form (Pfeil), Farbe (grün), Position (unten rechts) und Beschriftung hinzuweisen.

Besonders wichtig werden solche robusten Anweisungen, wenn Sie größere Anleitungen und Hilfetexte verfassen. Achten Sie immer darauf, dass jede Anweisung auch dann noch greift, wenn die Darstellung nicht mehr der Standarddarstellung eines Browsers entspricht. Denken Sie dabei besonders an vorgelesene Texte eines Screenreaders, Ausdrucke auf einem Schwarz-Weiß-Drucker und Ansichten ohne CSS-Eigenschaften.

Ausblick

Die derzeit noch nicht verabschiedete Spezifikation von HTML5 sieht zahlreiche weitere semantische HTML-Elemente vor. Dazu gehören unter anderem:

<article>
Ein Inhalt der in sich geschlossen ist.
<section>
Ein Abschnitt innerhalb eines Dokuments
<nav>
Navigationsbereich einer Webseite
<header>
Kopfbereich einer Webseite
<footer>
Fußbereich einer Webseite
<aside>
Inhalt der nicht direkt zum Hauptinhalt gehört

Ähnliche semantische Bedeutungen bieten auch die von der WAI-ARIA vorgeschlagenen Landmark-Roles, mit denen die einzelnen Webseitenbereiche durch HTML-Attribute vordefinierte Rollen zugeteilt bekommen. Die so definierten "Landmarken" können dann von assistiven Technologien zu Navigationszwecken genutzt werden. Beide Spezifikationen — HTML5 und WAI-ARIA — verfolgen im Bereich der semantischen Erweiterungen ähnliche Ziele. Beide Technologien sind seitens des W3C noch nicht endgültig verabschiedet. WAI-ARIA genießt zurzeit noch einen Vorsprung bei der Unterstützung von assistiven Technologien. Ob und was von beiden Technologien genutzt werden sollte, ist schwer zu empfehlen. Aus technischer Sicht schadet der Einsatz beider Technologien jedoch nicht.

© Bundesministerium für Arbeit und Soziales, 2016