Styles Images Bilder
Das Design sollte immer einfach und leichtgewichtig erscheinen.
Bilder sollte nur dort verwendet werden, wo sie einen echten Nutzen für den Benutzer darstellen.
Bilder sollten niemals nur zu Dekorationszwecken benutzt werden.
Fotos
Das Seitenverhältnis für Fotografien sollte immer 3:2 betragen (Breite-x : Höhe-y, beispielsweise "width: 300px; height: 200px;"). Dies folgt aus der allgemeinen Erfahrung von Benutzern bei klassischen Kameras.
Zeichnungen oder andere Medien
Abbildungen welche eine Entsprechung in der realen Welt habe,n sollten im originalen Seitenverhältnis abgebildet werden. Dazu gehören beispielsweise Briefe, Dokumente, Kreditkarten, Ausweise
Barrierefreiheit
Bei Abbildungen muss immer ein alternativer Text für Menschen mit eingeschränkten Seefähigkeiten angeboten werden.
Der alternative Text muss folgende Eigenschaften erfüllen:
- Der Text besteht aus vollständigen Sätzen, der beispielsweise von Screen-Readern gelesen werden kann.
- Der Text macht Sinn und beschreibt kurz und knapp den Inhalt des Bildes.
- Der Text beschreibt die Funktion des Bildes im Kontext der aktuellen Verwendung.
- Der Text benutzt allgemein verwendete Satzzeichen, wie Punkt und Komma.
Die folgende Inhalte sollte nicht inkludiert werden:
- Fragmente, wie "Bild eines", "Foto von", …
- Name der Quelle (Fotograf, Agentur, Zeichner, …)
- Wiederholung von schon auf der Seite vorhandenen Informationen
- Information die nichts mit dem Bild zu tun haben
Wenn in Ausnahmefällen ein dekoratives Bild verwendet wird, welches keine Funktion hat, sollte kein alternativer Text gesetzt werden (alt=""). Dazu können auch Bilder zusammen Hyperlinks oder Icons gehören.
Bilder in den Formaten JPG oder PNG, sollten möglichst keinen wichtigen Text (in Pixel ge-rendeter Text) enthalten, da dieser nicht von Screen-Readern gelesen werden kann. Falls der Text innerhalb einer Abbildung wichtig ist, sollte das SVG-Format (Vektor-basiert) benutzt werden, damit die Abbildungsqualität beim Zoomen erhalten bleibt. Der alternative Text sollte immer den im Bild enthaltenen Text wieder spiegeln.
Alt-Text
Alle Bilder müssen ein alt-Tag haben. Sie sollten eine Beschreibung des Bildes in das Tag einfügen, um Benutzern zu helfen, die es nicht sehen können.
Wenn Ihr Bild rein dekorativ ist und eine Beschreibung verwirrend sein könnte, sollten Sie trotzdem das alt-Tag einfügen, es aber leer lassen, damit es von den Screenreadern ignoriert wird.
Bilder Skalieren (Responsive)
Alle Bilder werden auf die Breite des Bildschirms(Auflösung) automatisch skaliert
<figure>
Das HTML5-Element figure dient als semantisches Elternelement für eine zum Seiteninhalt gehörende Abbildung, Video, Programmcode, Textstellen wie Zitate oder tabellarische Übersichten.
<figcaption>
Falls das figure-Element ein figcaption-Element enthält, sollte es zur Unterstützung assistiver Technologien die ARIA-Rolle `group` bekommen.