ALT-Text

Alt-Texte, auch als Alt-Attribute bekan­nt, sind kurze Beschrei­bun­gen, die den Inhalt von Bildern, Grafiken oder anderen visuellen Ele­menten auf ein­er Web­seite wiedergeben. Sie spie­len eine entschei­dende Rolle für die Bar­ri­ere­frei­heit und sind gle­ichzeit­ig ein wertvolles Ele­ment für die Such­maschi­nenop­ti­mierung (SEO). In diesem Artikel erfährst du, was Alter­na­tiv­texte sind, wie sie funk­tion­ieren, warum sie unverzicht­bar für die Bar­ri­ere­frei­heit sind und welchen Ein­fluss sie auf SEO haben.

Was sind Alternativtexte?

Alter­na­tiv­texte sind Beschrei­bun­gen, die in den HTML-Code eines Bildes einge­fügt wer­den und für Nutzer zugänglich sind, die das Bild nicht sehen kön­nen, sei es auf­grund tech­nis­ch­er Ein­schränkun­gen oder Behin­derun­gen. Die Beschrei­bung bietet eine textliche Alter­na­tive zum Bild und gibt dessen Inhalt wieder.

<img src="laptop-fuer-programmierer.jpg" alt="Laptop für Programmierer auf einem Schreibtisch" />

Diese Texte wer­den von soge­nan­nten Screen­read­ern, also Bild­schirm­le­segeräten, vorge­le­sen. Diese Geräte wer­den von blind­en oder sehbe­hin­derten Nutzern ver­wen­det, um Inhalte im Web wahrnehmen zu kön­nen. Alter­na­tiv­texte sind somit ein unverzicht­bares Werkzeug, um Infor­ma­tio­nen bar­ri­ere­frei zugänglich zu machen.

Die Rolle von Alt-Texten für die Barrierefreiheit

Die Bar­ri­ere­frei­heit von Web­seit­en ist ein zen­traler Bestandteil der mod­er­nen Weben­twick­lung und wird auch in ver­schiede­nen Geset­zen und Richtlin­ien wie der BITV (Bar­ri­ere­freie-Infor­ma­tion­stech­nik-Verord­nung) oder der WCAG (Web Con­tent Acces­si­bil­i­ty Guide­lines) fest­gelegt. Diese Richtlin­ien definieren klare Vor­gaben, wie Web­seit­en aufge­baut sein müssen, damit sie für alle Men­schen uneingeschränkt zugänglich sind.

Unterstützung für blinde und sehbehinderte Menschen

Für Per­so­n­en, die auf Screen­read­er angewiesen sind, sind Alter­na­tiv­texte oft die einzige Möglichkeit, zu ver­ste­hen, was auf einem Bild dargestellt ist. Ein gutes Beispiel hier­für ist die Beschrei­bung eines Dia­gramms oder eines kom­plex­en Bildes: Ohne eine detail­lierte Erk­lärung wür­den blinde Nutzer wichtige Infor­ma­tio­nen nicht erhal­ten.

Durch diese Bildbeschrei­bun­gen wird der visuelle Inhalt für alle zugänglich gemacht. Ein wichtiger Grund­satz hier­bei ist, dass die Beschrei­bung den tat­säch­lichen Inhalt des Bildes wider­spiegelt und kon­textuell rel­e­vant bleibt.

Beispiel:
Ein Bild von einem Hund im Park kön­nte den Alter­na­tiv­text „Hund spielt im Park“ haben. Diese Beschrei­bung erk­lärt genau, was auf dem Bild zu sehen ist, und gibt Nutzern eine Vorstel­lung davon, was sie nicht sehen kön­nen.

Warum allgemeine Beschreibungen nicht ausreichen

Ein häu­figer Fehler bei der Erstel­lung von Bildbeschrei­bun­gen ist, dass sie entwed­er zu all­ge­mein oder zu wenig aus­sagekräftig sind. Ein Text wie „Bild“ oder „Grafik“ ist nicht hil­fre­ich, da er keine wirk­liche Infor­ma­tion über den Bild­in­halt liefert. Alter­na­tiv­texte soll­ten immer das beschreiben, was auf dem Bild dargestellt wird, und die Funk­tion des Bildes im Kon­text des Inhalts berück­sichti­gen.

Bei deko­ra­tiv­en Bildern, die keine rel­e­vante Infor­ma­tion ver­mit­teln, kön­nen Alter­na­tiv­texte hinge­gen wegge­lassen oder als leer markiert wer­den (alt=""). So ver­hin­dern Sie, dass Screen­read­er unnötige Infor­ma­tio­nen vor­lesen, die den Nutzer möglicher­weise von wichtigeren Inhal­ten ablenken.

Wie schreibt man effektive Alternativtexte?

Das Ver­fassen eines guten Bildbeschrei­bungs-Textes erfordert etwas Übung und ein gutes Ver­ständ­nis des Kon­texts, in dem das Bild ver­wen­det wird. Hier sind einige grundle­gende Richtlin­ien, die bei der Erstel­lung von Alter­na­tiv­tex­ten beachtet wer­den soll­ten:

1. Kurz und präg­nant: Der Alt-Text sollte das Bild in weni­gen Worten tre­f­fend beschreiben, ohne unnötige Details hinzuzufü­gen. Eine Länge von 100 Zeichen oder weniger ist in der Regel ide­al.
2. Den Inhalt und die Funk­tion beschreiben: Die Bildbeschrei­bung sollte sowohl wiedergeben, was auf dem Bild zu sehen ist, als auch dessen Funk­tion im Zusam­men­hang mit dem restlichen Inhalt erk­lären. Wenn das Bild beispiel­sweise ein Call-to-Action-But­ton ist, sollte dies im Text erwäh­nt wer­den.
3. Kon­text berück­sichti­gen: Der Alter­na­tiv­text sollte immer den Kon­text des Bildes berück­sichti­gen. Ist das Bild eine Illus­tra­tion eines The­mas? Unter­stützt es den Text in irgen­dein­er Weise? Diese Fra­gen helfen dabei, den richti­gen Alter­na­tiv­text zu find­en.
4. Keine Redun­danz: Wenn die Bil­dun­ter­schrift bere­its den Inhalt des Bildes erk­lärt, muss der Alter­na­tiv­text nicht redun­dant sein. In solchen Fällen kann der Text auf deko­ra­tive Funk­tion geset­zt wer­den.
5. Ver­mei­den Sie Begriffe wie “Bild von”: Die Beschrei­bung sollte keine über­flüs­si­gen Infor­ma­tio­nen wie „Bild von“ oder „Foto von“ enthal­ten. Screen­read­er weisen die Nutzer bere­its darauf hin, dass es sich um ein Bild han­delt, daher soll­ten Sie direkt zur Beschrei­bung überge­hen.

Beispiel:
Statt “Bild von einem roten Auto” kön­nte die Beschrei­bung ein­fach „rotes Auto“ laut­en.

Die Bedeutung von Bildbeschreibungen für SEO

Neben der Verbesserung der Bar­ri­ere­frei­heit spie­len Bildbeschrei­bun­gen auch eine wichtige Rolle in der Such­maschi­nenop­ti­mierung (SEO). Bilder selb­st kön­nen von Such­maschi­nen nicht direkt „gele­sen“ wer­den – sie ver­lassen sich auf den umgeben­den Text und die Alter­na­tiv­texte, um den Inhalt des Bildes zu inter­pretieren. Ein gut for­muliert­er Alt-Text kann dazu beitra­gen, dass eine Web­seite in den Suchergeb­nis­sen höher eingestuft wird und dass die Bilder selb­st in den Suchergeb­nis­sen erscheinen.

Wie Alt-Texte SEO unterstützen

Such­maschi­nen wie Google ver­wen­den Bildbeschrei­bun­gen, um bess­er zu ver­ste­hen, worum es auf ein­er Web­seite geht. Durch die Beschrei­bung des Bild­in­halts mit rel­e­van­ten Schlüs­sel­wörtern kann die Sicht­barkeit der Seite in den Suchergeb­nis­sen erhöht wer­den. Außer­dem wird das Bild selb­st in der Google-Bilder­suche bess­er auffind­bar, was zusät­zlichen Traf­fic auf die Web­seite brin­gen kann.

Hier sind einige SEO-Vorteile von Alter­na­tiv­tex­ten:

1. Verbesserte Bilder­suche: Bilder mit gut geschriebe­nen Bildbeschrei­bun­gen haben eine höhere Chance, in den Google-Bilder­suchergeb­nis­sen zu erscheinen. Da viele Nutzer die Bilder­suche ver­wen­den, um visuelle Infor­ma­tio­nen zu find­en, kann dies den Traf­fic erhe­blich steigern.
2. Erhöhte Rel­e­vanz: Alter­na­tiv­texte helfen Such­maschi­nen, den Inhalt ein­er Seite bess­er zu ver­ste­hen. Dies kann dazu beitra­gen, dass die Seite für bes­timmte Schlüs­sel­wörter rel­e­van­ter erscheint und somit in den Suchergeb­nis­sen bess­er platziert wird.
3. Nutzer­erleb­nis opti­mieren: Web­sites, die bar­ri­ere­frei gestal­tet sind, bieten ein besseres Nutzer­erleb­nis. Zufriedene Nutzer ver­weilen länger auf der Seite und besuchen sie möglicher­weise erneut, was eben­falls pos­i­tive Auswirkun­gen auf das Rank­ing in den Suchergeb­nis­sen haben kann.

Bildbeschreibungen und die Keyword-Optimierung

Ein weit­er­er wichtiger Aspekt bei der Ver­wen­dung vom Alt-Text ist die Ein­bindung rel­e­van­ter Schlüs­sel­wörter. Das bedeutet jedoch nicht, dass Sie Ihre Bildbeschrei­bun­gen mit Key­words über­laden soll­ten – soge­nan­ntes Key­word-Stuff­ing kann sich neg­a­tiv auf die SEO auswirken. Der Text sollte organ­isch und sin­nvoll in den Inhalt inte­gri­ert wer­den.

Beispiel:
Wenn Ihre Web­seite ein Bild von einem Lap­top zeigt und Sie Key­words wie „Lap­top für Pro­gram­mier­er“ tar­getieren, sollte die Bildbeschrei­bung laut­en: „Lap­top für Pro­gram­mier­er auf einem Schreibtisch“. Das Key­word wird hier sin­nvoll und im Zusam­men­hang ver­wen­det.

Häufige Fehler bei Alternativtexten

Auch wenn Bildbeschrei­bun­gen ein­fach zu imple­men­tieren erscheinen, gibt es einige häu­fige Fehler, die Sie ver­mei­den soll­ten:

1. Fehlen­der Alt-Text: Viele Bilder im Web haben über­haupt keine Bildbeschrei­bun­gen. Dies ist nicht nur schlecht für die Bar­ri­ere­frei­heit, son­dern ver­schenkt auch SEO-Poten­tial.
2. Zu gener­ische Alter­na­tiv­texte: Texte wie „Bild“ oder „Grafik“ bieten keinen Mehrw­ert für den Nutzer oder die Such­mas­chine.
3. Über­ladung mit Schlüs­sel­wörtern: Zu lange oder mit Key­words über­füllte Bildbeschrei­bun­gen kön­nen das Nutzer­erleb­nis beein­trächti­gen und wirken sich neg­a­tiv auf die SEO aus.
4. Deko­ra­tive Bilder mit Alter­na­tiv­tex­ten: Bei rein deko­ra­tiv­en Bildern, die keine zusät­zliche Infor­ma­tion ver­mit­teln, soll­ten Sie leere Alt-Attribute ver­wen­den (alt=""), damit Screen­read­er diese Bilder ignori­eren.

Fazit

Alt-Texte sind ein entschei­den­des Werkzeug für die Bar­ri­ere­frei­heit und ein unverzicht­bar­er Bestandteil jed­er erfol­gre­ichen SEO-Strate­gie. Sie helfen nicht nur blind­en oder sehbe­hin­derten Nutzern, den Inhalt ein­er Web­seite zu ver­ste­hen, son­dern tra­gen auch dazu bei, dass Such­maschi­nen den visuellen Con­tent ein­er Web­seite bess­er inter­pretieren kön­nen.

Durch das Erstellen von sin­nvollen, präzisen und kon­textbe­zo­ge­nen Bildbeschrei­bun­gen kön­nen Sie sich­er­stellen, dass Ihre Web­seite sowohl benutzer­fre­undlich als auch such­maschi­nen­fre­undlich ist.

Nützliche Ressourcen für Alternativtexte und Barrierefreiheit

Hier sind einige hil­fre­iche Links, die sich mit dem The­ma Alter­na­tiv­texte (Alt-Text) und Bar­ri­ere­frei­heit befassen:

1. W3C Resources on Alter­na­tive Text: Diese Seite bietet eine umfassende Anleitung zur Erstel­lung von Alter­na­tiv­tex­ten gemäß den WCAG 2.0 Richtlin­ien. Hier erfährst du, wie du nüt­zliche Alt-Texte erstellst und welche Best Prac­tices es gibt, um die Bar­ri­ere­frei­heit zu gewährleis­ten.
   • W3C Alter­na­tive Text Resources​(W3C)
2. MDN Web Docs: Under­stand­ing Web Con­tent Acces­si­bil­i­ty Guide­lines (WCAG): Ein Artikel, der die Web Con­tent Acces­si­bil­i­ty Guide­lines (WCAG) erk­lärt und Anleitun­gen zur Ein­hal­tung dieser Stan­dards für Entwick­ler bietet. Beson­ders hil­fre­ich, um die Prinzip­i­en der Bar­ri­ere­frei­heit zu ver­ste­hen.
   • MDN WCAG Guide­lines​(MDN Web Docs)
3. WCAG 2.0 Suc­cess Cri­te­ria 1.1.1 — Non-text Con­tent: Dieser Abschnitt der WCAG 2.0 erk­lärt die Anforderun­gen an Alter­na­tiv­texte und wie sie dazu beitra­gen, nicht-textuelle Inhalte zugänglich zu machen.
   • WCAG Non-Text Con­tent Guide­lines​(W3C)
4. Alt Text Best Prac­tices für bessere Zugänglichkeit und SEO: Hier find­est du prak­tis­che Tipps zur Verbesserung von Alt-Tex­ten, inklu­sive der Rolle von Alter­na­tiv­tex­ten in der SEO und der richti­gen Ver­wen­dung von Tex­tal­ter­na­tiv­en für Bilder und andere visuelle Inhalte.
   • WCAG: Mas­ter Alt Text​(WCAG)

Diese Links bieten dir tiefer­ge­hende Infor­ma­tio­nen zu Alt-Tex­ten und ihrer Rolle für Bar­ri­ere­frei­heit und SEO.