---
title: "Barrierefreie Grafische Header"
url: "https://www.typo3.net/d/78665-barrierefreie-grafische-header"
source: "typo3.net"
tags: ["Frontend","Barrierefreiheit","Bilder","Frage"]
created: "2008-06-20"
last_reply: "2008-07-09"
replies: 8
solved: false
page: 1
pages: 1
lang: "de"
---

# Barrierefreie Grafische Header

Frontend › Barrierefreiheit · 8 Antworten · gestartet 2008-06-20

## Eröffnungsbeitrag

**zeitgenosse** · 2008-06-20 · [Beitrag #1](https://www.typo3.net/d/78665-barrierefreie-grafische-header/1)

Hallo

Ich muss Barrierefreie Grafische Header implementieren. Mache das indem ich das Bild als Background-Image in das H1-Tag einbaue. Mein Problem ist, dass die Grösse des Header-Bildes dynamisch erzeugt wird (Header kann einzeilig oder mehrzeilig sein!).

```typoscript
XY = 445, 43+[10.h]
```

Ich sollte diese Grössenangabe auch im CSS-Style des H1 Tags zur Verfügung haben.

hier der ganze Code

```typoscript
lib.stdheader.10 {
  1 = IMG_RESOURCE
  1{
    file = GIFBUILDER
    file{
      XY = 445, 43+[10.h]
      backColor = #FFFFFF
      10 = TEXT
      10{
        text.field = header
        textMaxLength = 255
        fontColor = #008f8b
        fontFile=fileadmin/templates/fonts/hausschrift.ttf
        fontSize = 30
        antiAlias = 0
        niceText = 1
        niceText.sharpen = 0
        offset = 0,45
      }
    }
    stdWrap{
      prepend = TEXT
      prepend{
        dataWrap = <h1 {register:headerStyle}{register:headerClass} style=
      }
      innerWrap.cObject = COA
      innerWrap.cObject{
        10 = TEXT
        10.value = "display:block; background:url(|) no-repeat; height: 100px
        20 = TEXT
        20.value = ; width:445px; max-width:445px;">
        30 = TEXT
        30.value = <span style="display:block; width:1px; height:1px; overflow: hidden;">     
      }
      append = TEXT
      append{
        current = 1
        wrap = |</span></h1>
      }
    }
  }
}
```

Im innerWrap.cObject sollte "height: 100px" durch die Höhe des Bildes ersetzt werden (43+[10.h]).
Hat hier jemand eine Lösung für?

Vielen Dank und Grüsse

## Antworten

### [#2](https://www.typo3.net/d/78665-barrierefreie-grafische-header/2) · maik · 2008-06-20

Warum so kompliziert.
Füge einfach die Grafik mit allen notwendigen Attributen ein.
Also Alt-Tag, Title-Tag usw.

Das ist dann auch Barrierefrei.

Diesen CSS Käckmäck kannst du dir sparen, was soll das bringen?

### [#3](https://www.typo3.net/d/78665-barrierefreie-grafische-header/3) · zeitgenosse · 2008-06-20

Das ist halt wegen der semantisch korrekten Struktur <h1>, <h2>, <p>, ...
<http://de.wikipedia.org/wiki/Barrierefreies_Internet#Logische_Struktur>

oder wie soll der Screenreader erkennen dass das Gif mit Title sowieso die Hauptüberschrift ist?

### [#4](https://www.typo3.net/d/78665-barrierefreie-grafische-header/4) · steffenk · 2008-06-20

<http://www.mortox.de/typo3-tipps/typoscript-sammlung/ueberschriften-als-bilder.html>

### [#5](https://www.typo3.net/d/78665-barrierefreie-grafische-header/5) · maik · 2008-06-20

Alles wunderbar, aber nicht zwingend für barrierefreiheit.

### [#6](https://www.typo3.net/d/78665-barrierefreie-grafische-header/6) · steffenk · 2008-06-20

trotzdem IMHO eine wichtige Technik, Überschriften auch als Text im Quelltext zu haben (SEO, Screenreader etc.)
Ausserdem ist es plausibel für den Kunden.

### [#7](https://www.typo3.net/d/78665-barrierefreie-grafische-header/7) · maik · 2008-06-20

> Überschriften auch als Text im Quelltext zu haben

Ja, das kann man aber auch mit dem alt- und title Attribut realisieren.

Für SEO ist ein h1-Tag natürlich besser, da hast du vollkommen recht.

Naja, ist ja auch egal. Ich wollte auch nun einen alternativen Lösungsansatz bieten. Ich halte das hier beschriebene Vorhaben für nicht ganz trivial. Da würde ich auf die CSS Variante verzichten und ein einfaches barrierefreis Bild einfügen.

Aber bin schon ganz gespannt auf die Lösung.

Ich hoffe das die dann auch hier gepostet wird.

### [#8](https://www.typo3.net/d/78665-barrierefreie-grafische-header/8) · zeitgenosse · 2008-06-24

<http://www.mortox.de/typo3-tipps/typoscript-sammlung/ueberschriften-als-bilder.html>

danke, steffenk für dinen lösungsvorschlag. damit habe ich aber das selbe problem wie mit dem snippet welches ich bis jetzt verwende. die höhe des bildes variiert.
da müsste auch das h1 oder h2 tag mitmachen.

### [#9](https://www.typo3.net/d/78665-barrierefreie-grafische-header/9) · rosieres · 2008-07-09

Moin Zeitgenosse,

mach es doch so ... und die Höhe kommt dann über die line-height ... automatikalisch ...

[/d/54125-grafische-content-ueberschrift](https://www.typo3.net/d/54125-grafische-content-ueberschrift)

Gruss

---

Quelle: „Barrierefreie Grafische Header“, typo3.net, https://www.typo3.net/d/78665-barrierefreie-grafische-header
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.