Barrierefreie Überschriften

WEBRED 20-010

Was Sie wissen müssen

Themenrelevante Überschriften strukturieren den Text auf jeder Webseite. Sie machen die Inhalte schneller erfassbar, ebenso wie Zwischenüberschriften und möglichst kurze Absätze - letztere anstelle von langen "Textwüsten".

Für Sehbehinderte oder Blinde sind diese Überschriften besonders wichtig: Sie können sich mit Screenreadern Überschriften und Links einzeln vorlesen lassen und so die Struktur der Seite vermitteln lassen.

Egal ob sehbehindert oder nicht: Die User Ihrer Seite sowie auch alle Suchmaschinen profitieren von einer logischen Abfolge der Absätze.

Nachfolgend finden Sie Hinweise, wie Sie die vorhandenen Überschriften-Strukturen auf Ihrer Seite analysieren und optimieren sollten.

Was Sie tun müssen

  1. Analyse-Vorbereitung:
    Installieren Sie zunächst als Analyse-Hilfsmittel das Bookmarklet "Überschriften anzeigen". Zu diesem Zweck rufen Sie folgende Seite auf: Bookmarklets. Folgen Sie den Anweisungen auf der Seite, um das Bookmarklet "Überschriften anzeigen" in der Adressleiste ihres Browsers zu hinterlegen.

    • Sie haben das Lesezeichen/Bookmarlet "Überschriften anzeigen" erfolgreich in Ihrer Lesezeichenleiste des Browsers hinterlegt.

    • Bei diesem Lesezeichen handelt es sich nicht um ein gewöhnliches Lesezeichen, welches als Seitenverweis dient, sondern um ein sogenanntes "Bookmarklet". In dem Bookmarklet ist ein Java-Script-Code gespeichert, der auf jeder beliebigen Webseite ausgeführt werden kann. 
      Das für dieses Bookmarklet hinterlegte Script führt nach Ausführung dazu, dass Überschriften auf der aktuell aufgerufenen Webseite visuell hervorgehoben werden.

  2. Analyse:
    Navigieren Sie mit dem Browser auf die Seite, die Sie analysieren möchten und klicken Sie dann einmal auf das Bookmarklet "Überschriften anzeigen", um das Script auszuführen und vorhandene Strukturen automatisch visuell hervorheben zu lassen.

    • Auf Ihrer ausgewählten Seite erscheinen farbige Rahmen um Überschriften mit entsprechenden Kennzeichnungen. 

    • Die verschiedenfarbigen Rahmen sind mit einem Kürzel [h*] gekennzeichnet.
      "h" steht für "heading" und die Zahl kennzeichnet die Hierarchie, also die Reihenfolge. "h1" steht in diesem Fall also für eine Überschrift der ersten Ebene, "h2" für eine Überschrift der zweiten Ebene, usw. Es gibt bis zu sechs Überschriftebenen.

  3. Überschriftenstruktur korrigieren:
    Loggen Sie sich zu diesem Zweck in das TYPO3-Backend ein und navigieren Sie über den Seitenbaum zu der Seite, die Sie zuvor analysiert haben. Bearbeiten Sie dann den Seiteninhalt, in dem sich eine Überschrift befindet, die korrigiert werden soll. Prüfen Sie dazu, ob die besagte Überschrift im Eingabefeld "Überschrift" steht, oder ob sie sich innerhalb des Eingabefelds des Editors befindet. 

    Überschrift befindet sich im Eingabefeld "Überschrift": Wählen Sie im Dropdown "Typ" die passende Überschriftenauszeichnung aus. (siehe Abb. 3.1)

    Überschrift befindet sich innerhalb des Editors: Markieren Sie den Text im Editor und wählen Sie die, zur Überschriftenreihenfolge der Seite passende Überschrift über das Dropdown "Format" aus. (siehe Abb. 3.2)


    Handelt es sich bei dem Text um die erste Überschrift unterhalb der Seitenüberschrift, so wählen Sie  "Überschrift 2. Ebene" aus.

     

    • Wiederholen Sie diesen Vorgang für alle Überschriften auf der Seite und überprüfen Sie zum Schluss noch einmal mit dem Analysetool die Reihenfolge der neuen Struktur auf der gespeicherten Seite.

    • Üblicherweise trägt die Webseite den Seitennamen als erste Überschrift (= "h1", siehe Abb. 2.1). Eine h1-Überschrift sollte auf einer Webseite nur einmal vorkommen, deswegen wird diese Überschrift für den Seitentitel verwendet. Bitte beginnen Sie Ihre Struktur in diesem Fall mit einer Überschrift 2 ("h2")!

    • Sinnvolle Struktur: Sorgen Sie für eine "sinnvolle" Überschriftenstruktur. "Sinnvoll" bedeutet, dass Sie sich im Vorfeld überlegen, wie Sie Ihre Texte untergliedern wollen, und im Anschluss Überschriften auch als Überschriften auszeichnen. D.h. Überschriften sollten nicht nur "fett gestellt", oder anderweitig ausgezeichnet werden, sondern mit einer der Größen "h1-h6" ausgezeichnet sein . Nur dann sind sie auch für Screenreader als Überschrift erkennbar.

    • Reihenfolge beibehalten: Sie sollten immer gewährleisten, dass keine Überschriftsebenen übersprungen werden: Auf eine h1-Überschrift sollten immer h2-Überschriften folgen. Als Unterüberschriften nach einer h2 sollten dann h3-Überschriften folgen. Bitte bringen Sie diese Zahlenreihenfolge nicht durcheinander, indem Sie nach einer h1- Überschrift z.B. eine h3-, oder h4-Überschrift einfügen und die zweite Überschriftsebene überspringen.

  4. Überschriften optisch anpassen:
    Nutzen Sie das Dropdown "Überschrift anzeigen als", sowie den Schalter"Bereichsüberschrift", um die optische Auszeichnung für das Frontend anzupassen.

    • Rechts neben dem Dropdown "Typ" befindet sich ein weiteres Dropdown mit der Bezeichnung "Überschrift anzeigen als". Wählen Sie hier aus wie Ihre Überschrift im Frontend optisch dargestellt werden soll. 

    • Unterhalb dem Dropdown "Typ" befindet sich nun ein Schalter mit der Bezeichnung "Bereichsüberschrift". Aktivieren Sie den Schalter, wenn Sie möchten, dass Ihre Überschrift eine Bereichsüberschrift sein soll. (Bereichsüberschriften werden mit einer Trennlinie versehen)

    • Die Überschrift besitzt nun neben der strukturellen auch die korrekte optische Auszeichnung.

    • Bitte verwechseln Sie nicht das Dropdown "Überschrift anzeigen als" mit "Typ": Der ausgewählte Wert unter "Überschrift anzeigen als" beeinflusst nicht die HTML-Struktur, da das Styling durch CSS-Klassen realisiert wird und auf diese Weise Auszeichnungen über die Struktur gelegt werden.

    • Das Corporate Design der Hochschulwebseite legt die optische Auszeichnung aller auf der Webseite befindlichen Strukturelemente fest. Daraus leitet sich auch die optische Gestaltung der Überschriften ab. 

Probleme oder Fragen?

IMZ | IT-Applications

FU C 1.16

Schreiben Sie ein Ticket an "Website" auf servicedesk.hs-furtwangen.de.