Bilder & Slideshow

Bilder eines Textes werden nur rein dekorativ benutzt oder dann, wenn eine bestimmte Präsentation von Text unentbehrlich für die zu vermittelnden Informationen ist. (Level AAA)

Bei User Interface Elementen mit Beschriftungen, die Text oder Bilder von Text enthalten, enthält der Name den Text, der visuell dargestellt wird. (Level A)

Das Layout unten stützt sich beispielsweise auf Nähe und Zentrierung, um zu implizieren, dass jeder Satz eine Bildunterschrift für das Bild darüber ist.

Stellen Sie alternative Beschreibungen für alle Bilder zur Verfügung, die Bedeutung vermitteln. Wenn Sie die aussagekräftigen Bilder in Ihrem Inhalt nicht beschreiben, verhindern Sie, dass VoiceOver-Benutzer Ihre App in vollem Umfang nutzen können. Um eine nützliche Beschreibung zu erstellen, fangen Sie damit an, zu berichten, was für jemanden, der das Bild sehen kann, selbsterklärend wäre. Da VoiceOver den Text rund um das Bild und alle Bildunterschriften liest, konzentrieren Sie sich bei Ihrer Beschreibung auf die Informationen, die durch das Bild selbst vermittelt werden.

Alternativer Text (Alt-Text) - Alt-Text hilft bei der Übersetzung einer visuellen UI in eine textbasierte UI. Alt-Text ist eine kurze Bezeichnung (bis zu 125 Zeichen) im Code, die ein Bild für Benutzer beschreibt, die es nicht sehen können. Da Alt-Text nur für Bilder gedacht ist, ist es nicht notwendig, dem Alt-Text "Bild von" oder "Bild von" hinzuzufügen. Ein Screenreader liest den Alt-Text an Stelle des Bildes laut vor. Alt-Text ist für sehende Benutzer wertvoll, ebenso wie Alt-Text erscheint, wenn ein Bild nicht geladen werden kann. Fügen Sie gezielte Schlüsselwörter ein, um den Benutzer über das Bild zu informieren. Schlüsselwörter können auch die Suchmaschinenoptimierung (SEO) verbessern.

Verwenden Sie Alt-Text, um das, was das Bild zeigt, in einem informativen, kurzen Satz zu vermitteln.

Bildunterschriften sind der Text, der unterhalb eines Assets erscheint. Sie erklären die Kontextinformationen eines Assets - wer, was, wann und wo. Sowohl sehende als auch Screenreader-Benutzer verlassen sich bei der Beschreibung von Assets auf Bildunterschriften.

Verwenden Sie für lange Beschreibungen Beschriftungen anstelle von Alt-Text, da diese für alle Benutzer verfügbar sind und Alt-Text auf 125 Zeichen begrenzt ist.

Kombinieren von Alt-Text und Bildunterschriften - Alt-Text und Bildunterschriften enthalten unterschiedliche Informationen. Alt-Text ist nur dann nützlich, wenn der angrenzende Text und die Bildunterschrift keine Eigenschaften des Bildes erklären, die für diejenigen wichtig sind, die das Bild nicht sehen können, wie z.B. Beschreibungen der Farben, Größen und Lage eines Objekts.

Dekorative und informative Bilder - Um herauszufinden, ob ein Bild den Richtlinien für Farbkontrast entsprechen muss und von einer Bildunterschrift profitieren würde, stellen Sie fest, ob Ihr Bild dekorativ oder informativ ist. Dem W3C zufolge fügen dekorative Bilder dem Inhalt einer Seite keine Informationen hinzu. Dekorative Bilder: Brauchen keine Bildunterschriften/ Müssen die Richtlinien für Farbkontrast nicht erfüllen/ Brauche keinen Alt-Text/ Sollte einen null (leeren) Tag (alt="") in der Bildbeschriftung haben, so dass Bildschirmleseprogramme diese überspringen.

Funktionelle Bilder - Nach dem W3C sind funktionale Bilder Logos, Icons, Bilder innerhalb einer Schaltfläche und Bilder, die verfolgbar sind, wie z.B. ein Link. Der Alt-Text für funktionale Bilder unterscheidet sich von Alt-Text für andere Arten von Bildern, weil der Alt-Text für funktionale Bilder die Funktion des Bildes darstellt - nicht seinen Inhalt oder sein Aussehen.

Logos können von einem alt-Tag profitieren, der ihre Funktion beschreibt, aber sie sind eine einzigartige Art von funktionellem Bild, weil sie es sind: möglicherweise nicht den Farbkontrastverhältnissen entsprechen, möglicherweise die Anforderungen an die Textgröße nicht erfüllen