Neben der Verbesserung der Sichtbarkeit in Suchmaschinen, können Besucher mit einer Sehbehinderung oder einer geistigen Behinderung die Informationen bei einer Verwendung von echtem Text anstelle von Bildern des Textes (besser) verstehen.

  • Achten Sie darauf, echten Text zu verwenden und ihn mit dem CSS in Form zu bringen.

Bild von echtem Text

Wie wendet man das an?

Texte in Bildform können Folgendes umfassen:

  1. Eindeutigen Text
  2. Einem Bild zugewiesenen Text (Beispiel : Ein Banner)

Als „echter Text“ wird ein Text bezeichnet, der nicht in ein Bild eingebettet ist, sondern als realer Text beispielsweise auf einer Seite in Word angezeigt wird.

Zum Beispiel wird Text, den Sie in ein Content Management System (CMS) eingeben, auf einer Seite als echter Text angezeigt.

Verwendung von echtem Text

Abgesehen von den unten aufgeführten Ausnahmen, müssen Sie echten Text verwenden.

Mit CSS erhalten Sie die gewünschte visuelle Wirkung:

  1. Es verleiht dem echten Text die gewünschte Form durch die individuelle Anwendung von Farbe, Größe, Schriftart/-größe, Position und Anordnung.
  2. Der echte Text kann in ein Banner, eine Animation usw. aufgenommen werden

Achten Sie bei der Verwendung von CS Sauf Folgendes:

  1. Verwenden Sie das CSS-Programmierverfahren, um Bilder mit Text zu platzieren und den realen Text für die Sprachsynthese-Software weiterhin sichtbar zu lassen
  2. Der Besucher muss in der Lage sein, zu einer Textversion der Webseite wechseln zu können, ohne dass dabei die in den Bildern enthaltenen Informationen verloren gehen.

Ausnahmen: Wann kann ein Bild eines Textes verwendet werden?

In folgenden Fällen können Sied as Bild eines Textes verwenden:

  1. Wenn keine der für die Website genutzten Technologien (wie CSS) dieselbe bildliche Wiedergabe wie mit einem Bild des Textes ermöglicht
  2. Wenn das Bild mit dem Text in den gängigen Browsern nicht stabil bleibt
  3. Wenn die in Form eines Bildes zu übermittelnden Informationen wesentlich sind (wie beispielsweise bei einem Logo)
  4. Wenn der eigentliche Text anderen Kriterien der Barrierefreiheit nicht erfüllt (z. B. die Möglichkeit, den Text auf 200 % zu skalieren)
  5. Wenn der Besucher die Möglichkeit hat, die Schriftart, die Schriftgröße, die Farbe und den Hintergrund des Textes als Bild selbst zu ändern.

Achten Sie darauf, stets ein gutes Text-Äquivalent für die oben aufgeführten Ausnahmen zu haben.

Für Developer (Entwickler)

Verwendung von CSS, um echten Text durch ein Bild eines Textes zu ersetzen

Der nächste Titel wird als echter Text auf der Seite platziert. Im Beispiel ist es ein <h1> Header. Das Element <span> wurde hinzugefügt, um den Text aus dem Bild zu entfernen.

<h1><span>Es ist eine Party!</span></h1>

Der folgende CSS-Code wurde verwendet, um diesen Titel zu erstellen. Das <span> Element wird mit absoluter Positionierung aus dem Rahmen herausgestellt. Das Element <h1> erhält ein Bild als Hintergrund (dies ist das Bild des Textes im Element <h1>).

h1 {
background-image: url (es-ist-eine-party.png) ;
height (Höhe): 195px;
width (Breite): 290px;
background-repeat: no-repeat;((Hintergrund-Wiederholung: keine Wiederholung))
position: absolute;
}
h1 span {
position: absolute;
left: -999em;
}

Bei der Konvertierung des Designs in Code muss der Ersteller darauf achten, dass möglichst echter Text verwendet wird und es Möglichkeiten gibt, diesen Text in das CMS einzugeben.

Für Redakteure

Bei der Platzierung von Textbildern muss sich der Redakteur kritisch mit den Möglichkeiten einer anderen Textgestaltung (z. B. mit CSS) befassen.