Barrierefreiheit von Themes

Wenn Sie Ihr Theme anpassen, empfiehlt es sich, Design- und Inhaltsoptionen zu wählen, die dafür sorgen, dass Ihr Onlineshop barrierefrei ist. Eine barrierefreie Website ist so konzipiert, dass sie von jedem genutzt werden kann, auch von Menschen mit Behinderungen. Die Barrierefreiheit Ihres Onlineshops ist wichtig, um Ihren Kunden ein umfassendes Erlebnis zu bieten.

Die folgenden Richtlinien wurden unter Berücksichtigung der Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG) erstellt. Da beim Erstellen einer barrierefreien Website viele Faktoren zu berücksichtigen sind, reicht die Einhaltung dieser Richtlinien alleine nicht aus, um die vollständige Barrierefreiheit Ihres Onlineshops sicherzustellen. Mehr über Barrierefreiheit im Web erfahren Sie auf der WCAG-Website oder in den unten aufgeführten Ressourcen.

Barrierefreiheit von Text

Es ist wichtig, dass der Text in Ihrem Onlineshop für Kunden lesbar ist, die sehbehindert sind oder Schwierigkeiten beim Lesen dicht geschriebener Textblöcke haben.

Farbkontrast

Achten Sie beim Bearbeiten der Farben für Ihren Onlineshop darauf, dass Ihr gesamter Text für farbenblinde oder anderweitig sehbehinderte Kunden zugänglich ist. Diese Kunden sind auf einen angemessenen Farbkontrast angewiesen, um Elemente visuell voneinander zu unterscheiden. Sie können ein Online-Kontrastverhältnis-Tool verwenden, um den Kontrast der verschiedenen Teile Ihres Shops zu überprüfen.

Im folgenden Beispiel hat der Text gegenüber seinem Hintergrund ein Kontrastverhältnis von 2,4:1 und ist für einige Kunden schwer zu lesen.

Ein hellgrauer Textblock vor einem einheitlich weißen Hintergrund

Im nächsten Beispiel hat der Text ein Kontrastverhältnis von 4,8:1 und ist für viele Kunden gut lesbar.

Ein dunkelgrauer Textblock vor einem einheitlich weißen Hintergrund

Testen Sie den Kontrast des gesamten Texts, einschließlich Textkörper, Überschriften, Links und Formularfelder. Beachten Sie dabei die folgenden Richtlinien:

  • Die Farbe von Textkörpern und Schaltflächentext sollte ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben.
  • Die Farbe von Überschriften und anderem großen Text (Schriftgröße 24 px und höher) sollte ein Kontrastverhältnis von mindestens 3:1 zum Hintergrund haben.
  • Die Farbe des gesamten Texts über Bildern, einschließlich Slideshows, Bannern und Videos, sollte ein ausreichendes Kontrastverhältnis zum Hintergrund haben. Bei großem Text (Schriftgröße 24 px und höher) sollte der Kontrast mindestens 3:1 betragen. Bei kleinerem Text sollte der Kontrast mindestens 4,5:1 betragen.
  • Die Farbe von Nicht-Text-Elementen, einschließlich Eingaberahmen und Symbolen, weist gegenüber dem Hintergrund ein Kontrastverhältnis von mindestens 3:1 auf.

Textüberschriften

Wenn Sie Ihrer Seite Überschriften mit dem Rich-Text-Editor hinzufügen, ist es wichtig, die sequenzielle Reihenfolge (1 - 6) aufrechtzuerhalten. Überschriften werden von unterstützenden Technologien verwendet, um den Aufbau des Seiteninhalts zu vermitteln. Das Überspringen von Ebenen, z. B. eine Überschrift der Ebene 2 gefolgt von einer Überschrift der Ebene 4, kann für die Benutzer verwirrend sein. Beachten Sie die folgende Richtlinie:

  • Überschriften sollten in sequenzieller Reihenfolge verwendet und es sollten keine Ebenen übersprungen werden.

Textgröße und -ausrichtung

Stellen Sie beim Bearbeiten der Typografieeinstellungen Ihres Themes sicher, dass Ihr Text groß genug ist, sodass die Kunden ihn bequem lesen können.

Der Text sollte außerdem einen einheitlichen Abstand zwischen Wörtern und Buchstaben aufweisen, um das Lesen zu erleichtern. Im folgenden Beispiel ist der Text im Blocksatz ausgerichtet, wodurch ein uneinheitlicher Abstand zwischen Wörtern entsteht.

Ein im Blocksatz ausgerichteter Textblock Jede Textzeile wird so gestreckt, dass sie den gesamten verfügbaren Platz vom Anfang bis Ende der Zeile füllt. Dadurch werden unterschiedliche Abstände zwischen den Wörtern erzwungen, um die Zeilenbreite voll auszunutzen.

Im nächsten Beispiel ist der Text linksbündig ausgerichtet, wodurch ein einheitlicher Abstand zwischen Wörtern entsteht.

Ein linksbündig ausgerichteter Textblock Zwischen jedem Wort besteht ein einheitlicher Abstand.

Beachten Sie beim Anpassen der Größe und Ausrichtung von Text die folgenden Richtlinien:

  • Die Mindestschriftgröße für Textkörper sollte 16 px entsprechen.
  • Text sollte nicht im Blocksatz ausgerichtet sein. Blocksatz erzeugt einen uneinheitlichen Abstand zwischen Wörtern.

Hinweis: Unterschiedliche Schriftfamilien können vergleichsweise klein oder groß erscheinen, auch wenn sie die gleiche Schriftgröße haben. Wenn die verwendete Schriftart kleiner aussieht als andere Schriftarten bei 16 px , verwenden Sie eine größere Schriftgröße.

Wenn Sie Ihrem Text Links hinzufügen, stellen Sie sicher, dass sie von allen Ihren Kunden erkannt werden können. Da einige Kunden Probleme mit der Erkennung von Farben haben, können Sie nicht ausschließlich eine Farbänderung verwenden, um einen Link von normalem Text zu unterscheiden. Im Beispiel unten ist der Text Discover our story unterstrichen, sodass nicht nur mittels Farbänderung darauf hingewiesen wird, dass es sich bei dem Text um einen Link handelt:

Eine Willkommensnachricht mit dem Text:

Achten Sie beim Bearbeiten der Formatvorlage Ihres Themes darauf, dass Sie die Stile für Textlinks nicht entfernen. Beachten Sie die folgende Richtlinie:

  • Textlinks sollten entweder unterstrichen sein oder ein anderes visuelles Unterscheidungsmerkmal gegenüber normalem Text haben.

Alternativtext für Bilder

Wenn Sie Ihrem Onlineshop Bilder hinzufügen, müssen Sie darauf achten, dass diese "barrierefrei", d. h. auch für blinde oder sehbehinderte Kunden zugänglich sind. Hierzu können Sie Alternativtext hinzufügen, der jedes Bild genau beschreibt. Kunden, die Bildschirmlesegeräte verwenden, sind auf Alt-Text angewiesen, um den Inhalt von Bildern in Ihrem Onlineshop zu erfahren.

Sie können den Shopify-Adminbereich verwenden, um Ihren Produktbildern Alt-Text hinzuzufügen. Sie können den Theme-Editor verwenden, um den anderen Bildern in Ihrem Theme Alt-Text hinzuzufügen.

Wenn Sie einem Bild Alt-Text hinzufügen, sollten Sie so tun, als würden Sie das Bild jemandem beschreiben, der die Augen geschlossen hat. Helfen Sie der Person, ein Bild in ihrem Kopf zu erstellen. Die Art und Weise, wie Sie ein Bild beschreiben, hängt auch vom Kontext Ihrer Webseite ab. Beispielsweise beschreiben Sie das gleiche Bild für ein Reisebüro vermutlich anders als für ein Geschäft, das Outdoor-Ausrüstung verkauft. Betrachten Sie das folgende Bild:

Zwei Freunde mit Rucksäcken auf dem Rücken haben die Arme umeinander gelegt und sehen aufs Meer hinaus.

Für ein Reisebüro gehen Sie auf das Land und die Region ein, in denen die beiden Freunde unterwegs sind, und nennen den Namen des gezeigten Ozeans oder Meers. Für einen Outdoor-Ausrüster hingegen konzentrieren Sie sich auf die Marken und Funktionsmerkmale der Rucksäcke, die die beiden Freunde tragen.

Für ein Reisebüro ist ein Beispiel für schlechten Alt-Text: "Zwei Personen am Meer". Für das gleiche Büro könnte ein Beispiel für guten Alt- Text lauten: "Zwei Freunde, unterwegs in Lagos, Portugal, schauen an einem sonnigen Tag auf die sandige Bucht von Praia do Camilo."

Barrierefreiheit von Slideshows und Videos

Achten Sie beim Hinzufügen von Videos zu Ihrem Onlineshop darauf, dass Sie die Bedürfnisse von tauben oder schwerhörigen Kunden oder Kunden mit einer Sehschwäche oder Gleichgewichtsstörungen berücksichtigen.

Einige dieser Kunden sind auf die Sprachausgabefunktion (Text-to-Speech) von Bildschirmlesegeräten angewiesen, die den Inhalt einer Webseite laut vorlesen. Zusätzliches Audio von Videos und Musik, besonders wenn es unerwartet ist, kann dieses Erlebnis erschweren. Für taube oder schwerhörige Kunden ist es eine gute Idee, Ihren Videos Untertitel hinzuzufügen, damit die Inhalte für diese Kunden zugänglich sind.

Bei Kunden mit Gleichgewichtsstörungen können bewegte Inhalte Schwindel hervorrufen. Aus diesem Grund ist es wichtig, dass Slideshows und Videos nicht automatisch abgespielt werden.

Slideshows

Beachten Sie beim Hinzufügen einer Slideshow zu Ihrem Onlineshop die folgenden Richtlinien:

  • Slideshows sollten nicht automatisch abgespielt werden.
  • Wenn Slideshows automatisch abgespielt werden, sollten sie eine Einstellung enthalten, mit der Kunden die Slideshow anhalten oder beenden können.

Videos

Beachten Sie beim Hinzufügen eines Videos zu Ihrem Onlineshop die folgenden Richtlinien:

  • Videos sollten nicht automatisch abgespielt werden.
  • Wenn Videos automatisch abgespielt werden, sollte der Ton stummgeschaltet sein.
  • Bei Videos mit Audio sollte das Video vollständig sichtbar sein und nicht durch andere Seitenelemente verdeckt werden. Dadurch können Untertitel sichtbar bleiben.
  • Für Videos, die einen Dialog enthalten, sollten Texttranskripte verfügbar sein. Diese sind entweder auf der Seite oder in einem Link zu einer separaten Seite enthalten.

Diese Richtlinien gelten auch für Videos in einer Slideshow.

Tastaturunterstützung

Kunden mit Sehbehinderung oder eingeschränkter Mobilität verwenden möglicherweise eine Tastatur, um zu navigieren und Aufgaben online auszuführen. Diese Kunden benötigen einen visuellen Indikator, der ihnen mitteilt, wo sich der Fokus ihrer Tastatur auf einer Webseite befindet. Im folgenden Beispiel hat das Feld E-Mail einen visuellen Fokusindikator:

Ein Kundenanmeldebildschirm in einem Onlineshop mit Formularfeldern für E-Mail und Passwort. Das E-Mail-Feld ist blau umrandet.

Wenn Sie die Formatvorlage Ihres Themes bearbeiten, stellen Sie sicher, dass Sie das Tastaturfokusformat nicht von Seitenelementen entfernen. Beachten Sie die folgende Richtlinie:

  • Alle interaktiven Seitenelemente sollten einen klaren visuellen Indikator aufweisen, wenn sie den Tastaturfokus haben. Zu diesen Elementen gehören Links, Schaltflächen und Formularfelder.

Ressourcen

Weitere Informationen zur Barrierefreiheit im Web für die in diesem Artikel behandelten Themen finden Sie in den folgenden Ressourcen.

Ressourcen für Farbkontrast

Ressourcen für Text

Ressourcen für Alternativtext

Ressourcen für Slideshows und Videos

Ressourcen für Tastaturunterstützung

Sind Sie bereit, mit Shopify zu verkaufen?

Probieren Sie es kostenlos aus