Best Practices: Shop

Hier findest du Best Practices zum Thema Shop.

plentyShop LTS

Diese Seite richtet sich an Shop-Benutzer:innen. Falls du nach Best Practices für dessen Vorgänger plentyShop LTS suchst, findest du sie auf dieser Handbuchseite.

1. Anpassung zur Barrierefreiheitsstärkungsgesetz (BFSG)

Am 25. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG) in Kraft. Damit wird die EU-Richtlinie zur Barrierefreiheit (European Accessibility Act) in Deutschland umgesetzt.

Diese bringt einige Anforderungen für Online-Händler:innen in Bezug auf die Gestaltung ihrer Shops mit sich. Onlineshops müssen so gestaltet sein, dass diese auch von Menschen mit bspw. visuellen, motorischen oder auditiven Beeinträchtigungen ohne Hindernisse genutzt werden können.

Dieser Best Practice gibt dir einen Überblick darüber, welche Maßnahmen du für deinen Shop umsetzen musst, damit dieser den neuen Anforderungen entspricht.

1.1. Rahmenbedingungen

Wen betrifft das Gesetz?
Das BFSG gilt derzeit nur im B2C-Bereich. Die Anforderungen des BFSG gelten nicht für B2B-Shops. Zu beachten ist dabei, dass der B2B-Shop eindeutig als solcher ausgestaltet sein muss. Besteht aber für Verbraucher nur die Möglichkeit, die Dienstleistung in Anspruch zu nehmen, handelt es sich um eine Dienstleistung im elektronischen Geschäftsverkehr gegenüber Verbrauchern und das BFSG findet Anwendung.

Wen betrifft das Gesetz nicht?
Kleinstunternehmen (also Unternehmen mit weniger als zehn Beschäftigten und einem Jahresumsatz bzw. einer Jahresbilanzsumme von höchstens 2 Millionen Euro, die Dienstleistungen anbieten oder erbringen) sind nach § 3 Abs. 3 BFSG nicht vom BFSG erfasst.

Haftungsausschluss / Disclaimer:
Die bereitgestellten Informationen stellen keine rechtliche Beratung dar und ersetzen keine individuelle Rechtsberatung durch eine entsprechend qualifizierte Fachperson. Alle Inhalte dienen ausschließlich allgemeinen Informationszwecken. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte wird keine Haftung übernommen. Bei konkreten rechtlichen Fragen oder Anliegen wende dich bitte an eine zugelassene Rechtsanwältin oder einen zugelassenen Rechtsanwalt.

1.2. WAVE Barrierefreiheits-Plugin

Um zu überprüfen, ob dein Shop irgendwo noch Potentiale zur Verbesserung der Barreirefreiheit hat, empfehlen wir die Nutzung des WAVE Web Accessibility Evaluation Tools. Du kannst WAVE als Browser-Erweiterung installieren, und damit überprüfen, ob bei bestimmten Bildern Alternativtexte fehlen, oder ob Text durch mangelnde Kontrastierung mit dem Hintergrund schwer zu lesen ist.

1.3. Kontrastreiche Farben

Um Nutzer:innen, die visuell beeinträchtigt sind, ein vollständig funktionales Einkaufserlebnis im Shop zu ermöglichen, ist es notwendig, dass Text- und Hintergrundfarben in einem hohen Kontrastverhältnis zueinander stehen.
Die EU-Richtlinie zur Barrierefreiheit stützt sich dabei auf die Empfehlungen der Web Content Accessibility Guidelines.

Um den Anforderungen des Barrierefreiheitsstärkungsgesetzes zu entsprechen, sollten Texte und Hintergrundfarben mindestens in einem Kontrastverhältnis von 4,5:1 stehen. Bei größerem Text und bei eingebundenen Grafiken reicht bereits ein Kontrastverhältnis von 3:1.

Um die Kontrastverhältnisse der Farben, die du im Shop verwendest zu überprüfen, kannst du externe Tools, wie z.B. WebAim verwenden. Gib dafür im linken Foreground-Feld einen Hexadezimal-Code für deine Textfarbe, und im rechten Background-Feld einen Hexadezimal-Code für deine Hintergrundfarbe ein. Darunter wird die dann das Kontrastverhältnis (Contrast Ratio) angezeigt.

Im Bereich darunter siehst du Auswertungen, welche WCAG-Note (Web Content Accessibility Guidelines) dein Kontrastverhältnis bekommen würde: AA ist ausreichend, um den Anforderungen des BFSG zu entsprechen; AAA geht sogar über diese Anforderungen hinaus.

1.4. Alternativtexte

Um die visuellen Inhalte deines Shops über Tools wie Screenreader für Menschen mit visuellen Einschränkungen nutzbar zu machen, erfordert das BFSG, dass du Bilder in deinem Shop mit Alternativtexten ausstattest. Alternativtexte sollten kurz und prägnant sein und eine Zeichenlänge von 80-100 Zeichen nicht übersteigen.
Für deinen Shop musst du Alternativtexte an zwei verschiedenen Stellen pflegen: Für Artikelbilder in der neuen Artikel-UI und für statische Inhalte (wie z.B. Banner oder Logo) im Webspace. Für die Alternativtexte für Artikelbilder stehen dir 3 verschiedene Methoden zur Verfügung: manuelles Anpassen, Artikelimport oder via API.

Alternativtexte für Artikelbilder hinzufügen:

  1. Öffne das Menü Artikel » Artikel (Testphase)

  2. Suche einen Artikel, für den du Alternativtexte anlegen willst.
    → Die Artikel, die dem Suchbegriff entsprechen, werden gelistet.

  3. Klicke auf einen Artikel, um ihn zu öffnen.

  4. Klicke links in der Seitenleiste auf Bilder, um die Bildereinstellungen auszuklappen.

  5. Klicke auf Übersetzungen.

  6. Wähle eine Sprache aus der Dropdown-Liste aus.

  7. Gib im Feld Alternativtext den Text ein, der als Alternativtext für das Bild in der ausgewählten Sprache verwendet werden soll.

  8. Wiederhole diesen Vorgang ggf. für weitere Bilder dieses Artikels oder für weitere Sprachen.

  9. Speichere (save) die Einstellungen.

Um nicht jedes Bild manuell mit einem Alternativtext auszustatten, kannst du auch den Artikelimport verwenden.
Gehe wie folgt vor, um Alternativtexte zu Bildern hinzuzufügen, die keine Artikelbilder sind:

Alternativtexte für Bilder im Webspace hinzufügen:

  1. Öffne das Menü Shop » Webspace.

  2. Klicke in der Liste der Dateien auf die Bilddatei, für die du einen Alternativtext hinterlegen willst. → Auf der rechten Seite öffnet sich ein Vorschaubild.

  3. Gib im Eingabefeld Alternativtext unterhalb des Vorschaubilds den Text ein, den du für dieses Bild als Alternativtext nutzen willst.

  4. Speichere (save) die Einstellungen.

1.4.1. Alternativtexte für Artikelbilder via API hinzufügen

Um eine große Menge an Alternativtexten zu bewältigen, kannst du die API zum Setzen der Bildnamen und Alternativtexte verwenden. Die Route dafür ist:

/rest/items/{id}/images/{imageId}/names

{
    "imageId": 1000,
    "lang": "de",
    "name": "Bildname",
    "alternate": "Alternativtext"
  }

1.5. Barrierefreiheitserklärung

Im Zuge der BFSG-Anforderungen wird eine neue statische Seite im Shop hinzugefügt, um die Barrierefreiheitserklärung darzustellen. Die Barrierefreiheitserklärung enthält umfassende und barrierefrei zugängliche Informationen darüber, welche Inhalte der Website barrierefrei und welche noch nicht barrierefrei sind. Weiterhin enthält sie Kontaktdaten, damit Nutzer:innen wissen, an wen sie sich wenden können, wenn sie auf nicht kenntlich gemachte Barrieren stößt.

Für den Shop wird dafür ein neuer Eintrag im Menü Rechtliches geschaffen.

Barrierefreiheitserklärung hinzufügen:

  1. Öffne das Menü Einrichtung » plentyShop » [Mandant wählen] » Rechtliches.

  2. Klappe den Bereich Barrierefreiheitserklärung aus, indem du darauf klickst.

  3. Gib den Text deiner Barrierefreiheitserklärung ein.

  4. Falls du stattdessen deine Barrierefreiheitserklärung als HTML eingeben willst, stelle sicher, dass HTML oben als Ausgabetyp ausgewählt ist, und dass im Editor die code (Code-Ansicht) aktiv ist.

  5. Speichere (save) die Einstellungen.

1.5.1. Seite für plentyShop LTS anlegen

Wenn du einen plentyShop LTS betreibst, musst du zur Anzeige der Barrierefreiheitserklärung noch eine eigene ShopBuilder-Seite anlegen. Gehe dazu wie folgt vor:

ShopBuilder-Seite für Barrierefreiheitserklärung erstellen:

  1. Öffne das Menü Shop » ShopBuilder.

  2. Klicke auf Neue Oberkategorie.

  3. Wähle Typ Content in den allgemeinen Einstellungen.

  4. Gib einen Namen für die Kategorie ein.

  5. Speichere (save) die Einstellungen.

  6. Klicke links im Navigationsbaum auf Globale Einstellungen.

  7. Klicke in das Eingabefeld Kategorie für /declaration-of-accessibility.

  8. Wähle die gerade erstellte Kategorie aus und klicke auf Auswählen.

  9. Speichere (save) die Einstellungen.

  10. Klicke links im Navigationsbaum auf Kategorien.

  11. Öffne die neu angelegte Kategorie.

  12. Klicke auf Inhalt hinzufügen.

  13. Wähle Typ Content.

  14. Gib einen Namen für den neuen Inhalt ein.

  15. Wähle die Vorlage Barrierefreiheitserklärung (plentyShop LTS) aus.

  16. Aktiviere den Inhalt, indem du den Schalter in der Spalte Aktiv anklickst.

Die Vorlage Barrierefreiheitserklärung enthält ein Widget, das den Text, den du im Menü Einrichtung » plentyShop » [Mandant wählen] » Rechtliches hinterlegt hast, anzeigt. Du kannst den Inhalt im ShopBuilder nach deinen Wünschen gestalten.

1.6. Drittanbieter-Themes

Falls du ein Drittanbieter-Theme in Verwendung hast, liegen die Anpassungen hinsichtlich der Barrierefreiheit beim jeweiligen Anbieter. Bitte wende dich an deinen Theme-Anbieter, falls du Rückfragen zur Barrierefreiheit deines Themes hast.

1.7. Umgesetzte Verbesserungen der Barrierefreiheit

Zusätzlich zu den oben genannten Punkten, wurden weitere Verbesserungen der Barrierefreit bereits für den Shop umgesetzt:

  • Der Shop ist vollständig über die Tastatur bedienbar.

  • Eingabefelder für Nutzer:innen sind mit Labels ausgestattet, sodass sie durch Screenreader erkannt werden können.

  • Shop verwendet ARIA-Labels, um die Barrierefreiheit zu verbessern.