Wie kann ich Alt-Texte in Gutenberg richtig setzen?

Die Barrierefreiheit einer Webseite ist entscheidend, um sicherzustellen, dass sie für alle Nutzer, einschließlich Menschen mit Behinderungen, zugänglich ist. Einer der wichtigsten Aspekte der Web Accessibility ist die korrekte Verwendung von Alt-Texten (alternativen Beschreibungen für Bilder), insbesondere wenn man eine barrierefreie Webseite erstellen möchte. WordPress-Nutzer, die den Gutenberg-Editor verwenden, haben verschiedene Möglichkeiten, Alt-Texte effektiv zu setzen. In diesem Beitrag erklären wir Schritt für Schritt, wie es geht, warum es wichtig ist und welche Tools, einschließlich WP One Tap, die Einhaltung der WCAG-Richtlinien erleichtern.

Warum sind Alt-Texte wichtig für die Barrierefreiheit einer Webseite?

Alt-Texte dienen mehreren wichtigen Zwecken:

• Zugänglichkeit für Sehbehinderte: Screenreader lesen den Alt-Text vor, sodass blinde oder sehbehinderte Nutzer den Inhalt verstehen können.
• SEO-Vorteile: Suchmaschinen wie Google nutzen Alt-Texte, um Bildinhalte zu interpretieren, was zu besseren Rankings beitragen kann.
• Darstellungsprobleme ausgleichen: Falls ein Bild nicht geladen wird, wird der Alt-Text als Ersatz angezeigt.

Die WCAG-Richtlinien für Alt-Texte verstehen

Die Web Content Accessibility Guidelines (WCAG) geben klare Vorgaben für Alt-Texte:

• WCAG 1.1.1 Nicht-Text-Inhalte: Bilder müssen eine alternative Darstellung bieten, die den Nutzern die gleiche Information vermittelt.
• Kontext beachten: Alt-Texte sollten den Inhalt und Zweck des Bildes passend beschreiben, ohne überflüssige Informationen.
• Dekorative Bilder auslassen: Falls ein Bild rein dekorativ ist, kann das Alt-Attribut leer sein (alt=""), um Screenreader nicht unnötig zu belasten.

So setzt du Alt-Texte in Gutenberg richtig

In WordPress' Gutenberg-Editor kannst du Alt-Texte einfach hinzufügen oder bearbeiten. Folge diesen Schritten:

1. Bild in den Beitrag einfügen

• Klicke auf das „+“-Symbol und wähle den Block „Bild“.
• Lade ein neues Bild hoch oder wähle eines aus der Mediathek.

2. Alt-Text in der Mediathek setzen

• Wähle das Bild in der Mediathek aus.
• Trage im Feld „Alternativer Text“ eine klare und prägnante Beschreibung ein.
• Klicke auf „Einfügen“, um das Bild samt Alt-Text in den Beitrag zu übernehmen.

3. Alt-Text direkt über die Block-Einstellungen hinzufügen

• Klicke auf das eingefügte Bild.
• Im rechten Seitenmenü findest du das Feld „Alternativer Text“.
• Ergänze hier eine relevante Beschreibung des Bildes.

Hier ein Beispiel:

<img src="bild.jpg" alt="Lächelnde Frau mit Laptop nutzt eine barrierefreie Webseite">

Tipp: Vermeide redundante Worte wie „Bild von“ oder „Foto von“, da Screenreader bereits erkennen, dass es sich um ein Bild handelt.

Der richtige Alt-Text: Beispiele im Vergleich

Bildinhalt	Schlechter Alt-Text	Guter Alt-Text
Ein Mann im Rollstuhl benutzt ein Tablet	„Behinderter Mann“	„Mann im Rollstuhl, der ein Tablet zur Navigation verwendet“
Ein Diagramm zeigt steigende Umsätze	„Diagramm“	„Balkendiagramm mit steigenden Umsätzen von 2020 bis 2023“
Dekoratives Trennsymbol	„Trennlinie“	alt="" (leer lassen)

Accessibility Plugins für WordPress

Neben der manuellen Optimierung gibt es Accessibility Plugins für WordPress, die dir bei der Barrierefreiheit helfen. Ein besonders empfehlenswertes Tool ist WP One Tap.

Vorteile von WP One Tap

WP One Tap ist eine leistungsstarke Lösung zur Optimierung der Barrierefreiheit in WordPress-Seiten. Es bietet:

• Automatische Barrierefreiheits-Checks für Bilder, Formulare und Navigationselemente.
• Einhaltung der WCAG-Richtlinien, um gesetzliche Anforderungen wie die EU-Richtlinie zur digitalen Barrierefreiheit zu erfüllen.
• Features wie Tastatur-Navigation und Farbkontrasteinstellungen, um die Bedienbarkeit für alle Nutzer zu verbessern.

WP One Tap einrichten

1. Installiere das Plugin über das WordPress-Backend unter Plugins > Installieren.
2. Aktiviere es und passe die Einstellungen unter Einstellungen > WP One Tap an.
3. Nutze den Accessibility-Scanner, um Verbesserungen für Alt-Texte und andere Barrierefreiheitsaspekte zu identifizieren.

Hier erfährst du mehr über WP One Tap.

Fazit

Die korrekte Verwendung von Alt-Texten in Gutenberg ist ein zentraler Bestandteil der Web Accessibility. Sie verbessert nicht nur die Benutzerfreundlichkeit von Webseiten, sondern hilft auch bei der Einhaltung der WCAG-Richtlinien. WordPress-Nutzer profitieren von Plugins wie WP One Tap, die Barrierefreiheitsprüfungen automatisieren und die Compliance mit modernen Standards erleichtern.

Wer eine barrierefreie Webseite erstellen möchte, sollte kontinuierlich Alt-Texte optimieren und auf Tools setzen, die die Zugänglichkeit verbessern.

---

Häufig gestellte Fragen (FAQ)

1. Was ist ein Alt-Text?

Ein Alt-Text ist eine alternative Bildbeschreibung, die von Screenreadern gelesen wird, um sehbehinderten Menschen den Bildinhalt zugänglich zu machen.

2. Sind Alt-Texte für SEO wichtig?

Ja, Alt-Texte helfen Suchmaschinen, Bilder besser zu interpretieren, was zu einer besseren Auffindbarkeit der Webseite beitragen kann.

3. Kann ich automatische Alt-Texte generieren?

Es gibt Plugins, die Alt-Texte generieren, aber manuelle Eingaben sind oft präziser und kontextbezogener.

4. Muss jedes Bild einen Alt-Text haben?

Nein, dekorative Bilder sollten mit alt="" ausgezeichnet werden, um Screenreader-Nutzer nicht zu stören.

5. Ist WP One Tap kostenlos?

WP One Tap bietet sowohl eine kostenlose als auch eine Premium-Version mit erweiterten Barrierefreiheits-Features. Details findest du auf der offiziellen WP One Tap Webseite.

Mit diesen Tipps und Tools gelingt es dir, eine WordPress-Seite barrierefrei zu gestalten und von besserer Usability sowie SEO zu profitieren.