Bilder & Grafiken

Screenshot

Beispiel Bild klein Hochformat ohne Bildunterschrift (maximale Breite = 160px)
Beispiel Bild klein Querformat mit Bildunterschrift (maximale Breite = 264px)
Beispiel Bild in voller Textspaltenbreite und Bildunterschrift (maximale Breite = 784px)
Beispiel Bild volle Breite und Bildunterschrift (maximale Breite = 1200px)

Beschreibung

Bilder und Grafiken dienen neben der grafischen Gestaltung auch der Visualisierung von zum Teil schwierig mit Text darstellbaren Sachverhalten.

Wenn eine Grafik einen Erklärungswert haben soll, dann ist unbedingt darauf zu achten, dass diese Grafik alle für das Verständnis notwendigen Erklärungen enthält (Titel, Legende und Beschriftungen in der Grafik, Beschreibung unterhalb der Grafik).

Hinweis Bildergrösse: Die Breite der Bilder ist vorgeben und wird je nach Endgerät dynamisch angepasst. Die Höhe der Bilder ist variabel und ergibt sich jeweils aus der Breite der verwendeten Bildelemente. Bilder mit der Grösse «small» werden vom Text umflossen. Bei längeren Texten sollte man allerdings zwei Textabschnitte bilden, sodass der zweite Textabschnitt unterhalb des Bildes ansetzt. Bei nur einem Textabschnitt bleibt die Breite immer gleich gross.
Hinweis Vergrösserungsmöglichkeit: Bilder/Grafiken von Typ klein Querformat können bei Bedarf mit einer Vergrösserungsfunktion versehen werden. In diesen Fällen erscheint analog der Bildergalerie bei Mouseover ein «Plus»-Zeichen und es öffnet sich bei Klick eine Lightbox. Wenn Sie diese Option nutzen, dürfen die beiden Bilder beim Hochladen im Redaktionssystem nicht denselben Namen haben.

Accessibility

Aus Gründen der Barrierefreiheit müssen Bilder und Grafiken auch maschinenlesbare Bildinformationen für Screenreader enthalten. Zu jedem Bild und jeder Grafik wird ein Alt-Text (Aussagekräftiger Bildtitel, aus dem der Inhalt des Bildes hervorgeht) angegeben.

Falls ein Bild oder eine Grafik für das Verständnis des Inhalts notwendig ist, dann gibt man zusätzlich zum Alt-Attribut noch eine «long description» an, die den Bildinhalt ausführlicher erklärt.

Eine Aussnahme bilden dekorative Grafiken oder Layoutgrafiken. Sie haben leere alt-Attribute, um sie z.B. vor Screenreadern zu verbergen.

Schriftgrafiken werden nicht verwendet. Statt Schriftgrafiken kann seit HTML5 auch für ausgefallenen Schriften immer Text verwendet werden.

Einsatz

Alle Seiten