Hallo zusammen,

ich habe folgende Frage: Wie sollte ich am besten Bildlogos in eine Internetseite einbinden, damit sie barrierefrei sind? Ich hatte etwas gelesen als H1 einbinden und den Text dann mittels negativem Text-indent ausblenden und das Logo als Hintergrund setzen, da funktionierte bei meinem Text aber leider nicht, weil er mehrzeilig war.

Welche generellen Regeln gibt es zu Einbindung von Bildern? Damit meine ich nicht das Alt- und Title-Tag, sondern eher wann binde ich Bilder als IMG und wann als CSS-Background ein?

Danke und Grüße

Du könntest den Text im H1 in ein span einbetten und dann dieses ausblenden.

Ziemlich einfach:
Ist Grafik Inhalt? - als img einbetten.
Ist Grafik Schmuck oder hat keine Relevanz für den Inhalt? - als Hintergrundgrafik einbetten.

__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato...
All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege

www.richard-thiel.de | Müssen Websiten überall gleich ausschauen?

Logos per Background einzubinden ist nicht barrierefrei. Woher soll z.B. ein Screenreader erkennen das dort ein Bild ist? Dir stehen ja dann auch nicht die Attribute alt und longdesc zur Verfügung.

Auch Suchmaschinen können es besser verarbeiten wenn ein Contentbild auch per <img> eingebunden wird.

__________________
I ♥ Webdesign

Kurze Antwort: Ist es ein Hintergrundbild dann wird es als Background (heißt übersetzt Hintergrund) eingebunden, ansonsten als img.
Lange Antwort: Ja, welches Bild ein Hintergrundbild ist und welches nicht, darüber kann oft lange diskutiert werden. Bei manchen Bildern ist es offensichtlich bei anderen wiederum schwer zu beurteilen.

Möchtest du Text mit Bildern ersetzen? Hast du Beispielbilder was du genau wie ersetzen willst? Eventuell brauchst du ja auch gar keine Bilder?