Bilder, Farben & Text

Alternativtext für Bilder

Wenn ein Bild nur dekorativ ist, sollte man ein leeres alt-Attribut setzen:

<img src="zierleiste.png" alt="" />

Bilder, die Information liefern, brauchen ein kurzes, beschreibendes alt-Attribut:

<img
  src="fhs.png"
  alt="FH Salzburg in Puch Urstein, Ansicht des Haupteingangs."
/>

Falls das Bild als Link dient, ist es wichtiger, das Link-Ziel zu beschreiben statt das Bild selbst:

<a href="https://www.fh-salzburg.ac.at/"
  ><img src="fhs.png" alt="Link: Homepage der FH Salzburg"
/></a>

Längere Informationen gehören in eine Bildunterschrift, wo sie allen zugutekommen - nicht nur Screenreader-NutzerInnen:

<figure>
  <img src="anreise.png" alt="Landkarte" />
  <figcaption>
    Anreise per S-Bahn von der Stadt Salzburg: S3 bis Haltestelle Salzburg Süd.
    Zum Bahnsteig parallel führt der Salzachweg. Folgen sie diesem Weg bis ca. 3
    Minuten lang zur Kreuzung mit der Austraße.
  </figcaption>
</figure>

Farben und Kontraste

Farbenblindheit und Farbfehlsichtigkeit betreffen ca. jede 20. Person. Männer sind - aus genetischen Gründen - häufiger betroffen als Frauen. Deswegen sollte man vermeiden, eine Information nur mit Farbe zu vermitteln:

Schlechtes Beispiel: 🟢 vs. 🔴

Gutes Beispiel: ✅ vs. ❌

Oft weiß man selbst gar nicht, dass man farbenblind ist, siehe Test.

Für die Lesbarkeit von Text ist der Kontrast zwischen Text und Hintergrund wichtig. Die WCAG 1.4.3 (Stufe AA) schreibt ein Kontrastverhältnis von mindestens 4,5 : 1 für normalen Text vor (3 : 1 für großen Text ab 18pt/24px). Das lässt sich einfach überprüfen mit dem Contrast Checker.

Textformatierung

Die Empfehlung für die Schriftgröße ist mit der immer höheren Auflösung der Ausgabegeräte gewachsen: Smashing Magazine empfiehlt 20px, Medium 20px, Jeffrey Zeldman 21px als Fließtext-Größe.

Ein Zeilenabstand von 1.5x (mit line-height festgelegt) erhöht die Lesbarkeit spürbar. Im Web gibt es außerdem verlässliche Probleme mit Blocksatz - Flattersatz (linksbündig) führt zu zuverlässigeren, besser lesbaren Ergebnissen.

Wie breit eine Textspalte ist, beeinflusst ebenfalls die Lesbarkeit. Dafür eignet sich die Einheit ch (Breite des Zeichens „0”), um die maximale Zeichenanzahl pro Zeile festzulegen:

p {
  max-width: 65ch;
  line-height: 1.5;
}