Techniken für WCAG 2.0

Zum Inhalt

-

H42: Benutzung von h1-h6, um Überschriften zu kennzeichnen

Anwendbarkeit

HTML und XHTML

Die Technik bezieht sich auf:

Beschreibung

Das Ziel dieser Technik ist es, HTML und XHTML Überschriften-Markup zu benutzen, um semantischen Code für Überschriften im Inhalt bereitzustellen. Überschriften-Markup ermöglicht es assistierenden Techniken, einem Benutzer den Überschriften-Status von Text zu präsentieren. Ein Screenreader kann den Code erkennen und den Text als Überschrift mit dessen Ebene ankündigen, piepen oder einen anderen auditiven Indikator bereitstellen. Screenreader können das Überschriften-Markup auch navigieren, was für Screenreader-Benutzer eine effektive Möglichkeit sein kann, um den den Inhalt, der für sie von Interesse ist, schneller zu finden.. Assistierende Techniken, welche die vom Autor erstellte visuelle Anzeige ändern, sind ebenfalls dazu in der Lage, eine angemessene alternative visuelle Darstellung für Überschriften, die durch das Überschriften-Markup identifiziert werden können, bereitzustellen.

Beispiele

Beispiel 1: Hierarchische Überschriften-Gliederung

Im folgenden Beispiel werden Überschriften in einem hierarchischen Layout benutzt mit h3 als Unterbereich von h2, was ein Unterbereich von h1 ist.

Code-Beispiel:

			<h1>Plant Foods that Humans Eat</h1>
<p>There are an abundant number of plants that humans eat...</p>
<h2>Fruit</h2>
<p> A fruit is a structure of a plant that contains its
  seeds...</p>
<h3>Apple</h3>
<p>The apple is the pomaceous fruit of the apple tree...</p>
<h3>Orange</h3>
<p>The orange is a hybrid of ancient cultivated origin...</p>
<h3>Banana</h3>
<p>Banana is the common name for herbaceous plants ...</p>
<h2>Vegetables</h2>
<p>A vegetable is an edible plant or part of a plant other than a
  sweet fruit ...</p>
<h3>Broccoli</h3>
<p>Broccoli is a plant of the mustard/cabbage family ... </p>
<h3>Brussels sprouts</h3>
<p>The Brussels sprout of the Brassicaceae family, is a Cultivar
  group of wild cabbage ...</p>
<h3>Green beans</h3>
<p>Green beans have been bred for the fleshiness, flavor, or
  sweetness of their pods...</p>

Beispiel 2: Überschriften in einem 3-spaltigen Layout

In diesem Beispiel ist der primäre Inhalt der Seite in der mittleren Spalte einer 3-spaltigen Seite. Der Titel des primären Inhalts entspricht dem Titel der Seite und ist als h1 ausgezeichnet, auch wenn es nicht die erste Sache auf der Seite ist. Der Inhalt in der ersten und dritten Spalte ist weniger wichtig und mit h2 ausgezeichnet.

Anmerkung: Es ist wichtig zu beachten, dass der unten stehende Beispiel-Code dazu gedacht ist zu zeigen, wir man Überschriften benutzen kann, um Blöcke an Informationen zu umgehen. Er ist nicht dazu gedacht vorzuschreiben, welche Überschriftenebene für einen bestimmten Bereich der Webseite benutzt werden sollte. In dem Beispiel könnte das Layout mit der ersten Überschrift in jeder Spalte auf der gleichen logischen Ebene (wie zum Beispiel einer h1) dargestellt werden oder so, wie man in dem Beispiel sieht, wo die logische Ebene seine Wichtigkeit in Relation zum primären Inhalt widerspiegelt.

Code-Beispiel:

			<head>
 <title>Stock Market Up Today</title>
 </head>

 <body>

 <!-- left nav -->
 <div class="left-nav">
 <h2>Site Navigation</h2>
 <!-- content here -->
 </div>

 <!-- main contents -->
 <div class="main">
 <h1>Stock Market up today</h1>
 <!-- article text here -->
 </div>

 <!-- right panel -->
 <div class="left-nav">
 <h2>Related links</h2>
 <!-- content here -->
 </div>
 </body>

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Tests

Vorgehensweise

  1. Prüfen Sie, ob ein Überschriften-Markup benutzt wird, wenn es sich bei dem Inhalt um eine Überschrift handelt.

  2. Prüfen Sie, ob ein Überschriften-Markup nicht benutzt wird, wenn es sich bei dem Inhalt nicht um eine Überschrift handelt.

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.