Wussten Sie, dass 15 bis 20 % der Menschen eine motorische, visuelle oder auditive Behinderung haben? Wir leben in einer vernetzten Gesellschaft, in der es wichtiger denn je ist, die Zugänglichkeit Ihrer Website zu optimieren.

Unter „Web Accessibility“ (Barrierefreies Webdesign) versteht man alle Techniken mit dem Ziel, Ihre E-Commerce-Website möglichst vielen Menschen zugänglich zu machen (darunter Personen mit Behinderung) und somit ein deutlich größeres Publikum zu erreichen. Dadurch können Sie den Traffic und die Konversionsrate auf den einzelnen Seiten Ihrer Website erhöhen.

Mit einer optimal gestalteten Website entgehen Ihnen nicht Millionen von potenziellen Besuchern. Außerdem verbessert eine barrierefreie Gestaltung das Suchmaschinen-Ranking (SEO) Ihrer Website!


Erfahren Sie, wie Sie Ihr E-Commerce-Geschäft international ausrichten können


Um eine E-Commerce-Website behinderten oder älteren Menschen mit möglicherweise eingeschränkten Fähigkeiten zugänglich zu machen, sollten bestimmte Regeln befolgt werden:

  • Für Blinde/Sehbehinderte: Sie sollten die Möglichkeit haben, die Inhalte anzuhören, zum Beispiel mit einem Screenreader.
  • Für Menschen mit motorischen Behinderungen: Sie sollten in jedem Fall die Möglichkeit haben, Ihre Website ohne Maus zu nutzen.

Diese Dinge sind wichtig und sollten beachtet werden, wenn Sie Ihre E-Commerce-Website möglichst vielen Personen zugänglich machen wollen. Eine solche Gestaltung lässt sich mit zahlreichen Mitteln umsetzen.

Hier sind 7 Tipps, die Ihnen helfen, Ihre Website barrierefreier zu gestalten:

Setzen Sie auf die beste Ergonomie

Die Norm ISO 9241 definiert Gebrauchstauglichkeit (Usability) wie folgt: „Ein Produkt gilt als gebrauchstauglich, wenn es sich effektiv, effizient und zufriedenstellend nutzen lässt.“

Die ästhetische Gestaltung einer Website reicht nicht aus. Die Web-Ergonomie ist eine Grundvoraussetzung für eine gute E-Commerce-Website. Dieser Gesichtspunkt ist nicht zu unterschätzen. Wenn das Nutzererlebnis im Vordergrund steht, ist es wahrscheinlicher, dass die Benutzer Ihre Website mögen und sie die Seite erneut besuchen oder weiterempfehlen. Sie sollten sich bereits vor Beginn der Konzeption Ihrer Website sorgfältig mit ihrer Ergonomie befassen. Dies betrifft die Benutzeroberfläche Ihrer Seiten, aber auch die Gestaltung Ihrer Menüs, die das Nutzererlebnis verbessern. Durch eine einfache Navigation vergrößert sich Ihr potenzieller zukünftiger Kundenkreis!

Nutzen Sie die passende Struktur

Ein großer Teil der Webinhalte lässt sich durch die richtige Verwendung von HTML leicht barrierefrei machen. Eine Website besteht aus vielen Tags, die direkt im Code der jeweiligen Seite gesucht und angepasst werden können. Es gibt viele verschiedene Arten von Tags. Jedes hat eine Bedeutung und beeinflusst die Struktur Ihrer Website. Alle Tags haben einen bestimmten Zweck. Setzen Sie sie richtig ein!

Trennen Sie die Form vom Inhalt

Damit Ihre E-Commerce-Website gut zugänglich ist, sollten Sie Ihre HTML-Datei, die Ihre Inhalte (Texte, Bilder, Menüs …) enthält, und Ihre CSS-Datei(en), die die Formatdefinitionen enthält/enthalten, klar voneinander trennen. Dies erlaubt zum einen eine übersichtlichere Architektur und zum anderen die Abbildung verschiedener Arten von Designs. So können Sie einen Zugang ohne Formatierung anbieten, was für einige Behinderungen sehr nützlich sein kann, aber auch einen Zugang mit größer geschriebenem Text und Inhalten, die besser an Smartphones oder Tablets angepasst sind …

Vergessen Sie nicht den Alternativtext für Ihre Bilder

Der Alternativtext (Alt-Text) ist eine Kurzbeschreibung eines Bildes. Er wird in den HTML-Code eingefügt und gibt sehbehinderten Benutzern Aufschluss darüber, was auf dem Bild dargestellt ist.

Zunächst ist es wichtig, zwischen 3 Arten von Bildern zu unterscheiden:

  • Bilder, die eine einfache Information vermitteln, wie Schaltflächen
  • Bilder, die komplexere Informationen vermitteln, wie Grafiken. Diese Bilder können so gestaltet werden, dass sie auf eine HTML-Seite verweisen, die den Inhalt des Bildes im Detail erklärt.
  • Rein dekorative Bilder, die Ihre E-Commerce-Website verschönern, aber keine relevanten Zusatzinformationen liefern, zum Beispiel Aufzählungszeichen oder Rahmen

Auf E-Commerce-Websites mit Produktdaten sind Alternativtexte unerlässlich, damit sich blinde Benutzer besser zurechtfinden.

Der Alternativtext sollte nicht außer Acht gelassen werden. Er trägt auch zur Suchmaschinenoptimierung bei.

Achten Sie auf Farben und Kontraste

Wählen Sie Farben aus, die sich gut unterscheiden lassen, um eine leichte und bequeme Lesbarkeit zu gewährleisten. Empfehlenswert ist eine schlichte Kombination, wie etwa dunkler Text auf hellem Hintergrund, denn Text und Hintergrund Ihrer Seiten sollten durchweg einen starken Kontrast aufweisen.

Auch sollte man sich stets bewusst sein, dass die auf dem Bildschirm angezeigten Farben nicht unbedingt für alle Benutzer gleich sind. Dies hängt sowohl von den Bildschirmeinstellungen als auch der Sehfähigkeit des Benutzers ab.

Ein Tipp: Beachten Sie die HTML-Zugänglichkeitsstandards, indem Sie eine typografische Gestaltung wählen, die für alle zugänglich ist.

Geben Sie Ihren Hypertext-Links eine Bezeichnung

Je weniger Unklarheiten es gibt, desto zugänglicher wird Ihre Website!

Es kann beispielsweise vorkommen, dass ein Link nicht angibt, auf welche Seite er verweist. Alle Schaltflächen/Links auf Ihrer Website sollten eine genaue Bezeichnung haben, die sich von den anderen unterscheidet, damit die Benutzer verstehen, wohin sie weitergeleitet werden.

Zum Verständnis

Ein blinder Website-Besucher möchte seine Sendungsverfolgung abrufen. Schaltflächen wie „Hier klicken“ sind in diesem Fall nicht empfehlenswert. Manche Besucher verwenden eine Braillezeile oder Sprachausgabe für die Navigation zwischen den einzelnen Seiten. Besser wäre also eine Schaltfläche mit einer präziseren Beschreibung wie „Ihre Sendungsverfolgung anzeigen“, die für den Benutzer gleich viel aussagekräftiger ist.

Vermeiden Sie Pop-up-Fens­ter

Ein Pop-up-Fenster kann zwar sehr nützlich sein, um eine Neuheit oder ein Ereignis anzukündigen, und für einige Benutzer kann es praktisch sein, einen Überblick über alle geöffneten Seiten zu haben. Für manch andere (zum Beispiel Sehbehinderte) können sie jedoch sehr störend sein. Denn ein neues Fenster kann den Surfrhythmus stören, sodass man den Benutzer verliert. Lassen Sie ihm also wenn möglich die Wahl, mit einem einfachen Rechtsklick eine andere Seite zu öffnen. Falls Sie jedoch keine andere Möglichkeit haben, denken Sie daran, dies mit dem entsprechenden Attribut in Ihrem HTML-Code anzuzeigen.

Durch eine barrierefreie und inklusivere Gestaltung der eigenen E-Commerce-Website können die Bedürfnisse aller Benutzer erfüllt werden. Weitere Vorteile sind ein höherer Traffic und eine bessere Online-Reputation. Also worauf warten Sie noch? Aktualisieren Sie jetzt Ihre Website!

Lesen Sie, wie Petit Bateau sein Übersetzungsmanagement mit TextMaster zentralisiert hat

Das könnte Ihnen auch gefallen
Tipps & Hinweise

Melden Sie sich für unseren Newsletter an

Übersetzung und Website-Lokalisierung: Best Practices

Wussten Sie, dass 15 bis 20 % der Menschen eine motorische, visuelle oder auditive Behinderung haben? Wir leben in einer vernetzten Gesellschaft, in der es wichtiger denn je ist, die Zugänglichkeit Ihrer Website zu optimieren.

Unter „Web Accessibility“ (Barrierefreies Webdesign) versteht man alle Techniken mit dem Ziel, Ihre E-Commerce-Website möglichst vielen Menschen zugänglich zu machen (darunter Personen mit Behinderung) und somit ein deutlich größeres Publikum zu erreichen. Dadurch können Sie den Traffic und die Konversionsrate auf den einzelnen Seiten Ihrer Website erhöhen.

Mit einer optimal gestalteten Website entgehen Ihnen nicht Millionen von potenziellen Besuchern. Außerdem verbessert eine barrierefreie Gestaltung das Suchmaschinen-Ranking (SEO) Ihrer Website!


Erfahren Sie, wie Sie Ihr E-Commerce-Geschäft international ausrichten können


Um eine E-Commerce-Website behinderten oder älteren Menschen mit möglicherweise eingeschränkten Fähigkeiten zugänglich zu machen, sollten bestimmte Regeln befolgt werden:

  • Für Blinde/Sehbehinderte: Sie sollten die Möglichkeit haben, die Inhalte anzuhören, zum Beispiel mit einem Screenreader.
  • Für Menschen mit motorischen Behinderungen: Sie sollten in jedem Fall die Möglichkeit haben, Ihre Website ohne Maus zu nutzen.

Diese Dinge sind wichtig und sollten beachtet werden, wenn Sie Ihre E-Commerce-Website möglichst vielen Personen zugänglich machen wollen. Eine solche Gestaltung lässt sich mit zahlreichen Mitteln umsetzen.

Hier sind 7 Tipps, die Ihnen helfen, Ihre Website barrierefreier zu gestalten:

Setzen Sie auf die beste Ergonomie

Die Norm ISO 9241 definiert Gebrauchstauglichkeit (Usability) wie folgt: „Ein Produkt gilt als gebrauchstauglich, wenn es sich effektiv, effizient und zufriedenstellend nutzen lässt.“

Die ästhetische Gestaltung einer Website reicht nicht aus. Die Web-Ergonomie ist eine Grundvoraussetzung für eine gute E-Commerce-Website. Dieser Gesichtspunkt ist nicht zu unterschätzen. Wenn das Nutzererlebnis im Vordergrund steht, ist es wahrscheinlicher, dass die Benutzer Ihre Website mögen und sie die Seite erneut besuchen oder weiterempfehlen. Sie sollten sich bereits vor Beginn der Konzeption Ihrer Website sorgfältig mit ihrer Ergonomie befassen. Dies betrifft die Benutzeroberfläche Ihrer Seiten, aber auch die Gestaltung Ihrer Menüs, die das Nutzererlebnis verbessern. Durch eine einfache Navigation vergrößert sich Ihr potenzieller zukünftiger Kundenkreis!

Nutzen Sie die passende Struktur

Ein großer Teil der Webinhalte lässt sich durch die richtige Verwendung von HTML leicht barrierefrei machen. Eine Website besteht aus vielen Tags, die direkt im Code der jeweiligen Seite gesucht und angepasst werden können. Es gibt viele verschiedene Arten von Tags. Jedes hat eine Bedeutung und beeinflusst die Struktur Ihrer Website. Alle Tags haben einen bestimmten Zweck. Setzen Sie sie richtig ein!

Trennen Sie die Form vom Inhalt

Damit Ihre E-Commerce-Website gut zugänglich ist, sollten Sie Ihre HTML-Datei, die Ihre Inhalte (Texte, Bilder, Menüs …) enthält, und Ihre CSS-Datei(en), die die Formatdefinitionen enthält/enthalten, klar voneinander trennen. Dies erlaubt zum einen eine übersichtlichere Architektur und zum anderen die Abbildung verschiedener Arten von Designs. So können Sie einen Zugang ohne Formatierung anbieten, was für einige Behinderungen sehr nützlich sein kann, aber auch einen Zugang mit größer geschriebenem Text und Inhalten, die besser an Smartphones oder Tablets angepasst sind …

Vergessen Sie nicht den Alternativtext für Ihre Bilder

Der Alternativtext (Alt-Text) ist eine Kurzbeschreibung eines Bildes. Er wird in den HTML-Code eingefügt und gibt sehbehinderten Benutzern Aufschluss darüber, was auf dem Bild dargestellt ist.

Zunächst ist es wichtig, zwischen 3 Arten von Bildern zu unterscheiden:

  • Bilder, die eine einfache Information vermitteln, wie Schaltflächen
  • Bilder, die komplexere Informationen vermitteln, wie Grafiken. Diese Bilder können so gestaltet werden, dass sie auf eine HTML-Seite verweisen, die den Inhalt des Bildes im Detail erklärt.
  • Rein dekorative Bilder, die Ihre E-Commerce-Website verschönern, aber keine relevanten Zusatzinformationen liefern, zum Beispiel Aufzählungszeichen oder Rahmen

Auf E-Commerce-Websites mit Produktdaten sind Alternativtexte unerlässlich, damit sich blinde Benutzer besser zurechtfinden.

Der Alternativtext sollte nicht außer Acht gelassen werden. Er trägt auch zur Suchmaschinenoptimierung bei.

Achten Sie auf Farben und Kontraste

Wählen Sie Farben aus, die sich gut unterscheiden lassen, um eine leichte und bequeme Lesbarkeit zu gewährleisten. Empfehlenswert ist eine schlichte Kombination, wie etwa dunkler Text auf hellem Hintergrund, denn Text und Hintergrund Ihrer Seiten sollten durchweg einen starken Kontrast aufweisen.

Auch sollte man sich stets bewusst sein, dass die auf dem Bildschirm angezeigten Farben nicht unbedingt für alle Benutzer gleich sind. Dies hängt sowohl von den Bildschirmeinstellungen als auch der Sehfähigkeit des Benutzers ab.

Ein Tipp: Beachten Sie die HTML-Zugänglichkeitsstandards, indem Sie eine typografische Gestaltung wählen, die für alle zugänglich ist.

Geben Sie Ihren Hypertext-Links eine Bezeichnung

Je weniger Unklarheiten es gibt, desto zugänglicher wird Ihre Website!

Es kann beispielsweise vorkommen, dass ein Link nicht angibt, auf welche Seite er verweist. Alle Schaltflächen/Links auf Ihrer Website sollten eine genaue Bezeichnung haben, die sich von den anderen unterscheidet, damit die Benutzer verstehen, wohin sie weitergeleitet werden.

Zum Verständnis

Ein blinder Website-Besucher möchte seine Sendungsverfolgung abrufen. Schaltflächen wie „Hier klicken“ sind in diesem Fall nicht empfehlenswert. Manche Besucher verwenden eine Braillezeile oder Sprachausgabe für die Navigation zwischen den einzelnen Seiten. Besser wäre also eine Schaltfläche mit einer präziseren Beschreibung wie „Ihre Sendungsverfolgung anzeigen“, die für den Benutzer gleich viel aussagekräftiger ist.

Vermeiden Sie Pop-up-Fens­ter

Ein Pop-up-Fenster kann zwar sehr nützlich sein, um eine Neuheit oder ein Ereignis anzukündigen, und für einige Benutzer kann es praktisch sein, einen Überblick über alle geöffneten Seiten zu haben. Für manch andere (zum Beispiel Sehbehinderte) können sie jedoch sehr störend sein. Denn ein neues Fenster kann den Surfrhythmus stören, sodass man den Benutzer verliert. Lassen Sie ihm also wenn möglich die Wahl, mit einem einfachen Rechtsklick eine andere Seite zu öffnen. Falls Sie jedoch keine andere Möglichkeit haben, denken Sie daran, dies mit dem entsprechenden Attribut in Ihrem HTML-Code anzuzeigen.

Durch eine barrierefreie und inklusivere Gestaltung der eigenen E-Commerce-Website können die Bedürfnisse aller Benutzer erfüllt werden. Weitere Vorteile sind ein höherer Traffic und eine bessere Online-Reputation. Also worauf warten Sie noch? Aktualisieren Sie jetzt Ihre Website!

Lesen Sie, wie Petit Bateau sein Übersetzungsmanagement mit TextMaster zentralisiert hat