h1 mit Bild, ohne Schrift, mit Link, barrierefrei?

  • Hey Leute,


    ich saß vorhin vor dem Problem, dass ich folgendes brauchte:


    • eine Überschrift (h1)
    • ein Bild als Überschrift, d.h. Schrift nicht zu sehen
    • das ganze vollflächig als Link anklickbar
    • Barrierefreiheit, d.h. Schrift und kein Bild zwischen <h1></h1> und kein display: none; für h1 und hereinschieben eines Bildes.


    Tja, was tun?
    Drei Dinge gingen wunderbar zusammen, nur vier bekam ich nicht hin :(


    Dann kam mir die Erleuchtung: Zuvor mit XHTML Doctype gearbeitet, stellte ich auf den HTML 5 Doctype um (der ist eh besser zu merken^^).
    HTML 5 erlaubt eine Umschachtelung von block-Elementen mit einem Link - Problem gelöst!


    Und hier kommt ihr ins Spiel - denn irgendwie habe ich das Gefühl, ich hätte bei meiner Lösung irgendeinen Nachteil vergessen :(


    Hier der (relevante) Code:



    Was meint ihr?


    LG
    Laura

  • Ich hab es nicht validieren lassen, aber eigentlich sollte es richtig sein, ist ja nix was falsch sein könnte^^
    Es ging mir auch mehr um die Funktionen der Bedienung...


    Wieso falsches Forum? Ich wollte meinen Code vorstellen und nach Meinungen bzw. Fehlern fragen, die mir nicht aufgefallen sind? Wohin denn sonst..?

  • Wenn es valide ist und man es anwenden kann, denke ich, dass es so in Ordnung ist.


    Ins Unterforum HTML/XHTML, da es für mich keine Präsentation bzw. fertige Website ist.

  • Zitat von &quot;lauras&quot;


    [*]Barrierefreiheit, d.h. Schrift und kein Bild zwischen <h1></h1> und kein display: none; für h1 und hereinschieben eines Bildes.


    Hallo.


    Und wenn jetzt ein Bild zwischen den h1 Tags ist dann ist es nicht mehr Barrierefrei?


    Gruss
    Elroy

  • Hey!


    Naja, für Screenreader (und auch für das Ranking bei Suchmaschinen glaube ich) ist es halt besser, wenn Text zwischen h1 steht, der ausgegeben werden kann. Ein alt-Attribut ist gerade bei letzterem (bei Screenreadern weiß ich nich) nicht ganz so aussagekräftig.
    Aber prinzipiell hast du schon recht... :)


    LG


    Nachtrag: Funktioniert nur im FF...

  • Hallo Laura,


    bei Google Webmastertools habe ich gelesen, daß die crawler der Suchmaschinen das verstehen was ein Nur-Text-Browser wie z.B. Lynx anzeigt. Kannst es evt. mal testen.


    Mfg


    Starhunter

  • Hey,


    ja, stimmt schon. Ich habe es jetzt noch ein bisschen anders gelöst, da es vor allem im Opera Probleme gab, die Schrift wirklich so mini darzustellen.
    Einfach um alles, was nicht zu sehen sein soll ein span drum und aus dem Bild schieben :)


    LG

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!