Immer wieder werde ich gefragt, warum Bilder nicht gelistet werden oder Webseiten nicht so gut ranken. Schaue ich mir dann die Seite an, sehe ich immer wieder, das verwendete Bilder nicht richtig „getaggt“ wurden. Meist fehlt der Alternativtext oder der Title des Bildes. Aber was ist das genau?
„alt“ Attribut (Alternativtext):
- Das „alt“ Attribut steht für „alternative Text“ und wird in einem
<img>Tag in HTML verwendet. - Seine Hauptfunktion besteht darin, eine beschreibende Textalternative für das Bild bereitzustellen, die angezeigt wird, wenn das Bild aus irgendeinem Grund nicht geladen werden kann. Das kann zum Beispiel bei langsamen Internetverbindungen oder für Menschen mit Sehbehinderungen wichtig sein.
- Der Text im „alt“ Attribut sollte kurz und präzise sein, um den Inhalt des Bildes angemessen zu beschreiben. Zum Beispiel, wenn das Bild einen roten Apfel zeigt, könnte der Alternativtext einfach „Roter Apfel“ lauten.
<img src="apfel.jpg" alt="Roter Apfel">
„title“ Attribut (Titeltext):
- Das „title“ Attribut wird ebenfalls in einem
<img>Tag verwendet. - Es bietet zusätzliche Informationen zum Bild, die in einem Tooltip angezeigt werden, wenn der Benutzer mit der Maus über das Bild fährt.
- Im Gegensatz zum „alt“ Attribut, das für die Zugänglichkeit gedacht ist, dient das „title“ Attribut dazu, zusätzliche Kontextinformationen oder Erklärungen für das Bild bereitzustellen. Es ist nicht für die Barrierefreiheit gedacht.
<img src="apfel.jpg" alt="Roter Apfel" title="Ein saftiger, roter Apfel, bereit, verspeist zu werden!">Zusammengefasst dient das „alt“ Attribut der Zugänglichkeit und sollte immer verwendet werden, um sicherzustellen, dass Eure Website für alle Benutzer zugänglich ist. Das „title“ Attribut hingegen bietet zusätzliche Informationen und Kontext für Benutzer, die weitere Details über das Bild erfahren möchten, wenn sie mit der Maus darüber fahren. Beachtet jedoch, dass „title“ nicht für Bildschirmleser relevant ist und daher nicht für die barrierefreie Beschreibung eines Bildes verwendet werden sollte.
Barrierefreiheit & SEO
Das „alt“ Attribut ist nicht nur für die Barrierefreiheit von Websites von großer Bedeutung, sondern spielt auch eine wichtige Rolle für die Suchmaschinenoptimierung (SEO). Lass uns beide Aspekte im Detail betrachten:
Bedeutung für Barrierefreiheit:
- Das „alt“ Attribut ist entscheidend für die Barrierefreiheit von Websites. Menschen mit Sehbehinderungen, die Bildschirmleseprogramme verwenden, verlassen sich auf den Alternativtext, um den Inhalt von Bildern zu verstehen.
- Ohne einen sinnvollen Alternativtext würden sie den Kontext und die Informationen verpassen, die das Bild vermitteln soll. Ein guter Alternativtext stellt sicher, dass die Website für alle Benutzer zugänglich ist.
Bedeutung für SEO:
- Suchmaschinen wie Google verwenden den Alternativtext, um den Inhalt von Bildern zu verstehen. Dies kann sich auf das Ranking in den Suchergebnissen auswirken.
- Indem du relevante und beschreibende Alternativtexte für deine Bilder verwendest, hilfst du Suchmaschinen, den Kontext deiner Website besser zu verstehen und sie in den Suchergebnissen für relevante Suchanfragen zu platzieren.
- Achte darauf, dass deine Alternativtexte präzise und relevant sind. Keyword-Spamming (das übermäßige Hinzufügen von Schlüsselwörtern) sollte vermieden werden, da dies gegen die SEO-Richtlinien verstoßen kann.
Insgesamt ist das „alt“ Attribut also ein sehr wichtiges Element sowohl für die Barrierefreiheit als auch für die Suchmaschinenoptimierung deiner Website. Es hilft dabei, deine Website für ein breiteres Publikum zugänglich zu machen und gleichzeitig die Sichtbarkeit in den Suchergebnissen zu verbessern.