Eine barrierefreie E-Commerce-Website erstellen

Tipps, um die Navigation in deinem Onlineshop für alle Besucher einfach zu gestalten.

Zuletzt aktualisiert: 19. Februar 2025

Um deinen Besuchern die Navigation in deinem Onlineshop zu erleichtern, ist es wichtig, die Barrierefreiheit bei der Gestaltung deiner E-Commerce-Website zu berücksichtigen. Dies fördert nicht nur die Inklusivität, sondern erweitert auch deine Zielgruppe. Verwende diese Anleitung, um Designelemente zu überprüfen, die du in Betracht ziehen solltest, und Ressourcen, wie du deine E-Commerce-Website barrierefreier gestalten kannst.

Hinweis

Diese Anleitung ist als Ressource verfügbar, um dir den Einstieg zu erleichtern, sollte aber nicht als Rechtsberatung ausgelegt oder verstanden werden. Squarespace kann keine Ratschläge dazu geben, ob deine Website mit spezifischen Gesetzen, Vorschriften oder Standards zur Barrierefreiheit konform ist.

Produkt-Bilder

Abstand und Größe

Alle deine hervorgehobenen Bilder für Produktartikel werden in einem Raster auf deiner Shop-Seite angezeigt. Um deinen Shop für Besucher mit Sehbehinderungen zugänglicher zu machen, solltest du die Abstände deiner Bilder berücksichtigen. Du kannst das Padding und die Größe der Bilder durch Ändern der Spaltenanzahl in den Shop-Abschnittsstilen erhöhen.

Alternativtext zu deinen Produktbildern hinzufügen

Wenn du physische Produkte verkaufst, ist es wichtig, einen beschreibenden Text (Alternativtext) für deine Produktbilder bereitzustellen. Ein Alternativtext kann Besuchern, die einen Screenreader verwenden, bei der Navigation auf deiner Website helfen. Es ist auch hilfreich für Besucher, die aus verschiedenen Gründen nicht auf Bilder zugreifen können, z. B. aufgrund einer langsamen Internetverbindung. Beim Scannen einer Seite identifizieren Screenreader Bilder und lesen den Besuchern den Alternativtext vor. Verwende kurze Begriffe, die das jeweilige Bild und das Produkt beschreiben. Du kannst die folgenden Informationen in deinen Alternativtext aufnehmen:

  • Farbe des Produkts – Dieser Text ist möglicherweise die einzige Möglichkeit, mit der ein Besucher feststellen kann, welche Farbe der Artikel hat.
  • Wörter und Beschreibungen von Bildern und deren Position auf dem Produkt – Wenn Wörter oder Bilder auf deinem Produkt gedruckt sind, wird ein Screenreader diese dem Besucher nicht vorlesen oder beschreiben.

Bild-Zoom aktivieren

Du kannst den Bild-Zoom aktivieren, um Besuchern mit Sehbehinderungen zu helfen. Wenn diese Option aktiviert ist, können Besucher Produktbilder vergrößern, um Material, Textur und feinere Details genauer zu betrachten. Weitere Informationen zu dieser Funktion findest du unter Spezielle Funktionen der Shop-Seite.

Zusätzliche Produktinformationen

Du kannst benutzerdefinierte Inhalte zu einer Produkt-Seite hinzufügen, indem du Blöcke im Abschnitt Zusätzliche Informationen des Produkteditors hinzufügst. Du kannst z. B. Folgendes hinzufügen:

  • Paketabmessungen und -gewicht, damit Kunden ihre Lieferung besser planen können.
  • Videos deines Produkts mit Untertiteln.
  • Eine Größentabelle, wenn du Kleidung verkaufst. Größentabellen werden normalerweise nicht von Screenreadern gelesen. Weitere Informationen zum Erstellen einer für Screenreader geeigneten, textbasierten Größentabelle findest du bei Drittanbieter-Services wie Kiwi Sizing.

Hinweis

Wende dich bei allen Fragen zu Drittanbieter-Services direkt an den Drittanbieter.

Der Bezahlvorgang

Handlungsaufforderungs-Buttons

Es ist wichtig, dass deine Kunden auf interaktive E-Commerce-Elemente zugreifen können, z. B. auf die Buttons Zum Warenkorb hinzufügen und Einkauf fortsetzen. Um dies zu unterstützen, kannst du deine Buttons gestalten, um mehr Aufmerksamkeit auf sie zu lenken. Ändere dazu die Form, die Kontur-Stärke und andere Formatierungsoptionen.

Warenkorb-Symbol

Obwohl es nicht möglich ist, die Größe des Warenkorb-Symbols anzupassen, kannst du es leichter zugänglich machen, indem du einen Rand hinzufügst und einen angemessenen Farbkontrast verwendest.

Wenn du ein Produkt verkaufst und den Warenkorbprozess umgehen möchtest, kannst du die Express-Kasse aktivieren. Mit der Express-Kasse kannst du einen Kaufen-Button so gestalten, dass er gut sichtbar und leichter zugänglich ist.

Audio-Überlegungen

Wenn du Audioinhalte auf deiner Website hast, kannst du Transkripte hinzufügen. Dadurch werden deine Inhalte für Besucher mit Hörbeeinträchtigungen besser zugänglich und wirkt sich zudem positiv auf die SEO aus. Um deine Seiten organisiert zu halten, kannst du Transkripte auf „Nicht verlinkt“-Seiten hinzufügen.

Sprache

Bei der Beschreibung und Bewerbung deines Produkts oder deiner Dienstleistungen ist es wichtig, leicht verständliche Sprache zu verwenden. Mehr darüber, wie du effektiv und unter Berücksichtigung der Barrierefreiheit schreiben kannst, erfährst du unter Barrierefreie Website-Inhalte erstellen.

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.

Eine barrierefreie E-Commerce-Website erstellen