Verwendung von Überschriften

Überschriften gliedern den Seiteninhalt und machen die Struktur einer Seite besser erfassbar – für Besucher ebenso wie für Suchmaschinen und unterstützende Technologien wie Screenreader.

Jede Seite sollte genau eine H1-Überschrift enthalten – in der Regel im oberen Bereich des Inhalts als übergeordnete Überschrift der Seite. Weitere Überschriften wie H2 und H3 können im Verlauf der Seite eingesetzt werden, um Inhalte klar zu strukturieren.

Wichtig ist dabei eine semantisch korrekte Reihenfolge: Die Gliederung soll die inhaltliche Hierarchie widerspiegeln. Eine H3 sollte nur verwendet werden, wenn zuvor eine H2 gesetzt wurde – also nicht direkt nach der H1 ohne Zwischenschritt.

Beispiel: Eine H2 mit der Überschrift Anfahrt kann durch H3-Überschriften wie Lageplan und Parkmöglichkeiten sinnvoll ergänzt werden.

Eine konsistente, semantisch sinnvolle Überschriftenstruktur verbessert die Lesbarkeit, erhöht die Barrierefreiheit und unterstützt die Suchmaschinenoptimierung.

Typografische Feinheiten

• Bei Wert-, Gewichts- und Maßangaben sollte ein schmales Leerzeichen verwendet werden. Es kann aus folgenden Beispielen kopiert werden:

  • 24 px
  • 10 kg
  • 14:00 Uhr
  • 25° C

  Im HTML-Modus (Quellcode) kann es als   eingegeben werden.

  Dieses Zeichen ist nicht zu verwechseln mit dem geschützten Leerzeichen (  – non-breaking space), welches nicht umbricht, aber die normale Breite eines Leerzeichens hat.

  Wenn ein schmales und zugleich nicht umbrechbares Leerzeichen benötigt wird, kann das narrow no-break space   verwendet werden. Für dieses gibt es allerdings keine gängige Bezeichnung oder Tastenkombination.

• Anführungszeichen sollten zur jeweiligen Textsprache passen:

  • Für deutsche Texte: „…“ und ‚…‘
  • Für englische Texte: “…” und ‘…’
  • Für französische Texte: « … » (mit schmalem Leerzeichen innen)

  Einheitliche typografische Anführungszeichen verbessern die Lesbarkeit und die formale Qualität des Textes. Wo nötig, lassen sie sich manuell einfügen oder im RTE über das Sonderzeichen-Menü auswählen.

• Für Einschübe, Gliederungen oder Spannweiten sollte der typografische Gedankenstrich (–) verwendet werden, nicht der kurze Bindestrich (-).

  Beispiel: Die Veranstaltung findet von 14–18 Uhr statt.

  Der Gedankenstrich kann entweder über die Tastenkombination Alt + 0150 (Windows) bzw. ⌥ + - (Mac) eingegeben oder im HTML-Modus als – geschrieben werden.

1. Alternativtexte für Bilder eingeben (entweder im Inhaltselement, oder im Modul "Dateiliste")
   Nicht verlinkte informationsorientierte Grafiken und Bilder müssen mit Alternativtexten versehen werden. Die Alternativtexte ersetzen das Bild, sie sollen also (wenn möglich) dieselbe Aufgabe erfüllen wie das Bild.
   Siehe BIK BITV-Test – Prüfschritt 9.1.1.1b
   Eine Grafik, die keine informative Funktion hat, benötigt keinen Alternativtext.
   Siehe BIK BITV-Test – Prüfschritt 9.1.1.1c
2. Überschriften zum gliedern der Inhalte in semantisch korrekten Abfolge nutzen, s.u. bei „Verwendung von Überschriften“.

3. Keine doppelten Umbrüche eingeben, Text-Absätze nutzen.
   Siehe BIK BITV-Test – Prüfschritt 9.1.3.1d

   Technisch etwas anspruchsvoller wird es, wenn Absätze in Punkt- oder Aufzählungslisten genutzt werden sollen (wie hier in diesem Beispiel). Das geht bislang nur über den Quellcode (<p>…</p>), wird aber nur sehr selten benötigt.

4. Aussagekräftige Linktexte
   Ziel oder Zweck des Links sollen aus dem Linktext hervorgehen oder aus dem direkten Kontext des Links ermittelbar sein.
   Falls Links nicht auf HTML-Seiten verweisen, soll der Link über das Dateiformat des Zieldokuments informieren.
   Siehe BIK BITV-Test – Prüfschritt 9.2.4.4
5. Sinnvolle Seitentitel
   Siehe Title Tag: was ist er und wie nutze ich ihn? - SISTRIX
   Hinweis: Die Seitentitel werden automatisch ergänzt durch den angehängten Zusatz " | Firmenname". Ausgenommen hiervon ist die Startseite.