Navigation und Service

Einfach teilhaben (Link zur Startseite)


Anpassbares Layout

Begründung

Viele Menschen haben Probleme, Informationen und Strukturen auf Webseiten wahrzunehmen. Betroffen sind hierbei unter anderem blinde und sehbehinderte Menschen, aber auch Personen, die mit besonderen Ein- und Ausgabegeräten wie Smartphones oder ähnlichem arbeiten. Um eine Webseite wahrzunehmen, kann es für diese Nutzerinnen und Nutzer nötig sein, die Webseite so zu transformieren, dass die Seitenansicht von der normalen Darstellung abweicht. Die Umwandlung in Sprache, die Ansicht in einem Schwarz-Weiß-Kontrastmodus oder die extreme Vergrößerung der Webseite gehören genauso zu diesen Transformationen, wie die einspaltige Darstellung in einigen Smartphones.

Um diesen Personen eine Transformation der Darstellung oder des Formats zu ermöglichen, ist es wichtig, alle Strukturen und Informationen in einer Form zur Verfügung zu stellen, die durch Software erkannt werden kann. Nur wenn die Software, die die Nutzerin oder der Nutzer verwendet, alle Informationen und Strukturen erkennt, kann die Software die Information in eine für die Nutzerin oder den Nutzer benötigten Form übertragen. Überschriften können, wenn sie als Überschrift gekennzeichnet wurden, zum Beispiel von einem Screenreader akustisch hervorgehoben werden oder es kann automatisch ein Inhaltsverzeichnis als Übersicht der Webseite erstellt werden. Fehlt diese Strukturinformation, weil etwa nur die Schrift vergrößert wurde und die Überschrift nicht als solche gekennzeichnet wurde, geht diese Information verloren.

In diesem Abschnitt werden Techniken vorgestellt, die gewährleisten sollen, dass alle Informationen, die durch Struktur und Inhalt einer Webseite mitgeteilt werden, auch bei Veränderungen der Darstellung oder des Formats erhalten bleiben. Dieser Abschnitt behandelt nicht die Techniken, die nötig sind, um auch die normale Darstellung einer Webseite für Menschen mit Behinderungen zugänglich zu machen. Information hierzu behandelt der Abschnitt "Trennung von Vorder- und Hintergrund".

Ziel der BITV ist es, Inhalte so anzubieten, dass diese für die Bedürfnisse von Menschen, die mit besonderen Ein- und Ausgabegeräten arbeiten, ohne Informationsverlust transformiert werden können.

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.

Beispiele

Überschriften

Das erste Beispiel zeigt einen typischen Artikel auf einer Webseite. Der Artikel wurde zur besseren Übersicht mit Überschriften versehen. Der Ausschnitt zeigt zwei Abschnitte, wobei der zweite durch eine Überschrift eingeleitet wird

Beispiel-Screenshot: Textabschnitte mit einer Überschrift Beispiel-Screenshot: Textabschnitte mit einer Überschrift

Die ersten zwei Code-Beispiele sind Negativbeispiele und zeigen zwei Fehler, die sehr häufig auf Webseiten zu finden sind. Beide Beispiele versuchen den obigen Webseiten-Ausschnitt optisch nachzubilden. Im ersten Fall wurde versucht das Aussehen eines normalen Textabschnitts so zu verändern, dass der optische Eindruck einer Überschrift entsteht:

<!-- Bitte, so nicht!!! -->
<p>
   ... hin zur Weimarer Republik gezogen werden kann.
</p>
<p style="font-size:18px;font-weight:bold">
   Föderalismus im Grundgesetz
</p>
<p>
   Im Grundgesetz für die Bundesrepublik Deutschland ist 
   der Föderalismus als politische Organisationsform festgeschrieben. 
   Schon die Präambel bringt zum Ausdruck, dass die Bundesrepublik 
   aus mehreren Gliedstaaten ...
</p>

Ebenso ist es falsch, die Überschrift lediglich aus einer Grafik nachzubilden, wie es das nächste Quellcode-Beispiel versucht. Bitte beachten Sie, dass es durch die Verwendung von Schriftgrafiken auch zu Problemen bei der Erfüllung weiterer BITV-Bedingungen kommen kann.

<!-- Bitte, so nicht!!! -->
<p>
   ... hin zur Weimarer Republik gezogen werden kann.
</p>
<div>
   <img src="header2.png" alt="Föderalismus im Grundgesetz"/>
</div>
<p>
   Im Grundgesetz für die Bundesrepublik Deutschland ist 
   der Föderalismus als politische Organisationsform festgeschrieben. 
   Schon die Präambel bringt zum Ausdruck, dass die Bundesrepublik 
   aus mehreren Gliedstaaten ...
</p>

Auch wenn die Verwendung von Überschriften in jedem HTML-Volkshochschulkurs in den ersten Stunden behandelt wird, soll der folgende Quellcode-Ausschnitt nochmals die korrekte Verwendung der Überschriftelemente h1 bis h6 zeigen:

<p>
   ... hin zur Weimarer Republik gezogen werden kann.
</p>
<h4>
   Föderalismus im Grundgesetz
</h4>
<p>
   Im Grundgesetz für die Bundesrepublik Deutschland ist 
   der Föderalismus als politische Organisationsform festgeschrieben. 
   Schon die Präambel bringt zum Ausdruck, dass die Bundesrepublik 
   aus mehreren Gliedstaaten ...
</p>

Das eigentliche Aussehen kann dann später durch die entsprechenden CSS-Eigenschaften angepasst werden, zum Beispiel durch:

#article h4 {
   font-family: sans-serif;
   font-size:   132%;
   font-weight: bold;
   line-height: 1.5em
   color:       #303030
} 

Häufig werden Überschriften auch verwendet, um eine Webseite für Nutzerinnen und Nutzern von Screenreadern in einzelne Seitenbereiche wie Navigation, Hauptbereich und Werbung aufzuteilen. Diese Überschriften sollen zwar vorgelesen werden, aber nicht unbedingt für alle Menschen sichtbar sein. Die CSS-Eigenschaften display:none oder visibility:hidden bewirken zwar, dass die Überschriften nicht sichtbar sind, aber leider lesen die meisten Screenreader die Überschriften auch nicht vor. Auf den meisten Webseiten werden nicht sichtbare Überschriften deshalb einfach nur mittels CSS-Eigenschaften aus dem sichtbaren Bereich des Bildschirms verschoben.

h2.audio_only {
   left: -32768px;
   position: absolute;
   top: -32768px;
}
...
<h2 class="audio_only">Hauptnavigation</h2>
   <ul>
    ...
   </ul>
<h2 class="audio_only">Inhaltsbereich</h2>
   <h3>Willkommen auf der Webseite des ...</h3>
   <p>...</p>

Hervorhebung

In dem Satz "Bei der Bundestagswahl haben Sie zwei Stimmen!" wird das Wort "zwei" als besonders wichtig angesehen, deshalb soll es hervorgehoben werden. Im folgenden Beispiel wurde das strong-Element zur Texthervorhebung verwendet.

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

In der normalen Darstellung des Browsers würde das Wort "zwei" dann in einer fetten Schrift dargestellt werden.

Beispiel-Screenshot: Standardhervorhebung eines Wortes mittels strong-Elements Beispiel-Screenshot: Standardhervorhebung eines Wortes mittels strong-Elements

Es ist aber möglich die Darstellung mittels CSS-Eigenschaften beliebig zu verändern. Folgende CSS-Eigenschaften würde das Wort in einer vergrößerten, roten Schrift mit einem Schlagschatten auf grünen Hintergrund darstellen:

font-size:130%;
color:darkred;
background-color:lightgreen;
text-shadow:2px 2px 3px #888;

Beispiel-Screenshot: Hervorhebung eines Wortes mittels mehrerer CSS-Eigenschaften Beispiel-Screenshot: Hervorhebung eines Wortes mittels strong-Elements und verschiedenen CSS-Eigenschaften

Unabhängig von der jeweiligen Darstellung kann jeder Browser und jede assistive Technologie, wie etwa ein Screenreader, die Hervorhebung durch das strong-Element erkennen und die Nutzerin oder den Nutzer auf dieses Wort gesondert hinweisen. Folgendes Bild zeigt die Ansicht der Hervorhebung in einem speziellen Reader auf einem Smartphone.

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

Listen

Das folgende Beispiel zeigt eine Liste der aktuellen Vertreter der Bundeskanzlerin, wie sie sich aus der Geschäftsordnung der Bundesregierung ergibt.

Da die Liste die Vertretungsreihenfolge zeigen soll, ist die Reihenfolge der Einträge eine wesentliche Information. Entsprechend dieser Semantik muss das Listenelement ol für geordnete Listen gewählt werden. Die angezeigte Nummerierung wird vom Browser erzeugt.

Beispiel-Screenshot: Eine einfache geordnete Liste Beispiel-Screenshot: Eine einfache geordnete Liste

<h4>Vertretungsreihenfolge der Bundeskanzlerin</h4> 
<ol>
   <li>Philipp Rösler</li>
   <li>Wolfgang Schäuble</li>
   <li>Thomas de Maizière</li>
   <li>Annette Schavan</li>
   <li>Ursula von der Leyen</li>
   <li>...</li>
</ol>

Menüs im Navigationsbereich von Webseiten werden in der Regel als Auflistungen von Links gesehen. Entsprechend zeigt das folgende Beispiel eine ungeordnete Liste, die durch das ul-Element erzeugt wurde.

<h4>Unsere Themen</h4>
<ul>
   <li><a href="schwerpunkte.html">Schwerpunkte</a></li>
   <li><a href="arbeitsmarkt.html">Arbeitsmarkt</a></li>
   <li><a href="arbeitsrecht.html">Arbeitsrecht</a></li>
   <li><a href="arbeitsschutz.html">Arbeitsschutz</a></li>
   <li><a href="ausbildung.html">Aus- und Weiterbildung</a></li>
   <li><a href="sicherung.html">Soziale Sicherung</a></li>
   ...
</ul>

Mittels CSS-Eigenschaften wurde das Aussehen der Liste an das bekannte Aussehen eines typischen Menüblocks angepasst.

Beispiel-Screenshot: Eine einfache Liste, so durch CSS-Eigenschaften formatiert, dass sie einem üblichen vertikalen Menü entspricht Beispiel-Screenshot: Eine einfache Liste, so durch CSS-Eigenschaften formatiert, dass sie einem üblichen vertikalen Menü entspricht

Beide Listentypen — geordnete und ungeordnete — können auch hierarchisch angeordnet werden. Der HTML-Code der Listen muss dann ineinander verschachtelt werden. Achten Sie bitte darauf, dass die tiefer liegende Liste Teil des übergeordneten Listenelements ist und deshalb auch von dessen öffnenden und schließenden li-Tags umschlossen wird.

<h4>Unsere Themen</h4>
<ul>
  <li><a href="schwerpunkte.html">Schwerpunkte</a></li>
  <li><a href="arbeitsmarkt.html">Arbeitsmarkt</a>
    <ul>
     <li><a href="arbeitsfoerderung.html">Arbeitsförderung</a></li>
     <li><a href="arbeitsvermittlung.html">Arbeitsvermittlung</a></li>
     <li><a href="arbeitslosengeld.html">Arbeitslosengeld</a></li>
     <li><a href="grundsicherung.html">Grundsicherung</a></li>
     ...
    </ul>
  </li>
  <li><a href="arbeitsrecht.html">Arbeitsrecht</a></li>
  <li><a href="arbeitsschutz.html">Arbeitsschutz</a></li>
  ...
</ul>

Das letzte Listenbeispiel zeigt einen Ausschnitt des Glossars zur BITV 2.0. Das Glossar ist ein typisches Beispiel für eine Aufzählung, bei dem eine Definitionsliste verwendet werden sollte.

Beispiel-Screenshot: Ein Glossar als Definitionsliste Beispiel-Screenshot: Ein Glossar als Definitionsliste

<h4>Glossar</h4>
<dl>
   ...
   <dt>Benutzerschnittstelle</dt>
   <dd>
      Ermöglicht Eingaben der Nutzerinnen und Nutzer und legt die 
      Darstellung dieser Eingaben fest.
   </dd>
   ...
</dl>

Zitate

Das Beispiel zeigt gleich zwei Möglichkeiten, ein Zitat mittels HTML-Element kenntlich zu machen. Im ersten Textabschnitt wurde für den Satz "Ich bin ein Berliner" ein innerzeiliges Zitat verwendet. Danach folgen zwei Zitatblöcke, die jeweils eigene Textabschnitte beinhalten.

Beispiel-Screenshot: Ein Inline-Zitat und zwei Blockzitate Beispiel-Screenshot: Ein Inline-Zitat und zwei Blockzitate

Das innerzeilige Zitat wurde durch das q-Element erzeugt. Für die beiden Zitatblöcke wurde das blockquote-Element verwendet. Innerhalb des blockquote-Elements müssen die Textabschnitte nochmals durch ein p-Element erzeugt werden. Mit dem Attribut cite im einleitenden blockquote-Tag wurde hier noch eine Webadresse der zitierten Quelle angeben. Da einige Browser automatisch ein Zitat durch Anführungszeichen ergänzen und andere Browser dies nicht tun, ist es sinnvoll in den CSS-Eigenschaften die Anführungszeichen pauschal zu entfernen und diese anschließend bei Bedarf manuell in den HTML-Code einzufügen.

blockquote:before, 
blockquote:after, 
q:before, 
q:after 
   {content:none;}
...
<p>
   Der Ausspruch <q>"Ich bin ein Berliner"</q> kam in der 
   Rede von John F. Kennedy am 26. Juni 1963 vor dem Rathaus 
   Schöneberg in Berlin zweimal vor.
</p>
<blockquote cite="http://www.berlin.de/">
   <p>
      Vor zweitausend Jahren war der stolzeste Satz ‚Ich bin ein 
      Bürger Roms‘. Heute, in der Welt der Freiheit, ist der 
      stolzeste Satz ‚Ich bin ein Berliner‘.
   </p>
</blockquote>
<blockquote cite="http://www.berlin.de/">
   <p>
      Alle freien Menschen, wo immer sie leben mögen, sind Bürger 
      Berlins, und deshalb bin ich als freier Mensch stolz darauf,
      sagen zu können ‚Ich bin ein Berliner‘!
   </p>
</blockquote>

Reihenfolge

Die nächste Abbildung zeigt einen Ausschnitt einer typischen Artikelübersicht einer Nachrichtenseite. Für jeden Artikel ist hier ein kurzer Anreißer aus Überschrift, einem kleinen Bild, einer kurzen Textpassage und dem Link zum vollständigen Artikel dargestellt.

Beispiel-Screenshot: Typischer Anreißer mit Bild, Überschrift und Text Beispiel-Screenshot: Ein typischer Anreißer eine Nachrichtenseite

Der erste Quellcode demonstriert mit vereinfachten Mitteln, wie eine solche Übersichtseite häufig erstellt wird. Zunächst wird das Bild an die linke Seite gestellt (im CSS: float:left). Danach werden die Überschrift und der Text rechts neben das Bild platziert. Leider ist bei dieser Lösung die Reihenfolge des HTML-Codes nicht mehr korrekt. Das Bild steht im Code vor der Überschrift und gehört damit semantisch zur vorherigen Überschrift.

 <!-- Bitte, so nicht!!! -->
.teaser {clear:left;}
.teaser img {width:150px;float:left;}
.teaser h2 {margin-left:150px;padding-left:1em}
.teaser p {margin-left:150px;padding-left:1em}
...
<div class="teaser">
   <img src="teaser1.jpg" alt="Frau mit Einkaufstüten telefoniert"/>
   <h2>
      <a href="Konsumklima.html">
         Konsumklima Verbraucher in Sommerlaune
      <a>
   </h2>
   <p>
      Die Verbraucher sehen die deutsche Wirtschaft 
      weiter im Aufschwung: Die konjunkturellen Aussichten 
      schätzen sie deutlich optimistischer ein als im Vormonat. 
      <a href="#">mehr</a>
   </p>
</div>

Im nächsten Code-Ausschnitt wurde eine korrekte Reihenfolge im HTML-Quellcode eingehalten. Das CSS ist ähnlich aufgebaut, nur wurde das Bild um die Höhe der Überschrift nach oben verschoben (margin-top:-1.4em). Bitte beachten Sie, dass dieser Quellcode lediglich das Prinzip der Anordnung demonstriert, eine in allen Browsern funktionierende Lösung erfordert eventuell noch weitere CSS-Eigenschaften.

 <!-- Achtung, dieser Code soll lediglich 
      zur Demonstration dienen !!! -->
.teaser {clear:left;}
.teaser img {width:150px;float:left;margin-top:-1.4em}
.teaser h2 {font-size:1.2em;margin-left:150px;padding-left:1em}
.teaser p {margin-left:150px;padding-left:1.2em}
...
<div class="teaser">
   <h2>
      <a href="Konsumklima.html">
         Konsumklima Verbraucher in Sommerlaune
      <a>
   </h2>
   <img src="teaser1.jpg" alt="Frau mit Einkaufstüten telefoniert"/>
   <p>
      Die Verbraucher sehen die deutsche Wirtschaft 
      weiter im Aufschwung: Die konjunkturellen Aussichten 
      schätzen sie deutlich optimistischer ein als im Vormonat. 
      <a href="#">mehr</a>
   </p>
</div>

Texthinweise

Diese Beispiele demonstrieren wie Anweisungen in Hilfe-Texten unverständlich werden und ins Leere laufen, wenn die Nutzerin oder der Nutzer ein besonderes Ausgabegerät benutzt und wie dieser Informationsverlust vermieden werden kann.

Die Abbildung unten zeigt eine Liste von Publikationen. Einige Publikationen sind neu erschienen und dies sollte in der Liste kenntlich gemacht werden. Es wurde sich dafür entschieden, die neuen Publikationen in einer fett gesetzten Schrift darzustellen. Der alleinige Hinweis darauf, dass die fett geschriebenen Titel neue Publikationen kennzeichnen, reicht nicht aus. Ein Text mit einer durch CSS-Eigenschaften erzeugten Fettschrift wird zum Beispiel von einem Screenreader wie jeder andere Text behandelt. Die Information geht also verloren und der Hinweis läuft ins Leere. Das Beispiel zeigt eine Möglichkeit, wie die Information möglichst erhalten bleibt. Hinter jeder neuen Publikation wurde einfach das Wort "neu" hinzugefügt. Natürlich wäre es auch möglich eine kleine Grafik mit entsprechendem Alternativtext einzusetzen.

Beispiel-Screenshot: Hinweis auf ein rein optisches Merkmal Beispiel-Screenshot: Hinweis auf ein rein optisches Merkmal

Ein Hinweis wie "Um weitere Suchergebnisse zu erhalten, klicken Sie den grünen Pfeil am Ende der Ergebnisse." versucht durch Form, Farbe und Position im Layout eine Anleitung zur Benutzung zu geben. Jeder dieser Eigenschaften könnte aber ebenfalls verloren gehen. Nur eine Textbeschriftung würde in allen Ausgabemöglichkeiten erhalten bleiben und der Hinweis würde immer verstanden werden.

Beispiel-Screenshot: Hinweis auf einen Link der durch Form, Farbe, Position im Layout und einer Beschriftung gekennzeichnet wurde Beispiel-Screenshot: Hinweis auf einen Link der durch Form, Farbe, Position im Layout und einer Beschriftung gekennzeichnet wurde

BITV 1.0 zu BITV 2.0

Die Bedingungen der BITV von 2002 zur Anpassbarkeit des Ausgabeformats decken bei der Verwendung von HTML weitgehend auch die Bedingungen der BITV 2.0 ab. Einige Techniken zur Erfüllung der BITV 2.0 waren in der BITV 1.0 noch eigenständige Bedingungen, so z.B. die Forderung nach semantischen Strukturen wie Überschriften, Listen und Zitaten. Andere, wie die Bedingung der aussagekräftigen Reihenfolge oder die Forderung, dass Anweisungen sich nicht nur auf die Nutzung von sensorischen Merkmalen stützen, sind implizit ebenfalls bereits in der BITV 1.0 vorhanden. Bedingung 1.3.2 "Aussagekräftige Reihenfolge" kann zum Beispiel aus der BITV 1.0-Bedingung abgeleitet werden, dass Seiten auch ohne Style-Sheets verwendbar bleiben müssen. Die BITV 2.0 bzw. die WCAG in ihren Technik-Dokumenten ist hier allerdings wesentlich exakter in ihren Bedingungen.

Im Allgemeinen wurde die BITV 1.0 in der Vergangenheit so interpretiert, dass eine Webseite, die die BITV 1.0 erfüllt, auch die in diesem Abschnitt benannten BITV 2.0-Bedingungen erfüllen sollte. Überprüft werden sollten allerdings die Hilfetexte und Anleitungen der Webseite. Die Erfahrung zeigt, dass hier häufig Nachholbedarf besteht und die Texte nicht den BITV 2.0-Bedingungen genügen.

© Bundesministerium für Arbeit und Soziales