---
title: "Graphische Überschrift - aber bitte barrierefrei..."
url: "https://www.typo3.net/d/48891-graphische-ueberschrift-aber-bitte-barrierefrei"
source: "typo3.net"
tags: ["Frontend","Barrierefreiheit","Frage","HTML & CSS"]
created: "2006-08-27"
last_reply: "2006-08-31"
replies: 3
solved: false
page: 1
pages: 1
lang: "de"
---

# Graphische Überschrift - aber bitte barrierefrei...

Frontend › Barrierefreiheit · 3 Antworten · gestartet 2006-08-27

## Eröffnungsbeitrag

**StephenKing** · 2006-08-27 · [Beitrag #1](https://www.typo3.net/d/48891-graphische-ueberschrift-aber-bitte-barrierefrei/1)

Mittlerweile achte ich bei meinen Seiten ziemlich auf Barrierefreiheit, möchte nun aber gerne graphische Seitenüberschriften verwenden. Soweit ja kein Problem.

Genügt es da, wenn ich das Image mit einem <h1> umschließe und dem Image die Überschrift als Alt-Text zuweise? Der Screenreader würde ja wohl durch das h1 die Überschrift erkennen und den Alt-Text vorlesen.

Leider passt das mit der Dokumentenstruktur (für Google & Co beispielsweise bzw. auch rein aus Prinzip) nicht.

Habe schon die Dualheader aus gov_accessibility ausprobiert, aber irgendwie gefällt mir das nicht so ganz, da der Text ja sichtbar ist und mit etwas Pech außerdem die Überschrift einfach abgeschnitten wird.

Weis jemand, wie ich das realsiieren könnte? Würde statt dem normalen wrap = <h1> | </h1> halt gerne noch die Überschrift ausgeben, nur weis ich nicht, wie ich da drauf zugreifen kann.

## Antworten

### [#2](https://www.typo3.net/d/48891-graphische-ueberschrift-aber-bitte-barrierefrei/2) · Spyker · 2006-08-28

<h1 class="bildh1_das"> | </h1>

und dann mit styleshwwts einfach ein hintergrunfbild geben und Text ausblenden.
Das ist die beste Variante.

### [#3](https://www.typo3.net/d/48891-graphische-ueberschrift-aber-bitte-barrierefrei/3) · StephenKing · 2006-08-28

Ja aber erstens gefällt mir das mit dem Hintergrund nicht, da ich nicht genau kontrollieren kann, wie breit der Kasten sein muss, damit das Hintergrundbild ganz angezeigt wird, zweitens: Wie blende ich denn den Text aus? Hatte nur display: none probiert, aber da wird der Kasten (also das span/div meine ich damit) ja logischerweise gar nicht angezeigt. visibility:hidden hilft denk ich auch nicht mehr.
Außerdem: Wie sollte ich über ein Stylesheet die passende Überschrift als Hintergrundbild zuweisen?

Oder meinst du einfach, dass ich eine Standardschrift nehme und nur ein Hintergrundbild?
Nein, ich möchte gerne eine besondere Schriftart verwenden.

### [#4](https://www.typo3.net/d/48891-graphische-ueberschrift-aber-bitte-barrierefrei/4) · LineMan · 2006-08-31

Hmm... das sollte so gehen:

<h1><span>Deine Überschrift</span></h1>

Jetzt kannst Du mit

h1 {background:url(...);} <-- Dein Hintergrundbild
h1 span {visibility: hidden;} <-- Dein H1 Text

den text zwar verstecken, der platz wir aber dennoch eingenommen (durch visibility:hidden; anstatt display:none;), so das sich das hintergrundbild zumindest über die eigentliche textbreite erstreckt.

---

Quelle: „Graphische Überschrift - aber bitte barrierefrei...“, typo3.net, https://www.typo3.net/d/48891-graphische-ueberschrift-aber-bitte-barrierefrei
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.