# Barrierefreie Bilder: Alt-Texte richtig einsetzen (WCAG Tipps) 22. März 2026 Viele Websites haben Bilder ohne Alt-Texte. **Ohne Alt-Texte sind Inhalte für Screenreader unsichtbar.** **Das betrifft auch Firmenwebsites, Shops und Vereinsseiten.** **Die Folge:** - Inhalte gehen verloren - Seiten wirken unvollständig - Potenzielle Kunden springen ab ## Was Alt-Texte leisten Alt-Texte beschreiben Bilder für: - Screenreader - Suchmaschinen - Fälle, in denen Bilder nicht angezeigt werden ![Illustration zur Barrierefreiheit mit Laptop, Lupe auf „ALT“ und symbolischer Person zur Nutzung von Alt-Texten](https://www.adiheutschi.ch/images/barrierefrei/barrierefreie-bilder-alt-texte-richtig.jpg) > Ein grosser Teil der Barrierefreiheit entsteht nicht im Code, sondern im Inhalt! ## Was ist ein Alt-Text? Ein Alt-Text ist eine kurze **Beschreibung** eines Bildes. Er wird im HTML hinterlegt und von **Screenreadern vorgelesen.** So können auch Menschen mit Sehbehinderungen verstehen, welche Informationen ein Bild enthält. Der Alt-Text wird nicht immer sichtbar angezeigt. Er ist Teil der technischen Struktur der Website und ergänzt den Inhalt. **Wichtig**: Ein Alt-Text beschreibt nicht einfach das Bild. Er beschreibt die Information, die das Bild im aktuellen Kontext vermittelt. ## Warum Alt-Texte wichtig sind Barrierefreie Inhalte sorgen dafür, dass Ihre Website von allen Menschen genutzt werden kann. Auch von Personen mit Einschränkungen beim Sehen, Hören oder Verstehen. Ein grosser Teil der Barrierefreiheit entsteht nicht im Code, sondern im Inhalt. Genau dort haben Redakteure den grössten Einfluss. ## Was bringt dir das konkret - Inhalte werden verständlich - Nutzer bleiben länger - bessere Auffindbarkeit bei Google weniger Absprünge # Beispiel: visuell vs. Screenreader ### Perspektive sehender Nutzer ![Alpenlandschaft mit Berggipfel im Sonnenlicht](https://www.adiheutschi.ch/images/yootheme/pexels-photo-36505950.jpeg) ### Perspektive blinder Nutzer **Beispiel schlecht** **alt="IMG-07975615818414.jpg** - Kein Inhalt erkennbar - Dateiname ohne Bedeutung - Screenreader-Nutzer erhalten keine Information - Bild ist faktisch „unsichtbar“ ### Perspektive blinder Nutzer **Beispiel gut** **alt="Alpenlandschaft mit Berggipfel im Sonnenlicht"** - Beschreibt den Bildinhalt klar - Kurz und verständlich - Screenreader gibt sinnvolle Information aus - Nutzer versteht, was gezeigt wird > Regel: Alt-Text beschreibt das, was für den Inhalt der Seite wichtig ist. Nicht mehr, nicht weniger. ## Typische Fehler bei Alt-Texte Häufige Fehler und Probleme: **Alt-Texte bei Bilder:** - Alt-Text fehlt komplett - Dateiname wird automatisch übernommen - Beschreibung ist zu allgemein - wichtige Inhalte im Bild werden nicht erklärt **Alt-Texte bei Teaserbildern** - Alt-Text fehlt komplett - Dateinamen als Alt-Text - zu allgemeine Alt-Texte - identische Alt-Texte bei verschiedenen Bildern - falscher Einsatz von alt="" **Beispiel schlecht**: „**bild123.jpg**“. Der Screenreader liest: "**Bild123 punkt jpg**" vor. **Beispiel gut**: „Berge mit Sonne“ ![Illustration mit Beispielen mit fehlerhaften Alt-Text Bezeichnungen](https://www.adiheutschi.ch/media/yootheme/cache/f3/haeufige-alt-text-fehler-f3e83ea9.png?src=images/barrierefrei/haeufige-alt-text-fehler.png&thumbnail=250,375,&hash=92099959) ### Beispiel: Alt Texte einfügen im Joomla! Beiträgen **Reiter: Bilder und Links** (Einleitungsbild und Komplettes Beitragsbild) [### **Kein Alt-Text** ![Beispiel Bild-ohne Alt-Text](https://www.adiheutschi.ch/images/barrierefrei/einleitungsbild-ohne-alt-text-b.png)**Für Screenreader unsichtbar!** Code: <img src="/berge.jpg"> ](https://www.adiheutschi.ch/images/barrierefrei/einleitungsbild-ohne-alt-text-b.png) [### Mit Alt-Text ![Beispiel Bild-mit Alt-Text](https://www.adiheutschi.ch/images/barrierefrei/einleitungsbild-mit-alt-text.png)**Alt-Text: Berge mit Sonne** Code: <img src="/berge.jpg" alt="Berglandschaft bei Sonnenschein"> ](https://www.adiheutschi.ch/images/barrierefrei/einleitungsbild-mit-alt-text.png) ### Alt-Text Code Beispiel ``` Berglandschaft bei Sonnenschein ``` ## So schreibst du gute Alt-Texte Bilder transportieren Informationen. Für Menschen mit Sehbehinderungen sind sie ohne Beschreibung jedoch nicht zugänglich. Deshalb braucht jedes relevante Bild eine kurze, klare **Beschreibung**. Diese wird im **sogenannten Alt-Text** hinterlegt. **Halte dich an diese Regeln:** - **Beschreibe, was relevant is**t (Beschreiben Sie, was auf dem Bild zu sehen ist) - **Bleib kurz und konkret** (Konzentrieren Sie sich auf die wesentliche Aussage) - **Verzichte auf „Bild von“** (Vermeiden Sie unnötige Details) - **Nutze klare Begriffe** ## Alt-Texte im Kontext richtig einsetzen **Dasselbe Bild kann je nach Inhalt unterschiedlich beschrieben werden.** ![Berg mit Sonne, als Beispiel für verschiedene Alt-Text Beschreibungen](https://www.adiheutschi.ch/images/barrierefrei/berg-mit-sonne.png) #### Beispiele Alt-Text nach Kontext: Hier sind passende Beispiele für das Bild „Berge mit Sonne“, je nach Kontext: | Allgemein | Alt-Text: | **Berge mit Sonne** | |---|---|---| | Etwas präziser | Alt-Text: | **Berglandschaft bei Sonnenschein** | | Für Tourismus | Alt-Text: | **Bergpanorama bei sonnigem Wetter** | | Für Ferienregion | Alt-Text: | **Sonnige Berglandschaft als Reiseziel** | | Für dekorativen Einsatz | Alt-Text: | **alt=****""** | ## Häufige Fehler vermeiden > **Keine Einleitungen wie „Bild von“ oder „Foto zeigt“ verwenden.** Screenreader erkennen bereits, dass es sich um ein Bild handelt. Beschreiben Sie den Inhalt direkt und ohne unnötige Einleitung. ## Bildtypen und passende Beschreibungen [ ![Alt Attribut für Dekorative Bilder](https://www.adiheutschi.ch/images/barrierefrei/dekoratives-bild.png) ### Dekoratives Bild Dekorative Bilder ohne Informationsgehalt erhalten ein leeres Alt-Attribut (alt=""). So werden sie von Screenreadern ignoriert. **Wird von Screenreader ignoriert!** ](https://www.adiheutschi.ch/images/barrierefrei/dekoratives-bild.png) [ ![Bild mit Diagramm und Beschreibung](https://www.adiheutschi.ch/images/barrierefrei/bild%20mit%20diagramm.png) ### Bild mit Diagramm Komplexe Grafiken, zum Beispiel Diagramme, sollten separat beschrieben werden, da die Bildbeschreibung kurz gehalten wird. **Alt-Text: Die Grafik zeigt die Übernachtungszahlen in Zermatt der letzten fünf Jahre mit Einbruch 2020 und anschliessender Erholung.** ](https://www.adiheutschi.ch/images/barrierefrei/bild%20mit%20diagramm.png) [ ![Bild mit als Link Beispiel](https://www.adiheutschi.ch/images/barrierefrei/bild-als-link.png) ### Bild als Link Wenn ein Bild gleichzeitig als Link dient, beschreibt der Alt-Text das Ziel des Links. **Alt-Text: Tourismus Zermatt – zur Website** ](https://www.adiheutschi.ch/images/barrierefrei/bild-als-link.png) ## Weitere Tipps für Alt-Texte ### Alt-Texte kurz halten **Alt-Texte** sollten knapp und verständlich formuliert sein. In den meisten Fällen reicht ein kurzer Satz mit ungefähr **100 Zeichen**. ### Alt-Texte helfen auch bei der Auffindbarkeit Alt-Texte verbessern nicht nur die Barrierefreiheit. Sie liefern auch zusätzliche Informationen für Suchmaschinen. Gut beschriebene Bilder können die Auffindbarkeit Ihrer Inhalte unterstützen. ### Alt-Text und Bildunterschrift unterscheiden Der Alt-Text ist technisch und wird von Screenreadern genutzt. Die Bildunterschrift ist sichtbar und ergänzt den Inhalt für alle Nutzer. Beide haben unterschiedliche Aufgaben und sollten gezielt eingesetzt werden. ## Checkliste für Alt-Texte: - beschreibt das Wesentliche - passt zum Kontext - keine unnötigen Wörter - nicht zu lang (ca. 100 Zeichen) - kein „Bild von“ - Dekorative Bilder erhalten ein leeres Alt-Attribut: alt="" ## Alt-Texte: Tools sehen nur die Hälfte Tools prüfen nur das Vorhandensein. Ob der Alt-Text sinnvoll ist, erkennt nur ein Mensch. [Mehr erfahren](https://www.joomla.de/wissen/joomla-tipps-und-tricks/die-schwachstellen-von-tools-zum-testen-der-barrierefreiheit-alt-text) ## Wenn Sie wissen möchten, wo Ihre Website aktuell steht: Kostenlose Ersteinschätzung Ihrer Website Ich prüfe Ihre Website und gebe Ihnen eine klare erste Einschätzung. **Sie erfahren:** - ob Handlungsbedarf besteht - wo erste Schwachstellen liegen [ Webseiten-Check ](#kontakt) ## Webseiten-Check Kostenlose Ersteinschätzung Ihrer Website Ich werfe einen kurzen Blick auf Ihre Website und gebe Ihnen eine erste Einschätzung. ### Sie erfahren: - ob Handlungsbedarf besteht - wo erste Schwachstellen liegen Unverbindlich und kostenlos. Wenn Sie eine erste Einschätzung möchten, starten Sie kostenlos. Wenn Sie konkrete Empfehlungen brauchen, lohnt sich der detaillierte Website-Check. --- Detaillierter Website-Check ab CHF 120.- (exkl. 8.1% Mwst.) Wenn Sie es genauer wissen möchten: Ich analysiere Ihre Website und zeige Ihnen konkrete Schwachstellen und Verbesserungsmöglichkeiten. ### Sie erhalten: - klare Einschätzung Ihrer Website - konkrete Schwachstellen - direkt umsetzbare Empfehlungen Sie erhalten eine ehrliche Einschätzung, ob sich Optimierungen für Ihre Website lohnen. ### So läuft es ab: - Analyse Ihrer Website im Hintergrund - Ergebnis als kompakte Zusammenfassung per E-Mail - auf Wunsch kurze Besprechung per Telefon oder Video Webseiten-Check Bestellen *Anrede Ich möchte \* Kostenlose Ersteinschätzung Ihrer Website Detaillierter Website-Check zum Preis von CHF 120.– (exkl. 8.1 % MwSt). ## Weitere Beiträge zum Thema: Barrierefrei [### Barrierefreiheit betrifft jede Webseite ![Barrierefreiheit betrifft jede Webseite](https://www.adiheutschi.ch/media/yootheme/cache/38/barrierefrei-und-zugaengliche-Webseiten-38b69b94.jpg?src=images/barrierefrei/barrierefrei-und-zugaengliche-Webseiten.jpg&thumbnail=330,220,&hash=8d061c76)Mehr erfahren ](https://www.adiheutschi.ch/index.php?option=com_content&view=article&id=774:barrierefreiheit-betrifft-jede-webseite&catid=27) [### Barrierefreie Bilder: Alt-Texte richtig einsetzen (WCAG Tipps) ![Barrierefreie Bilder: Alt-Texte richtig einsetzen (WCAG Tipps)](https://www.adiheutschi.ch/media/yootheme/cache/99/barrierefreie-bilder-alt-texte-richtig-99822466.jpg?src=images/barrierefrei/barrierefreie-bilder-alt-texte-richtig.jpg&thumbnail=330,220,&hash=eea744dd)Mehr erfahren ](https://www.adiheutschi.ch/index.php?option=com_content&view=article&id=773:barrierefreie-bilder-alt-texte-richtig-einsetzen-wcag-tipps&catid=27) [### Die Schwachstellen von Tools zum Testen der Barrierefreiheit – Alt-Text ![Joomla Beitragsbild zum Thema Alt Tags. Blatt Papier mit handgeschriebenem Wort "Alt Tags", mit gelber Farbe umkreist.](https://www.adiheutschi.ch/media/yootheme/cache/bd/ALT-Text-JCM-June-1069-bd29ff04.jpg?src=images/barrierefrei/ALT-Text-JCM-June-1069.jpg&thumbnail=330,152,&hash=3d548a4d)Mehr erfahren ](https://www.joomla.de/wissen/joomla-tipps-und-tricks/die-schwachstellen-von-tools-zum-testen-der-barrierefreiheit-alt-text)