Barrierefreie Grafische Header

  • zeitgenosse zeitgenos...
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    20. 06. 2008, 09:36

    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!).

    [TS]XY = 445, 43+[10.h][/TS]

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

    hier der ganze Code
    [TS]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>
    }
    }
    }
    }
    [/TS]

    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


  • 1
  • maik maik
    Jedi-General
    0 x
    1194 Beiträge
    1 Hilfreiche Beiträge
    20. 06. 2008, 10:13

    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?

    http://www.caroonline.de

  • zeitgenosse zeitgenos...
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    20. 06. 2008, 10:38

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

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

  • steffenk steffenk
    Obi-Wan Kenobi
    0 x
    4666 Beiträge
    0 Hilfreiche Beiträge
    20. 06. 2008, 11:22

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

  • maik maik
    Jedi-General
    0 x
    1194 Beiträge
    1 Hilfreiche Beiträge
    20. 06. 2008, 11:50

    Alles wunderbar, aber nicht zwingend für barrierefreiheit.

    http://www.caroonline.de

  • steffenk steffenk
    Obi-Wan Kenobi
    0 x
    4666 Beiträge
    0 Hilfreiche Beiträge
    20. 06. 2008, 12:02

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

  • maik maik
    Jedi-General
    0 x
    1194 Beiträge
    1 Hilfreiche Beiträge
    20. 06. 2008, 20:10

    Ü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.

    http://www.caroonline.de

  • zeitgenosse zeitgenos...
    Padawan
    0 x
    47 Beiträge
    0 Hilfreiche Beiträge
    24. 06. 2008, 08:38

    [url]http://www.mortox.de/typo3-tipps/typoscript-sammlung/ueberschriften-als-bilder.html [/url]

    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.

  • rosieres rosieres
    R2-D2
    0 x
    65 Beiträge
    0 Hilfreiche Beiträge
    09. 07. 2008, 05:12

    Moin Zeitgenosse,

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

    [url]http://www.typo3.net/index.php?id=13&action=list_post&tid=54125[/url]

    Gruss

  • 1