ALT-Text

Alt-Tex­te, auch als Alt-Attri­bu­te bekannt, sind kur­ze Beschrei­bun­gen, die den Inhalt von Bil­dern, Gra­fi­ken oder ande­ren visu­el­len Ele­men­ten auf einer Web­sei­te wie­der­ge­ben. Sie spie­len eine ent­schei­den­de Rol­le für die Bar­rie­re­frei­heit und sind gleich­zei­tig ein wert­vol­les Ele­ment für die Such­ma­schi­nen­op­ti­mie­rung (SEO). In die­sem Arti­kel erfährst du, was Alter­na­tiv­tex­te sind, wie sie funk­tio­nie­ren, war­um sie unver­zicht­bar für die Bar­rie­re­frei­heit sind und wel­chen Ein­fluss sie auf SEO haben.

Was sind Alter­na­tiv­tex­te?

Alter­na­tiv­tex­te sind Beschrei­bun­gen, die in den HTML-Code eines Bil­des ein­ge­fügt wer­den und für Nut­zer zugäng­lich sind, die das Bild nicht sehen kön­nen, sei es auf­grund tech­ni­scher Ein­schrän­kun­gen oder Behin­de­run­gen. Die Beschrei­bung bie­tet eine text­li­che Alter­na­ti­ve zum Bild und gibt des­sen Inhalt wie­der.

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

Die­se Tex­te wer­den von soge­nann­ten Screen­rea­dern, also Bild­schirm­le­se­ge­rä­ten, vor­ge­le­sen. Die­se Gerä­te wer­den von blin­den oder seh­be­hin­der­ten Nut­zern ver­wen­det, um Inhal­te im Web wahr­neh­men zu kön­nen. Alter­na­tiv­tex­te sind somit ein unver­zicht­ba­res Werk­zeug, um Infor­ma­tio­nen bar­rie­re­frei zugäng­lich zu machen.

Die Rol­le von Alt-Tex­ten für die Bar­rie­re­frei­heit

Die Bar­rie­re­frei­heit von Web­sei­ten ist ein zen­tra­ler Bestand­teil der moder­nen Web­ent­wick­lung und wird auch in ver­schie­de­nen Geset­zen und Richt­li­ni­en wie der BITV (Bar­rie­re­freie-Infor­ma­ti­ons­tech­nik-Ver­ord­nung) oder der WCAG (Web Con­tent Acces­si­bi­li­ty Gui­de­lines) fest­ge­legt. Die­se Richt­li­ni­en defi­nie­ren kla­re Vor­ga­ben, wie Web­sei­ten auf­ge­baut sein müs­sen, damit sie für alle Men­schen unein­ge­schränkt zugäng­lich sind.

Unter­stüt­zung für blin­de und seh­be­hin­der­te Men­schen

Für Per­so­nen, die auf Screen­rea­der ange­wie­sen sind, sind Alter­na­tiv­tex­te oft die ein­zi­ge Mög­lich­keit, zu ver­ste­hen, was auf einem Bild dar­ge­stellt ist. Ein gutes Bei­spiel hier­für ist die Beschrei­bung eines Dia­gramms oder eines kom­ple­xen Bil­des: Ohne eine detail­lier­te Erklä­rung wür­den blin­de Nut­zer wich­ti­ge Infor­ma­tio­nen nicht erhal­ten.

Durch die­se Bild­be­schrei­bun­gen wird der visu­el­le Inhalt für alle zugäng­lich gemacht. Ein wich­ti­ger Grund­satz hier­bei ist, dass die Beschrei­bung den tat­säch­li­chen Inhalt des Bil­des wider­spie­gelt und kon­tex­tu­ell rele­vant bleibt.

Bei­spiel:
Ein Bild von einem Hund im Park könn­te den Alter­na­tiv­text „Hund spielt im Park“ haben. Die­se Beschrei­bung erklärt genau, was auf dem Bild zu sehen ist, und gibt Nut­zern eine Vor­stel­lung davon, was sie nicht sehen kön­nen.

War­um all­ge­mei­ne Beschrei­bun­gen nicht aus­rei­chen

Ein häu­fi­ger Feh­ler bei der Erstel­lung von Bild­be­schrei­bun­gen ist, dass sie ent­we­der zu all­ge­mein oder zu wenig aus­sa­ge­kräf­tig sind. Ein Text wie „Bild“ oder „Gra­fik“ ist nicht hilf­reich, da er kei­ne wirk­li­che Infor­ma­ti­on über den Bild­in­halt lie­fert. Alter­na­tiv­tex­te soll­ten immer das beschrei­ben, was auf dem Bild dar­ge­stellt wird, und die Funk­ti­on des Bil­des im Kon­text des Inhalts berück­sich­ti­gen.

Bei deko­ra­ti­ven Bil­dern, die kei­ne rele­van­te Infor­ma­ti­on ver­mit­teln, kön­nen Alter­na­tiv­tex­te hin­ge­gen weg­ge­las­sen oder als leer mar­kiert wer­den (alt=""). So ver­hin­dern Sie, dass Screen­rea­der unnö­ti­ge Infor­ma­tio­nen vor­le­sen, die den Nut­zer mög­li­cher­wei­se von wich­ti­ge­ren Inhal­ten ablen­ken.

Wie schreibt man effek­ti­ve Alter­na­tiv­tex­te?

Das Ver­fas­sen eines guten Bild­be­schrei­bungs-Tex­tes erfor­dert etwas Übung und ein gutes Ver­ständ­nis des Kon­texts, in dem das Bild ver­wen­det wird. Hier sind eini­ge grund­le­gen­de Richt­li­ni­en, die bei der Erstel­lung von Alter­na­tiv­tex­ten beach­tet wer­den soll­ten:

  1. Kurz und prä­gnant: Der Alt-Text soll­te das Bild in weni­gen Wor­ten tref­fend beschrei­ben, ohne unnö­ti­ge Details hin­zu­zu­fü­gen. Eine Län­ge von 100 Zei­chen oder weni­ger ist in der Regel ide­al.
  2. Den Inhalt und die Funk­ti­on beschrei­ben: Die Bild­be­schrei­bung soll­te sowohl wie­der­ge­ben, was auf dem Bild zu sehen ist, als auch des­sen Funk­ti­on im Zusam­men­hang mit dem rest­li­chen Inhalt erklä­ren. Wenn das Bild bei­spiels­wei­se ein Call-to-Action-But­ton ist, soll­te dies im Text erwähnt wer­den.
  3. Kon­text berück­sich­ti­gen: Der Alter­na­tiv­text soll­te immer den Kon­text des Bil­des berück­sich­ti­gen. Ist das Bild eine Illus­tra­ti­on eines The­mas? Unter­stützt es den Text in irgend­ei­ner Wei­se? Die­se Fra­gen hel­fen dabei, den rich­ti­gen Alter­na­tiv­text zu fin­den.
  4. Kei­ne Red­un­danz: Wenn die Bild­un­ter­schrift bereits den Inhalt des Bil­des erklärt, muss der Alter­na­tiv­text nicht red­un­dant sein. In sol­chen Fäl­len kann der Text auf deko­ra­ti­ve Funk­ti­on gesetzt wer­den.
  5. Ver­mei­den Sie Begrif­fe wie “Bild von”: Die Beschrei­bung soll­te kei­ne über­flüs­si­gen Infor­ma­tio­nen wie „Bild von“ oder „Foto von“ ent­hal­ten. Screen­rea­der wei­sen die Nut­zer bereits dar­auf hin, dass es sich um ein Bild han­delt, daher soll­ten Sie direkt zur Beschrei­bung über­ge­hen.

Bei­spiel:
Statt “Bild von einem roten Auto” könn­te die Beschrei­bung ein­fach „rotes Auto“ lau­ten.

Die Bedeu­tung von Bild­be­schrei­bun­gen für SEO

Neben der Ver­bes­se­rung der Bar­rie­re­frei­heit spie­len Bild­be­schrei­bun­gen auch eine wich­ti­ge Rol­le in der Such­ma­schi­nen­op­ti­mie­rung (SEO). Bil­der selbst kön­nen von Such­ma­schi­nen nicht direkt „gele­sen“ wer­den – sie ver­las­sen sich auf den umge­ben­den Text und die Alter­na­tiv­tex­te, um den Inhalt des Bil­des zu inter­pre­tie­ren. Ein gut for­mu­lier­ter Alt-Text kann dazu bei­tra­gen, dass eine Web­sei­te in den Such­ergeb­nis­sen höher ein­ge­stuft wird und dass die Bil­der selbst in den Such­ergeb­nis­sen erschei­nen.

Wie Alt-Tex­te SEO unter­stüt­zen

Such­ma­schi­nen wie Goog­le ver­wen­den Bild­be­schrei­bun­gen, um bes­ser zu ver­ste­hen, wor­um es auf einer Web­sei­te geht. Durch die Beschrei­bung des Bild­in­halts mit rele­van­ten Schlüs­sel­wör­tern kann die Sicht­bar­keit der Sei­te in den Such­ergeb­nis­sen erhöht wer­den. Außer­dem wird das Bild selbst in der Goog­le-Bil­der­su­che bes­ser auf­find­bar, was zusätz­li­chen Traf­fic auf die Web­sei­te brin­gen kann.

Hier sind eini­ge SEO-Vor­tei­le von Alter­na­tiv­tex­ten:

  1. Ver­bes­ser­te Bil­der­su­che: Bil­der mit gut geschrie­be­nen Bild­be­schrei­bun­gen haben eine höhe­re Chan­ce, in den Goog­le-Bil­der­such­er­geb­nis­sen zu erschei­nen. Da vie­le Nut­zer die Bil­der­su­che ver­wen­den, um visu­el­le Infor­ma­tio­nen zu fin­den, kann dies den Traf­fic erheb­lich stei­gern.
  2. Erhöh­te Rele­vanz: Alter­na­tiv­tex­te hel­fen Such­ma­schi­nen, den Inhalt einer Sei­te bes­ser zu ver­ste­hen. Dies kann dazu bei­tra­gen, dass die Sei­te für bestimm­te Schlüs­sel­wör­ter rele­van­ter erscheint und somit in den Such­ergeb­nis­sen bes­ser plat­ziert wird.
  3. Nut­zer­er­leb­nis opti­mie­ren: Web­sites, die bar­rie­re­frei gestal­tet sind, bie­ten ein bes­se­res Nut­zer­er­leb­nis. Zufrie­de­ne Nut­zer ver­wei­len län­ger auf der Sei­te und besu­chen sie mög­li­cher­wei­se erneut, was eben­falls posi­ti­ve Aus­wir­kun­gen auf das Ran­king in den Such­ergeb­nis­sen haben kann.

Bild­be­schrei­bun­gen und die Key­word-Opti­mie­rung

Ein wei­te­rer wich­ti­ger Aspekt bei der Ver­wen­dung vom Alt-Text ist die Ein­bin­dung rele­van­ter Schlüs­sel­wör­ter. Das bedeu­tet jedoch nicht, dass Sie Ihre Bild­be­schrei­bun­gen mit Key­words über­la­den soll­ten – soge­nann­tes Key­word-Stuf­fing kann sich nega­tiv auf die SEO aus­wir­ken. Der Text soll­te orga­nisch und sinn­voll in den Inhalt inte­griert wer­den.

Bei­spiel:
Wenn Ihre Web­sei­te ein Bild von einem Lap­top zeigt und Sie Key­words wie „Lap­top für Pro­gram­mie­rer“ tar­ge­tie­ren, soll­te die Bild­be­schrei­bung lau­ten: „Lap­top für Pro­gram­mie­rer auf einem Schreib­tisch“. Das Key­word wird hier sinn­voll und im Zusam­men­hang ver­wen­det.

Häu­fi­ge Feh­ler bei Alter­na­tiv­tex­ten

Auch wenn Bild­be­schrei­bun­gen ein­fach zu imple­men­tie­ren erschei­nen, gibt es eini­ge häu­fi­ge Feh­ler, die Sie ver­mei­den soll­ten:

  1. Feh­len­der Alt-Text: Vie­le Bil­der im Web haben über­haupt kei­ne Bild­be­schrei­bun­gen. Dies ist nicht nur schlecht für die Bar­rie­re­frei­heit, son­dern ver­schenkt auch SEO-Poten­ti­al.
  2. Zu gene­ri­sche Alter­na­tiv­tex­te: Tex­te wie „Bild“ oder „Gra­fik“ bie­ten kei­nen Mehr­wert für den Nut­zer oder die Such­ma­schi­ne.
  3. Über­la­dung mit Schlüs­sel­wör­tern: Zu lan­ge oder mit Key­words über­füll­te Bild­be­schrei­bun­gen kön­nen das Nut­zer­er­leb­nis beein­träch­ti­gen und wir­ken sich nega­tiv auf die SEO aus.
  4. Deko­ra­ti­ve Bil­der mit Alter­na­tiv­tex­ten: Bei rein deko­ra­ti­ven Bil­dern, die kei­ne zusätz­li­che Infor­ma­ti­on ver­mit­teln, soll­ten Sie lee­re Alt-Attri­bu­te ver­wen­den (alt=""), damit Screen­rea­der die­se Bil­der igno­rie­ren.

Fazit

Alt-Tex­te sind ein ent­schei­den­des Werk­zeug für die Bar­rie­re­frei­heit und ein unver­zicht­ba­rer Bestand­teil jeder erfolg­rei­chen SEO-Stra­te­gie. Sie hel­fen nicht nur blin­den oder seh­be­hin­der­ten Nut­zern, den Inhalt einer Web­sei­te zu ver­ste­hen, son­dern tra­gen auch dazu bei, dass Such­ma­schi­nen den visu­el­len Con­tent einer Web­sei­te bes­ser inter­pre­tie­ren kön­nen.

Durch das Erstel­len von sinn­vol­len, prä­zi­sen und kon­text­be­zo­ge­nen Bild­be­schrei­bun­gen kön­nen Sie sicher­stel­len, dass Ihre Web­sei­te sowohl benut­zer­freund­lich als auch such­ma­schi­nen­freund­lich ist.

Nütz­li­che Res­sour­cen für Alter­na­tiv­tex­te und Bar­rie­re­frei­heit

Hier sind eini­ge hilf­rei­che Links, die sich mit dem The­ma Alter­na­tiv­tex­te (Alt-Text) und Bar­rie­re­frei­heit befas­sen:

  1. W3C Resour­ces on Alter­na­ti­ve Text: Die­se Sei­te bie­tet eine umfas­sen­de Anlei­tung zur Erstel­lung von Alter­na­tiv­tex­ten gemäß den WCAG 2.0 Richt­li­ni­en. Hier erfährst du, wie du nütz­li­che Alt-Tex­te erstellst und wel­che Best Prac­ti­ces es gibt, um die Bar­rie­re­frei­heit zu gewähr­leis­ten.
  2. MDN Web Docs: Under­stan­ding Web Con­tent Acces­si­bi­li­ty Gui­de­lines (WCAG): Ein Arti­kel, der die Web Con­tent Acces­si­bi­li­ty Gui­de­lines (WCAG) erklärt und Anlei­tun­gen zur Ein­hal­tung die­ser Stan­dards für Ent­wick­ler bie­tet. Beson­ders hilf­reich, um die Prin­zi­pi­en der Bar­rie­re­frei­heit zu ver­ste­hen.
  3. WCAG 2.0 Suc­cess Cri­te­ria 1.1.1 - Non-text Con­tent: Die­ser Abschnitt der WCAG 2.0 erklärt die Anfor­de­run­gen an Alter­na­tiv­tex­te und wie sie dazu bei­tra­gen, nicht-tex­tu­el­le Inhal­te zugäng­lich zu machen.
  4. Alt Text Best Prac­ti­ces für bes­se­re Zugäng­lich­keit und SEO: Hier fin­dest du prak­ti­sche Tipps zur Ver­bes­se­rung von Alt-Tex­ten, inklu­si­ve der Rol­le von Alter­na­tiv­tex­ten in der SEO und der rich­ti­gen Ver­wen­dung von Text­al­ter­na­ti­ven für Bil­der und ande­re visu­el­le Inhal­te.

Die­se Links bie­ten dir tie­fer­ge­hen­de Infor­ma­tio­nen zu Alt-Tex­ten und ihrer Rol­le für Bar­rie­re­frei­heit und SEO.

Bleib auf dem Laufenden: Barrierefreiheit im Fokus

Möchtest du mehr über Barrierefreiheit erfahren und wissen, wie du deine Website für alle zugänglicher machst? Dann melde dich jetzt für unsere kostenlose Newsletter-Serie an! In regelmäßigen Abständen erhältst du wertvolle Tipps und praxisnahe Anleitungen rund um das Thema barrierefreies Webdesign – verständlich und direkt in dein Postfach.

Jetzt anmelden und keine wichtigen Inhalte mehr verpassen!

Ich stimme zu, dass ich regelmäßig den Newsletter von die mainagentur zum Thema Webdesign, Social Media und WordPress erhalte. Ich kann meine Einwilligung jederzeit kostenfrei für die Zukunft per E-Mail an info@die-mainagentur.de widerrufen. Detaillierte Informationen zum Umgang mit Ihren Daten und der von uns eingesetzten Newsletter-Software “Mailpoet” findest Du in unserer Datenschutzerklärung.

Mehr Begriffe zur digitalen Barrierefreiheit:

Artikel zur Barrierefreiheit: