Alt-Text

Was ist Alt-Text?

Alt-Text (kurz für Alternativtext) ist eine schriftliche Beschreibung eines Bildes, die dem HTML-Code einer Webseite hinzugefügt wird. Er ermöglicht es Screenreadern und anderen Hilfstechnologien, blinden oder sehbehinderten Nutzern den Inhalt und Zweck visueller Elemente zu vermitteln.

Beispiel:

 

<img src="event.jpg" alt="Team feiert den Tag der Barrierefreiheit mit Luftballons und Bannern">

 

Wenn das Bild nicht geladen werden kann oder ein Benutzer auf einen Bildschirmleser angewiesen ist, stellt diese Beschreibung sicher, dass er trotzdem versteht, was das Bild darstellt.

Warum Alt-Text für die Barrierefreiheit im Web wichtig ist

Alt-Text spielt eine entscheidende Rolle bei der Zugänglichkeit von Webseiten und ist nach internationalen Standards wie

  • WCAG (Zugänglichkeitsrichtlinien für Webinhalte) - Alt-Text ist eine Anforderung der Stufe A.
  • ADA (Amerikanisches Gesetz für Menschen mit Behinderungen) - Das US-amerikanische Gesetz schreibt barrierefreies Design vor, einschließlich angemessener Bildbeschreibungen.
  • BFSG (Barrierefreiheitsstärkungsgesetz) - Das deutsche Barrierefreiheitsgesetz, das sich an den WCAG orientiert, betont ebenfalls die Notwendigkeit vonzugänglicher visueller Inhalte.

Ohne Alternativtext tappen Nutzer, die auf Hilfsmittel angewiesen sind, im wahrsten Sinne des Wortes im Dunkeln, wenn es um das Verständnis von Bildern, Grafiken, Icons und Infografiken geht.

Alt-Text überbrückt die Lücke zwischen visuellen Inhalten und integrativen Erfahrungen.

Effektive Verwendung von Alt-Text (für TYPO3, WordPress & mehr)

Unabhängig davon, ob Sie TYPO3, WordPress oder ein anderes CMS verwenden, hier sind Tipps für die Umsetzung:

  • Schreiben Sie prägnante, aussagekräftige Beschreibungen - Beschreiben Sie, was wichtig ist. Zum Beispiel für ein Logo: alt="NITSAN TYPO3 Agency logo"
  • Verwenden Sie integrierte Felder - TYPO3 und WordPress verfügen über eigene Alt-Text-Felder in den Mediatheken - nutzen Sie sie!
  • Dekorative Bilder? Verwenden Sie leere alt - Für rein dekoratives Bildmaterial verwenden Sie alt="", damit Screenreader sie überspringen.
  • Funktionale Bilder - Wenn ein Bild eine Schaltfläche oder ein Link ist, beschreiben Sie seineFunktionund nicht nur sein Aussehen (z. B. alt="Broschüre herunterladen").
  • Verwenden Sie Automatisierungstools sorgfältig - Einige Plugins versuchen eine automatische Beschreibung, aber überprüfen Sie immer die Klarheit und den Kontext.

Häufige Irrtümer und Missverständnisse

Lassen Sie uns einige häufige Fehler korrigieren:

❌ "Alt-Text ist optional." 
✔️ Nein, er ist für die Einhaltung der Barrierefreiheit und für SEO unerlässlich.

❌ "Sagen Sie einfach 'Bild' oder 'Foto'." 
✔️ Nicht hilfreich. Seien Sie konkret: "Frau mit Laptop und Blindenhund an ihrer Seite."

❌ "Alt-Text fördert die Suchmaschinenoptimierung, also füllen Sie ihn mit Schlüsselwörtern." 
✔️ Alt-Text kann die Suchmaschinenoptimierung unterstützen, aber das Ausfüllen mit Schlüsselwörtern schadet der Barrierefreiheit und verstößt gegen die WCAG-Best Practices.

❌ "Bei komplexen Infografiken kann ich den Alttext weglassen." 
✔️ Auch komplexe Grafiken brauchen Textalternativen, Zusammenfassungen oder längere Beschreibungen, die in der Nähe verlinkt sind.

Erkunden Sie verwandte Glossareinträge: Web-Zugänglichkeit, Screen Reader, ARIA-Labels

Wichtigste Erkenntnis

Bei Alt-Text geht es nicht nur um die Einhaltung von Vorschriften, sondern auch um die Kommunikation: Er macht Ihre Website integrativer, verständlicher und durchsuchbarer. Egal, ob Sie ein Produktbild, ein Blog-Banner oder ein Schaltflächensymbol hochladen, fragen Sie sich immer: "Wie würde ich das jemandem beschreiben, der es nicht sehen kann?"

Möchten Sie barrierefreie Inhalte meistern?

Schauen Sie sich unseren Alt Text Best Practices Guide an oder nutzen Sie den T3AA Accessibility Analyzer, um die Zugänglichkeit von Bildern auf Ihrer Website zu bewerten. Beschreiben Sie, was wichtig ist. Machen Sie jedes Bild wichtig.