10.2.1 Verwenden Sie sinnvolle ALT-Attribute

Hintergrund

Nicht alle BesucherInnen eines Webshops können sehen. Sie sind auf Alternativtexte angewiesen.

Schlecht sehenden, älteren, weniger interneterfahrenen BesucherInnen nützen Tooltipps, die bei mouse-over über dem Bild erscheinen. Browser verhalten sich hier unterschiedlich. Ältere Internet Explorer zeigen das ALT-Attribut, Firefox und andere Browser das TITLE-Attribut.

Zentral für blinde UserInnen ist die Information im ALT-Attribut. Das TITLE-Attribut darf nur ergänzende Information enthalten, da diese Screenreadern zumeist nicht automatisch vorgelesen wird, da TITLE-Attribute in der Praxis sehr häufig redundante Informationen enthalten.

Maßnahmen

  • Wenn ein Produktbild verlinkt ist, überlegen Sie, ob das Linkziel ohne grafische Ansicht vermittelt wird.
  • Der Alternativtext kann auch ein so genannter Nulltext sein (alt=““), wenn Bilder nicht verlinkt sind und die Produktbeschreibung bereits alle Informationen transportiert oder das Bild lediglich der Layoutgestaltung dient.
  • Wenn die Produktbeschreibung nicht alle Bildinformationen transportiert, geben Sie diese kurz und auf das Wesentlichste konzentriert im Alternativtext an.
  • Halten Sie die Alternativtexte so kurz wie möglich (einige wenige Worte sind oft besser als ganze Sätze).
  • Reduzieren Sie die Anzahl (gleicher) Links, indem Sie Bild und Produkttitel gemeinsam verlinken.
  • Vermeiden Sie redundante Information in ALT- und TITLE-Attributen.
  • Überprüfen Sie, welche Information ohne Bilder transportiert wird.

Wer profitiert davon

  • Blinde NutzerInnen
  • Sehbehinderte NutzerInnen

Beispiele

Amazon Kunden kauften auch

amazon.de: Produktbild und Text sind bei Kaufempfehlungen gemeinsam verlinkt. Es ist hier also beim Bild ein leeres ALT-Attribut sinnvoll.

Quelle Alternativtext

quelle.at: Der Alternativtext des Produktbildes, das oberhalb der Produktbeschreibung (siehe 10.1.1 Produktbeschreibung) positioniert ist, wiederholt diese nochmals. Auch wenn über zusätzliche Thumbnailbilder zum Anklicken unterhalb des Produktbildes mehrere Ansichten des Produktes geboten werden, wird diese lange, redundante Information bei jedem Thumbnail Bild wiederholt. Besser wäre ein Hinweis, dass der Link „zur Zoomansicht QS by s.Oliver Jacke“ führt, bzw. bei Thumbnailbildern „zur größeren Ansicht + jeweilige Darstellung z.B. Rückseite...“. Eine jeweils ganz exakte Bildbeschreibung wird im Normalfall zu aufwendig sein. Es sollte jedoch eine automatisierte Lösung gefunden werden, die sinnvolle, kurz gehaltene, nicht redundante Information liefert.Im Screenshot sieht man auch, dass Grafiken teils mit leerem alt Attribut (alt=““) versehen wurden. Dies ist sinnvoll, wenn sie von Screen Readern ignoriert werden sollen (z.B. die runden Ecken unten). Es ist problematisch, wenn Bilder verlinkt sind (z.B. zur Zoomansicht), weil das Linkziel ausschließlich über das ALT-Attribut vermittelt wird.