
Visuelle Darstellung von Überschriften
Überschriften sollten visuell den Inhalt gut strukturieren und möglichst gut lesbar sein. Die intuitive und effiziente Wahrnehmung des Inhalts kann auf diese Weise erleichtert werden.
Abgesehen von Kontrastanforderungen beziehen sich die folgenden Empfehlungen weithin auf Überlegungen zur Nutzungsfreundlichkeit (Useability).
Absatzformatierungen
Zur visuellen Differenzierung gegenüber anderen Blockelementen auf einer Webseite stehen folgende Darstellungsmöglichkeiten zur Verfügung:
Vertikale Abstände
Der Abstand zum darüber gelegenen Blockelement ist gewöhnlich signifikant größer als zwischen einfachen Absätzen oder Listenelementen. Auch unterhalb wird der Abstand meist leicht erhöht.
Einrücken und Zentrieren
Der horizontale Abstand wird links gegenüber anderen Blockelementen erhöht.
Bei der Verwendung einer Vergrößerungssoftware kann bei einem größeren linken Abstand vom gewöhnlichen Textbereich eine Überschrift übersehen werden. Wird der gezoomte Bereich lediglich vertikal bewegt kann die Überschrift außerhalb des Zoomfensters bleiben. Für Menschen, die eine Lupenfunktionalität verwenden oder Gesichtsfeldausfälle aufweisen, sollten Elemente weithin linksbündig angeordnet sein.
Überschriftenebenen visuell differenzieren
Gestaltungsmöglichkeiten sollten auch zur Differenzierung von Überschriftenebenen herangezogen werden. Untergeordnete Überschriften werden visuell weniger hervorgehoben.
Aktuell werden Überschriften auf Zweiter Blick folgendermaßen visuell abgestuft:
Ebene 1
Ebene 2
Ebene 3
Ebene 4
Ebene 5
Ebene 6
Schriftgestaltung
Schriftgrößen
Die Schriftgröße stellt einen zentralen Indikator für eine Überschrift dar. Innerhalb eines Seitenbereichs wie dem Hauptinhalt werden darüber hinaus Überschriftenebenen durch abgestufte Schriftgrößen hervorgehoben.
Schriftfarbe und Hintergrund
Die Änderung der Schriftfarbe oder Hintergrundfarbe als visueller Indikator für Überschriften birgt einige Herausforderungen in sich:
- Der Helligkeitsunterschied der Farbe zu anderen Elementen muss signifikant sein, sofern die visuelle Differenzierung lediglich auf einer Farbänderung beruht. Unterscheiden sich etwa Überschriftenebenen nur farblich, sollte der Unterschied mindestens 3 ∶ 1 betragen.
- Werden auf dem Webauftritt alternative Farbschemata zur Darstellung angeboten, müssen auch diese entsprechend konfiguriert werden.
- Ein ausreichender Mindestkontrast zwischen Schrift und Hintergrund muss gewährleistet bleiben.
Schriftarten
Da Überschriften vor allem auch das diagonale Lesen erleichtern, sollten sie allgemein über eine gut lesbare Schriftart verfügen.
Ungewöhnliche Schriftarten, die als Textgrafik in eine Überschrift eingefügt werden müssen, sollten vermieden werden. Eine Abbildung von Text muss im Wesentlichen Logos vorbehalten bleiben.
Unterstreichung
Überschriften sollten auf Webseiten und digitalen Dokumenten nicht grundsätzlich solid unterstrichen werden. Eine Unterstreichung hat sich als Indikator für Links durchgesetzt und sollte diesen daher vorbehalten bleiben.
Es spricht aber nichts dagegen, Überschriften gepunktet, strichliert oder doppelt zu unterstreichen. Vorausgesetzt ist lediglich, dass derartige Formatierungen auf dem Webauftritt nicht gleichzeitig als Fokusindikator verwendet werden.
CSS zur technischen Realisierung
Die visuelle Darstellung von Überschriften sollte weithin über CSS-Dateien für den gesamten Webauftritt erfolgen. Dies gewährleistet ein einheitliches Erscheinungsbild und die Wiedererkennbarkeit der Semantik.
Gestaltungsmöglichkeiten durch CSS-Anweisungen
Für die bereits angeführten und weitere Gestaltungsmöglichkeiten stehen in CSS typischerweise folgende Anweisungen zur Verfügung (alphabetisch sortiert):
background
- Festlegen einer Hintergrundfarbe oder einer Hintergrundgrafik.
- Beispiel: background: red
-
MDN |
background
color
- Festlegen der Schriftfarbe.
- Beispiel: color: green
-
MDN |
color
font-family
- Festlegen der Schriftart (mit oder ohne Serifen, …)
-
Beispiele:
- font-family: serif
- font-family: sans-serif
- font-family: monospace
-
MDN |
font-family
font-size
- Festlegen der Schriftgröße.
-
Beispiele:
- font-size: 25px
- font-size: 20px
- font-size: 16px
-
MDN |
font-size
font-style
- Text kursiv formatieren
- Beispiel: font-style: italic
-
MDN |
font-style
font-weight
- Festlegen der Strichstärke (Fett formatieren).
-
Beispiel:
- font-weight: normal
- font-weight: bold
-
MDN |
font-weight
letter-spacing
- Erhöhte Zeichenabstände festlegen.
- Beispiel: letter-spacing: 2px
-
MDN |
letter-spacing
margin
- Festlegen von Außenabständen einer Überschrift (meist
margin-top
undmargin-bottom
) -
Beispiel:
- margin: 0
- margin: 0
- margin-top: 1ex
- margin-bottom: 1ex
- margin: 0
- margin: 0
-
MDN |
margin
padding-left
- Einrücken von Text innerhalb eines Elements.
-
Beispiel:
- padding: 0
- padding-left: 1em
-
MDN |
padding-left
text-align
- Festlegen der horizontalen Ausrichtung des Texts in einem Element (linksbündig / zentriert / rechtsbündig)
-
Beispiele:
- text-align: left
- text-align: center
- text-align: right
-
MDN |
text-align
text-decoration
- Festlegen von Unterstreichungen.
- Beispiel: text-decoration: underline
-
MDN |
text-decoration
text-transform
- Festlegen der Groß- und Kleinschreibung
- Beispiel: text-transform: uppercase
-
MDN |
text-transform
Darstellung für Responsive Design
Am Desktop Bildschirm kann bei der Überschriftengestaltung durchaus geklotzt werden. Auf den kleinen Displays von Smart Phones hingegen empfiehlt sich eine dezente Vergrößerung von Schriften und Abständen.
WCAG Erfolgskriterien
Folgende Erfolgskriterien sind für die visuelle Darstellung von Überschriften von Relevanz:
- 1.4.3: Kontrast (Minimum)
- Überschriften benötigen einen bestimmten Helligkeitskontrast zum Hintergrund, auch wenn sie über eine erhöhte Schriftgröße verfügen.
- 1.4.6 Kontrast (Erhöht)
- Konformitätsstufe AAA
- Der Helligkeitskontrast muss in der Regel anspruchsvoller mindestens einem Kontrastverhältnis von 7∶1 entsprechen.
- 1.4.5: Abbildung von Text
- Wo immer möglich, muss Text als solcher verfügbar sein. Eine Abbildung von Text sollte vermieden werden.
- 1.4.9 Abbildung von Text (Ohne Ausnahme)
- Konformitätsstufe AAA
- Texte werden lediglich dann in einer Grafik abgebildet, wenn sie rein dekorativ sind oder die Abbildung unverzichtbar ist.