> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/faq/barrierefreiheit/bilder.md).

# Bilder

## Bilder und Barrierefreiheit

Um die Barrierefreiheit in deinem Shop zu optimieren, solltest du folgende Punkte bei der Verwendung von Bildern beachten:

1. **Alt-Texte hinzufügen**:\
   Bilder, die wichtige Informationen vermitteln, sollten mit einem aussagekräftigen **Alt-Text** versehen werden. Dieser Text beschreibt den Inhalt des Bildes und stellt sicher, dass Nutzer mit Sehbeeinträchtigungen die Informationen ebenfalls erhalten. Du kannst Alt-Texte in den Metadaten der Medienverwaltung von Shopware hinterlegen.\
   [Shopware Doku zum Bereich Metadaten](https://docs.shopware.com/de/shopware-6-de/Inhalte/medien?category=shopware-6-de/inhalte#metadaten)
2. **Titel für Bilder verwenden**:\
   Zusätzlich zum Alt-Text kannst du jedem Bild im **Medienbereich von Shopware** einen **Titel** geben. Der Titel liefert zusätzliche Informationen und wird häufig als Tooltip angezeigt, wenn der Nutzer mit der Maus über das Bild fährt. Du kannst Title-Texte in den Metadaten der Medienverwaltung von Shopware hinterlegen.\
   [Shopware Doku zum Bereich Metadaten](https://docs.shopware.com/de/shopware-6-de/Inhalte/medien?category=shopware-6-de/inhalte#metadaten)
3. **Dekorative Bilder kennzeichnen**::\
   Achte darauf, dass der Alt-Text nur dann genutzt wird, wenn er tatsächlich einen Mehrwert bietet. Vermeide es, Alt-Texte für rein dekorative Bilder zu vergeben – diese sollten als dekorativ gekennzeichnet werden.\
   \
   In unseren CMS-Elementen kannst du Bilder als **dekorativ** kennzeichnen. Dadurch werden diese Bilder von Screenreadern ignoriert, wenn sie keinen inhaltlichen Mehrwert bieten und nur der optischen Gestaltung dienen. Sobald ein Bild als dekorativ gekennzeichnet ist, erhalten sie leere alt- wie auch title-Attribute, sodass sie von Screenreadern übersprungen werden. \
   \
   Diese Einstellung entfernt nicht die in den Metadaten hinterlegten Informationen, sodass das Bild an andere Stelle auch weiterhin als Nicht-Dekoratives Bild eingesetzt werden kann.

Mit diesen einfachen, aber effektiven Maßnahmen stellst du sicher, dass deine Bilder auch für alle Nutzer zugänglich sind, unabhängig von ihren Fähigkeiten.