Barrierefreiheit: Deine Bilder und Galerien vorbereiten
9 min
In diesem Artikel
- Alt-Text in deinem Editor hinzufügen
- Auf Einzelbildern
- Zu Galerien
- Alt-Text im Wizard für Barrierefreiheit hinzufügen
- Alt-Text mit KI generieren
- Bilder als dekorativ markieren
- Text in Bildern
- Bilder von Texten
Besucher mit Sehbehinderungen verwenden unter Umständen Hilfstechnologien wie Screenreader, um deine Website zu durchsuchen. Verwende Alt-Text, um deinen Bildern und Galerien Beschreibungen hinzuzufügen und sie für diese Besucher zugänglich zu machen.
Alt-Text bietet Informationen über deine Medien und hilft Suchmaschinen und Screenreadern, sie zu „lesen“.
Woher bezieht Wix seine Informationen?
- Wir geben Empfehlungen gemäß der Web Content Accessibility Guidelines (WCAG), die vom W3C entwickelt wurden.
- Dieser Artikel basiert auf den folgenden Erfolgskriterien:
Alt-Text in deinem Editor hinzufügen
Alt-Text sorgt dafür, dass Besucher, die Screenreader verwenden, auf den Inhalt deiner Website zugreifen und ihn verstehen können. Daher empfehlen wir, ihn zu allen relevanten Bildern hinzuzufügen, einschließlich Medien, die in Apps wie Wix Stores, Wix Bookings usw. angezeigt werden.
Auf Einzelbildern
Du kannst Bildern in deinem Website-Builder (Wix Editor und Studio Editor) über das Einstellungen-Panel Alt-Text hinzufügen.
Wix Editor
Studio Editor
- Öffne deinen Editor.
- Klicke auf das Bild auf deiner Seite.
- Klicke auf das Symbol für Einstellungen
. - Gib unter Was ist auf dem Bild zu sehen? eine Beschreibung des Bildes ein.
- Drücke zum Speichern die Eingabetaste auf deiner Tastatur.
Zu Galerien
Verwende die Medienverwaltung deiner Website, um Alternativtext zu Bildern in Galerien hinzuzufügen.
Wix Editor
Studio Editor
- Öffne deinen Editor.
- Klicke auf die Galerie auf deiner Seite.
- Klicke auf Medien verwalten oder Bilder ändern.
- Klicke auf ein Bild, um es auszuwählen.
- Gib einen Titel für das Bild auf der rechten Seite ein.
- (Für Wix Pro Gallery) Bearbeite den Alt-Text für dein Bild unter Alt-Text, wenn er sich vom Titel deines Bildes unterscheiden soll.
- Klicke auf OK.
Tipp:
Veröffentliche deine Website, damit der Alt-Text online geht.
Hinweis:
Es ist derzeit nicht möglich, Alt-Text gleichzeitig zu Bildern/Galerien hinzuzufügen. Wenn du dir diese Funktion wünschst, kannst du hier dafür abstimmen.
Alt-Text im Wizard für Barrierefreiheit hinzufügen
Wenn du eine Website mit dem Wizard für Barrierefreiheit prüfst, wirst du möglicherweise aufgefordert, Alt-Text für Bilder hinzuzufügen. Du kannst die Aufgabe im Wizard verwenden, um eine kurze, verständliche Beschreibung für deine Website-Besucher zu erstellen.
Wix Editor
Studio Editor
Verwende den Wizard, um Alt-Text zu Website-Bildern und Bildern hinzuzufügen, die in deinen Apps von Wix Stores und Bookings angezeigt werden.
Um Alt-Text zu Website-Bildern hinzuzufügen:
- Öffne deinen Editor.
- Klicke oben auf Einstellungen und wähle Barrierefreiheit.
- Klicke rechts im Panel des Wizards für Barrierefreiheit auf Website durchsuchen.
- Wähle Karten mit dem Titel Alt-Text aus.
- Gib die Bildbeschreibung im Feld Was ist auf dem Bild? ein.
- Klicke auf Alt-Text einrichten.
Um Alt-Text zu App-Bildern hinzuzufügen:
- Öffne deinen Editor.
- Klicke oben auf Einstellungen und wähle Barrierefreiheit.
- Klicke rechts im Panel des Wizards für Barrierefreiheit auf Website durchsuchen.
- Wähle das Aufklappmenü Shops/Bookings aus.
- Wähle Karten mit dem Titel Alt-Text aus.
- (Nur für Shops) Wähle jedes Produktbild/Produktvariantenbild aus.
- Gib die Bildbeschreibung im Feld Was ist auf dem Bild? ein.
- Klicke auf Alt-Text einrichten.
- Klicke auf OK.
Alt-Text mit KI generieren
Du erstellst eine Website im Studio Editor? Du kannst das KI-Tool im Wizard für Barrierefreiheit verwenden, um Alt-Text zu generieren. Wähle, ob Alt-Text für bestimmte Bilder oder für jedes Bild auf der Seite generiert werden soll.
Wichtig:
- Wir können nicht garantieren, dass KI-generierter Alt-Text immer völlig korrekt ist. Wir empfehlen daher, den generierten Text für jedes Bild zu überprüfen und bei Bedarf zu bearbeiten.
- SVG- oder GIF-Dateien werden vom KI-Alt-Text-Tool nicht unterstützt. Du musst den Alt-Text für diese Dateien manuell erstellen.
Um KI-Alt-Text generieren zu lassen:
- Öffne deinen Editor.
- Klicke links im Editor auf Website-Prüfer
.
- Wähle Probleme mit der Barrierefreiheit beheben.
- Klicke auf Website überprüfen.
- Wähle den Tab Gefundene Probleme.
- Öffne das entsprechende Dropdown-Menü.
- (Wenn nicht alle Bilder Alt-Text haben) Klicke auf Loslegen.
- (Wenn du bereits allen Bildern Alt-Text hinzugefügt hast) Klicke auf Bearbeiten.
- Wähle aus, was du tun möchtest:
- Alt-Text für ein einzelnes Bild generieren:
- Klicke neben dem entsprechenden Bild auf das Symbol für Bearbeiten
.
- Klicke auf Generieren.
- Klicke neben dem entsprechenden Bild auf das Symbol für Bearbeiten
- Alt-Text für alle Bilder der Seite auf einmal generieren: Klicke auf Generieren.
- Alt-Text für ein einzelnes Bild generieren:
- Überprüfe den generierten Text und nimm bei Bedarf Änderungen vor.
- Klicke auf Anwenden.
Du verwendest die Massenbearbeitung?
Das Tool generiert keinen Alt-Text für Bilder, die als dekorativ markiert sind oder bereits Alt-Text enthalten.
Hinweis:
Gelegentlich kann es vorkommen, dass das KI-Tool für manche Bilder auf einer Seite keinen Alt-Text generieren kann. Du kannst bei Bedarf auf Erneut versuchen klicken.
Bilder als dekorativ markieren
Dekorative Bilder sind Bilder, die nicht zum Inhalt der Website beitragen, da sie nur zu ästhetischen oder dekorativen Zwecken da sind.
Wenn ein Bild auf einer Website nur Dekoration und für den Kontext nicht relevant ist, musst du keinen Alt-Text hinzufügen. Du kannst ein Bild im Wizard für Barrierefreiheit als dekorativ markieren, um sicherzustellen, dass Suchmaschinen und Screenreader es automatisch überspringen.
Wix Editor
Studio Editor
- Öffne deinen Editor.
- Klicke oben auf Einstellungen und wähle Barrierefreiheit.
- Klicke rechts im Panel des Wizards für Barrierefreiheit auf Website durchsuchen.
- Wähle Karten mit dem Titel Alt-Text aus.
- Aktiviere das Kontrollkästchen neben Dieses Bild ist rein dekorativ und benötigt keine Beschreibung.
Gut zu wissen:
Du solltest zu allen Bildern, die Links enthalten, Alt-Text hinzufügen und sie nicht als dekorativ markieren.
Text in Bildern
Dies bezieht sich auf Bilder, die abgebildeten oder hinzugefügten Text enthalten.
Text in Bildern kann von Suchmaschinen oder Screenreadern nicht „gelesen“ werden. Wenn das Bild jedoch notwendig ist und der Text einen Kontext zur Website hat, kannst du es der Bildbeschreibung hinzufügen.
Wenn der Text keinen Kontext hat oder nicht zum Inhalt der Website beiträgt, musst du ihn nicht zur Bildbeschreibung hinzufügen.
Wähle unten eine Option aus, um mehr über Bildtexte zu erfahren, die du zur Bildbeschreibung hinzufügen solltest.
Wichtiger Text
Unwichtiger Text
Bilder von Texten
Textbilder enthalten nur Text und keine anderen abgebildeten Elemente. Einige Beispiele dafür sind Bilder von Schriftarten oder Logos, die nur Text enthalten.
Da es sich nicht um „echte“ Textelemente handelt, können Textbilder nicht von Suchmaschinen oder Screenreadern gelesen werden. Wir empfehlen, sie nach Möglichkeit zu vermeiden und durch echte Textelemente zu ersetzen, um die SEO und Barrierefreiheit auf deiner Website zu verbessern.
Nächster Schritt:
Gehe zurück zur Checkliste für Barrierefreiheit, um die Barrierefreiheit deiner Website weiter zu verbessern.