Die Bedeutung von Alt- und Title-Attributen: Barrierefreiheit und SEO

Warum sind Alt-Attribute wichtig?

Die zentrale Aufgabe eines Alt-Attributs besteht darin, eine textliche Alternative zu einem Bild bereitzustellen. Dies ist besonders wichtig für blinde oder sehbehinderte Menschen, die auf Screenreader angewiesen sind.

Aber auch dann, wenn Bilder aus technischen Gründen nicht geladen werden, sorgt ein gut formuliertes Alt-Attribut dafür, dass der Inhalt nicht verloren geht. Zudem tragen Alt-Texte dazu bei, dass Suchmaschinen Bilder besser einordnen können, was sich positiv auf die Auffindbarkeit einer Webseite auswirkt.

Der Unterschied zwischen Alt- und Title-Attributen

Alt- und Title-Attribute werden oft verwechselt, haben jedoch unterschiedliche Zwecke:

• Alt-Attribute dienen als Textalternative für Bilder und sind entscheidend für die Barrierefreiheit. Sie werden von Screenreadern vorgelesen und erscheinen, wenn ein Bild nicht geladen wird.

• Title-Attribute bieten zusätzliche Informationen, die in den meisten Browsern als Tooltip angezeigt werden, wenn Nutzer mit der Maus über ein Element fahren. Sie sind nicht primär für Barrierefreiheit gedacht und werden von Screenreadern oft ignoriert oder nicht zuverlässig interpretiert.

Worum es nicht geht: Title-Attribute

Häufig wird das Title-Attribut als Alternative zum Alt-Attribut angesehen. Allerdings ist es für die Bereitstellung von relevanten Informationen nicht geeignet, da:

• Screenreader das Title-Attribut oft nicht korrekt interpretieren,

• es geräteabhängig unterschiedlich dargestellt wird,

• es redundante Informationen erzeugen kann,

• es bessere Alternativen gibt, wie etwa ARIA-Attribute, die speziell dazu entwickelt wurden, um die Zugänglichkeit von Webinhalten für Menschen mit Behinderungen zu verbessern.

Zwar wird der Einsatz des Title-Attributs in der WCAG 2.0 für Links empfohlen, jedoch wird an gleicher Stelle auf dessen Einschränkungen hingewiesen. Falls eine visuelle Information nicht direkt sichtbar gemacht werden kann, sollten stattdessen geeignete ARIA-Attribute genutzt werden.

Wie werden Alt-Attribute richtig eingesetzt?

Ob ein Bild ein Alt-Attribut benötigt und wie es formuliert sein sollte, hängt davon ab, ob es eine inhaltliche Bedeutung hat oder nur dekorativen Zwecken dient.

Dekorative Grafiken

Bilder, die keinen inhaltlichen Mehrwert bieten, wie Gestaltungselemente oder Platzhaltergrafiken, sollten mit einem leeren Alt-Attribut versehen werden. So ignorieren Screenreader diese Inhalte, was die Barrierefreiheit verbessert.

Informative Grafiken

Bilder, die Informationen vermitteln, sollten mit einem passenden Alt-Text versehen werden:

• Symbole mit Aussagekraft: Beispielsweise ein Telefon- oder Faxsymbol, das visuell eine Unterscheidung zwischen zwei Nummern darstellt. Diese Information sollte auch im Alt-Attribut erkennbar sein.

• Bilder als alleiniger Inhalt eines Links: Hier sollte nicht das Bild beschrieben werden, sondern das Ziel des Links. Ein Logo, das zur Startseite führt, sollte also nicht mit „Logo von XYZ“ beschriftet werden, sondern mit „Zur Startseite von XYZ“.

• Ergänzende Bildinformationen: Wenn ein Text bereits die wesentlichen Informationen enthält, aber das Bild weitere Details zeigt, sollte der Alt-Text diese ergänzen. Ein Beispiel wäre ein Text „Katze, 10 Jahre alt“ und ein Bild einer schwarz-weiß gefleckten Katze. Der Alt-Text könnte lauten: „Schwarz-weiß gefleckte Katze schlafend“.

• Bilder mit Textinhalt: Falls eine Grafik einen Text enthält, sollte dieser Text im Alt-Attribut wiedergegeben werden.

• Bilder, die Emotionen vermitteln sollen: In diesem Fall sollte nicht das Bild beschrieben, sondern die beabsichtigte Botschaft vermittelt werden. Anstatt „Eine lachende Familie“ wäre „Wir sind familienfreundlich“ als Alt-Text geeigneter.

• Personenbilder: Einzelbilder sollten mit dem Namen der Person versehen sein. Gruppenbilder sollten stattdessen die Gruppe beschreiben.

Was sollte bei Alt-Attributen vermieden werden?

• Begriffe wie „Bild mit“, „Bild über“ oder „Darstellung von“ sind überflüssig, da bereits klar ist, dass es sich um eine Grafik handelt.

• Alt-Attribute sollten auf maximal 80 Zeichen begrenzt werden, da Braille-Tastaturen nach dieser Länge einen Zeilenumbruch machen, was die Lesbarkeit erschweren kann.

Barrierefreiheit durch Alt-Attribute

Alt-Attribute spielen eine essenzielle Rolle für die Barrierefreiheit und verbessern gleichzeitig die Suchmaschinenoptimierung. Sie helfen dabei, visuelle Informationen auch für Nutzer zugänglich zu machen, die Bilder nicht sehen können. Entscheidend ist, dass Alt-Texte informativ, präzise und nicht zu lang sind. Mit den richtigen Formulierungen können Webseiten eine bessere Usability und Inklusion erreichen.