Nützlicher Alt-Text für Produktbilder erklärt Kundinnen und Kunden, was ein bestimmtes Bild beiträgt: das Aussehen eines Produkts, ein Detail in einer anderen Ansicht oder den Zweck eines bildbasierten Bedienelements. Alt-Text ist eine Textalternative, mit der Software wie ein Screenreader ein Bild beschreiben kann. Beginnen Sie mit seinem Zweck auf der Seite und prüfen Sie nach dem Speichern den Text im tatsächlichen Shop.
Eine Galerie kann übersichtlich wirken, obwohl jedes Bild denselben Produkttitel als Alt-Text verwendet. Vorderansicht, Verschlussdetail und Farbvariante verlieren dadurch im Text ihre Unterschiede. Wir schlagen vor, die Produktgalerie als kleine redaktionelle Aufgabe zu prüfen: Die Katalogredaktion kontrolliert den Text, die Shop-Betreuung die Ausgabe.
Warum Alt-Text für Produktbilder wichtige Details verliert
Die nützliche Beschreibung hängt von der Rolle des Bildes und den umgebenden Inhalten ab. Die Hinweise des W3C zu informativen Bildern fordern, die in diesem Kontext wichtigen Informationen zu vermitteln. Wird in einer Galerie immer derselbe Titel, Dateiname oder Suchbegriff wiederholt, kann das Merkmal fehlen, das ein bestimmtes Foto zeigen soll. Das Ausfüllen des Feldes ist nur ein Teil der Arbeit.
Der Produktname gilt als ausreichend. Ein Name identifiziert den Artikel, doch eine Nahaufnahme kann ein Verschluss- oder Taschendetail ergänzen. Prüfen Sie, was das Foto über Titel und benachbarte Beschreibung hinaus beiträgt.
Die Funktion des Bildes wird übersehen. Ein Foto kann zugleich ein Link oder eine Galerie-Schaltfläche sein. Nach den Hinweisen des W3C zu funktionalen Bildern gehören Aktion oder Ziel zur Entscheidung. Der zugängliche Name, also die Bezeichnung, die assistive Technik für dieses Bedienelement erhält, muss seinen Zweck verständlich machen.
Der gespeicherte Eintrag gilt als Endergebnis. Behandeln Sie das Verwaltungsfeld und die angezeigte Seite als getrennte Prüfpunkte. Bei einem Import, einem wiederverwendeten Bild oder eigener Theme-Logik sollten Sie die gerenderte Ausgabe prüfen, also was die betreffende Shop-Seite tatsächlich bereitstellt, bevor Sie den gesamten Katalog ändern.
Die Hinweise von Google zu Bildern warnen ebenfalls davor, Alternativen mit Keywords zu füllen. Schreiben Sie für das Detail oder die Aktion, die Kundinnen und Kunden benötigen. Eine Liste von Suchbegriffen liefert diese Erklärung nicht.
Entscheiden Sie, was jedes Bild ergänzt
Prüfen Sie das Bild zusammen mit dem umgebenden Text und jedem zugehörigen Link oder jeder Schaltfläche. Fragen Sie, welche Information oder Aktion ohne das Bild unklar wäre. Der Entscheidungsbaum des W3C unterscheidet informative, funktionale und dekorative Verwendungen. Für ein an anderer Stelle wiederverwendetes Bild ist eine neue kontextbezogene Entscheidung nötig. Eine spätere Galerieansicht ist nicht automatisch dekorativ, nur weil der Produkttitel bereits erschienen ist.
Betrachten Sie einen fiktiven Shop, der eine blaue Umhängetasche verkauft. Dies sind erfundene Textbeispiele, keine anhand eines echten Katalogs geprüften Beschreibungen.
| Platzierung | Zu prüfende Entscheidung |
|---|---|
| Vorderansicht | Beschreiben Sie das relevante sichtbare Aussehen, etwa eine blaue Tasche mit geschwungener Klappe. |
| Nahaufnahme des Verschlusses | Beschreiben Sie das sichtbare Verschlussdetail, das diese Ansicht ergänzt. |
| Andere Farbe | Stimmen Sie die Beschreibung auf das Foto und die ausgewählte Variante ab. |
| Galerie-Steuerung nur mit Bild | Machen Sie die Aktion verständlich, etwa das Öffnen der Verschlussansicht. |
| Rein dekorative Wiederholung | Erwägen Sie nach Prüfung von Information und Funktion eine bewusst leere Alternative. |
Eine leere Alternative bedeutet ein bewusst gesetztes Attribut alt="". Die Hinweise des W3C zu dekorativen Bildern unterscheiden dies vom Weglassen des Attributs. Bei einem Bild auf einer Produktkarte innerhalb eines Links kann ausreichender Text im selben Link eine leere Alternative angemessen machen. Ein separater Produkttitel in der Nähe gibt einem Link, der nur aus einem Bild besteht, nicht automatisch seinen Namen.
Stellen Sie detaillierte Größen- oder Montageangaben als zugänglichen Seiteninhalt bereit. Die Hinweise des W3C zu komplexen Bildern verlangen eine ausführlichere Texterklärung, wenn eine kurze Alternative die Informationen nicht vermitteln kann. Zwängen Sie die Anweisungen eines Diagramms nicht in eine kurze Beschreibung und lassen Sie den Rest nicht weg.
Schreiben und speichern Sie ein geprüftes Beispiel
Bereiten Sie ein Beispiel vor, das Sie prüfen können, bevor Sie die Methode auf den gesamten Katalog anwenden. Wir würden einen Datensatz mit Seiten-URL, Sprache, ausgewählter Variante, Bildreferenz, Zweck, vorgeschlagenem Text und Prüfergebnis verwenden. Ein Vorschaubild oder eine eindeutige Medienreferenz hilft dabei, die Zeile dem tatsächlichen Bild zuzuordnen, statt anhand eines Dateinamens zu raten.
- Halten Sie den Beitrag des Bildes fest. Notieren Sie, was Kundinnen und Kunden aus dieser Ansicht benötigen und was der benachbarte Text bereits vermittelt. Geben Sie an, ob das Bild Teil eines Links oder einer Schaltfläche ist.
- Entwerfen Sie eine kurze Alternative. Behalten Sie das unterscheidende sichtbare Detail bei. Prüfen Sie Farbe und andere relevante Fakten anhand des richtigen Fotos und Katalogeintrags. Leiten Sie Material, Kapazität oder Zertifizierung nicht aus dem Aussehen ab.
- Prüfen Sie Vorschläge vor der Annahme. Eine erzeugte Beschreibung ist ein Entwurf. Lassen Sie die Produktredaktion Aussage und Zweck einschließlich ausgewählter Variante und Sprache prüfen.
- Prüfen Sie unerklärte vorhandene Werte. Enthält das Feld Lagercodes oder ungewöhnliche Formatierungen, fragen Sie die Betreuung, ob eigene Galerie-Logik davon abhängt. Testen Sie Änderungen in einer autorisierten Vorschau oder an einem anderen Beispiel, bei dem sich die Änderungen rückgängig machen lassen, bevor Sie diese Werte gesammelt ersetzen.
- Speichern Sie im passenden Medienfeld. Laut aktueller Desktop-Hilfe von Shopify öffnen Sie Produkte, das Produkt und dann dessen Medienelement. Wählen Sie Alt-Text hinzufügen, geben Sie den geprüften Text ein und wählen Sie Alt-Text speichern. Dieser Weg gilt für Produktmedien. Bilder in Beschreibungen oder Theme-Bereichen können an anderer Stelle bearbeitet werden.
- Geben Sie Umsetzungsprobleme an die Betreuung weiter. Kann das Feld oder Bedienelement den erforderlichen Zweck nicht ausdrücken, übermitteln Sie Seite, Bildreferenz und gewünschtes Ergebnis. Bei unserer vorgeschlagenen Arbeit an E-Commerce-Websites trennt diese Übergabe die Inhaltsentscheidung von der Theme-Änderung und ihrer Prüfung.
Prüfen Sie den Shop vor Änderungen am Katalog
Öffnen Sie nach dem Speichern die betreffende Shop-Seite und prüfen Sie genau die bearbeitete Platzierung. Kontrollieren Sie die Bildalternative, den zugänglichen Namen eines zugehörigen Bedienelements und das Verhalten beim Wechsel von Variante oder Galerieansicht. Können Sie dies nicht selbst prüfen, bitten Sie die Betreuung, die Ausgabe mit Ihrem Datensatz abzugleichen, bevor Sie die Bearbeitung ausweiten.
- Ordnen Sie das tatsächliche Bild zu. Lesen Sie mit den Prüfwerkzeugen des Browsers das gerenderte
alt-Attribut des Bildes oder bitten Sie die Betreuung darum. Vergleichen Sie es mit dem vorbereiteten Text und dem aktuell angezeigten Foto. - Prüfen Sie Namen und Aktion des Bedienelements. Kontrollieren Sie bei einem Link oder einer Schaltfläche neben der Bildalternative auch die für assistive Technik bereitgestellte Bezeichnung. Prüfen Sie, ob die genannte Aktion oder das Ziel dem Ergebnis der Aktivierung entspricht. Die Bildbeschreibung allein bestimmt möglicherweise nicht den vollständigen Namen des Bedienelements.
- Wechseln Sie Ansicht und Variante. Öffnen Sie das Verschlussdetail, wählen Sie eine andere sichtbare Farbe und prüfen Sie die zugehörige Ausgabe erneut. Bleibt eine Beschreibung am falschen Bild, dokumentieren Sie die genaue Abfolge für die Betreuung.
- Öffnen Sie Seite und betreffende Sprache erneut. Prüfen Sie, ob die gespeicherte Änderung noch an der vorgesehenen Stelle vorhanden ist. Erfassen Sie ungeklärte Fälle getrennt, auch wenn ein Import- oder Übersetzungsablauf untersucht werden muss.
Eine Browserprüfung kontrolliert die Umsetzung. Eine fachkundige Prüfung mit einem Screenreader kann die Einkaufsaufgabe mit dieser assistiven Technik untersuchen. Halten Sie den Umfang jeder Prüfung klar fest. Die Easy Checks des W3C weisen darauf hin, dass vorläufige Prüfungen nicht abschließend sind. Daher belegen weder ein ausgefülltes Feld noch dieses Beispiel die Barrierefreiheit des gesamten Shops. Unsere ersten Barrierefreiheitsprüfungen für Ihre Website behandeln umfassendere Aufgaben wie Tastaturnutzung und Formulare.
Halten Sie die Alternativen nach der Bearbeitung korrekt
Legen Sie die Verantwortung für den Ausgangstext fest und wiederholen Sie die jeweilige Prüfung, wenn sich Foto, Variante, Sprache, Theme oder Import ändert. Liefern mehrere Systeme den Katalog, ermitteln Sie, welches das Feld verwaltet. Wir würden diese Zuordnung in einen Arbeitsablauf für Katalog- und CRM-Integration aufnehmen, bevor wir manuelle Änderungen ausweiten, die ein anderer Prozess ersetzen könnte.
Dokumentieren Sie geprüfte Platzierungen, im Shop bestätigte Texte und ungeklärte Fälle. Diese Aufzeichnungen zeigen die abgeschlossene Arbeit und den weiteren Handlungsbedarf. Sie messen keinen Verkaufseffekt. Bewahren Sie Bildreferenz, aktuellen Text, zuständige Redaktion und Auslöser der nächsten Prüfung gemeinsam auf, damit eine andere Person dieselbe Entscheidung pflegen kann.
Wo wir Sie unterstützen
Wir würden mit den Ansichten eines Produkts beginnen und abstimmen, was jede davon vermitteln muss. Die Übergabe verbindet anschließend den Text der Redaktion mit dem Speicherort, der Shop-Ausgabe und jedem ungeklärten Verhalten von Bedienelementen. Beginnen Sie Ihren eigenen Datensatz mit einem Produkt, dessen Galerie unterschiedliche Details zeigt, und prüfen Sie das Beispiel vor der Ausweitung.
