Titel "versteckt" angeben

[xwolf]

Hi,

Ich habe das Logo und den Titel meiner HP in einer Hintergrundgrafik die in einem div definiert wurde, da es sich durch die besondere Schriftart nicht durch reinen Text darstellen lässt:

<div id="logo">
<p>Zusätzlicher Text</p>
</div>

Nun könnte man doch ein h1 und h2 davor einfügen und es mit CSS unsichtbar machen:

In der CSS-Datei:
.titel { display: none; }

In der HTML-Datei:
<div id="logo">
<h1 class="titel">Der Seitenttitel</h1>
<h2 class="titel">Willkommen auf example.org</h2>
<p>Zusätzlicher Text</p>
</div>

Meiner Meinung nach würden so Suchmaschine die Seite besser indizieren, da sie CSS nicht interpretieren und Browser die dank @import ausgeschlossen wurden (z.B. Netscape 4) würden die Seite mit Titel darstellen.

Nun meine Frage: Würde irgendetwas dagegen sprechen?

Nein, im Gegenteil ist das gängige Praxis um Screenreader zu helfen,
bei denen Grafiken nicht angezeigt/vorgelesen werden; Dann ist es auch eine technik zur Förderung der Barrierefreiheit der Seite.

Allerdings solltest du es besser so im CSS und HTML machen:

In der CSS-Datei:

#logo h1, #logo h2 { position: absolute; left: -999em; width: 20em; }

In der HTML-Datei:

<div id="logo">
 <h1>Der Seitenttitel</h1>
 <h2>Willkommen auf example.org</h2>
 <p>Zusätzlicher Text</p>
 </div>

Die CSS bewirkt, daß der Text verschoben wird in den für grafische Ausgabe unsichtbaren Bereich.

Dies ist deswegen besser als ein display:none, da display:none von CSS-fähigen Browser, die lediglich keine Grafiken anzeigen (sollen) und stattdessen die Seite linearisiert zeigen, auch nicht angezeigt werden würden.

Ciao,
  Wolfgang