Barrierefreiheit

Ausgewählte Links

1. W3C-Dokumentation zu den Web Content Accessibility Guidelines
2. Shopify-Dokumentation zur Barrierefreiheit von Themes
3. Shopify-Entwicklerdokumentation zur Barrierefreiheit von Themes
4. Kontrastverhältnis
5. Shopify-Dokumentation zum Rich-Text-Editor
6. Shopify-Dokumentation zum Hinzufügen von Alternativtext zu Produktbildern
7. Shopify-Dokumentation zum Hinzufügen von Alternativtext zu Theme-Bildern
8. Artikel des A11Y Project zu vestibulären Störungen
9. W3C-Dokumentation zu Text-to-Speech

Hilfreiche Videos

Vimeo-Hilfeartikel zu Untertiteln und Untertitelspuren

Wenn Sie Align in Shopify anpassen und Store-Inhalte hinzufügen, helfen barrierefreie Designentscheidungen mehr Kundinnen und Kunden bei der Nutzung Ihres Onlineshops, einschließlich Menschen mit Behinderungen.

Diese Empfehlungen basieren auf den Web Content Accessibility Guidelines (WCAG). Barrierefreiheit hängt von vielen Faktoren ab. Daher garantiert die alleinige Befolgung dieser Richtlinien nicht, dass Ihr Shop vollständig barrierefrei ist. Weitere Hinweise finden Sie in den Ressourcen zur Barrierefreiheit von Shopify.

Tipp

Erweiterte Hinweise zur Barrierefreiheit von Themes finden Sie unter Shopify.dev

Barrierefreiheit von Text

Klarer, gut lesbarer Text unterstützt Kundinnen und Kunden mit eingeschränktem Sehvermögen sowie Personen, denen das Lesen dichter Inhalte schwerfällt.

Farbkontrast

Verwenden Sie einen ausreichenden Kontrast zwischen Text und Hintergrund, damit Kundinnen und Kunden Inhalte unterscheiden können, einschließlich Personen mit Farbenblindheit oder eingeschränktem Sehvermögen. Prüfen Sie Farbkombinationen mit einem Online-Tool für Kontrastverhältnisse

Beispielsweise kann Text mit einem Kontrastverhältnis von 2,4:1 für einige Kundinnen und Kunden schwer lesbar sein, während ein Verhältnis von 4,8:1 für viele leichter lesbar ist. Prüfen Sie Fließtext, Überschriften, Links, Formularfelder und Text über Bildern.

1. Verwenden Sie für Fließtext und Schaltflächentext ein Kontrastverhältnis von mindestens 4,5:1.
2. Verwenden Sie für Überschriften und anderen großen Text ab 24 px ein Kontrastverhältnis von mindestens 3:1.
3. Stellen Sie sicher, dass Text über Bildern, Diashows, Bannern und Videos das entsprechende Verhältnis erfüllt: mindestens 3:1 für großen Text und 4,5:1 für kleineren Text.
4. Verwenden Sie für Nicht-Textelemente wie Eingabefeldrahmen und Symbole ein Kontrastverhältnis von mindestens 3:1.

Tipp

Wenn Align eine Option für eine Bildüberlagerung für den von Ihnen bearbeiteten Inhalt enthält, verwenden Sie sie hinter Text auf einem Bild, um Kontrast und Lesbarkeit zu verbessern.

Textüberschriften

Verwenden Sie beim Hinzufügen von Überschriften mit dem Rich-Text-Editor die Überschriftenebenen in der richtigen Reihenfolge. Unterstützende Technologien verwenden Überschriften, um die Struktur einer Seite zu vermitteln. Daher kann es verwirrend sein, von Überschriftenebene 2 zu Überschriftenebene 4 zu springen.

1. Verwenden Sie Überschriftenebenen in aufeinanderfolgender Reihenfolge, ohne Ebenen zu überspringen.

Textgröße und Ausrichtung

Wählen Sie Textgrößen, die Kundinnen und Kunden bequem lesen können, und achten Sie auf einheitliche Abstände zwischen Wörtern und Buchstaben. Vermeiden Sie Blocksatz, da dadurch ungleichmäßige Abstände zwischen Wörtern entstehen können.

1. Legen Sie für Fließtext das Äquivalent von mindestens 16 px fest.
2. Verwenden Sie linksbündigen statt im Blocksatz ausgerichteten Text.

Hinweis

Schriftfamilien können bei gleicher Größe größer oder kleiner erscheinen. Wenn eine Schrift bei 16 px kleiner als andere Schriften wirkt, wählen Sie eine größere Größe.

Textlinks

Machen Sie Links erkennbar, ohne sich ausschließlich auf Farbe zu verlassen. Unterstrichene Links oder eine andere klare visuelle Unterscheidung von normalem Text helfen Kundinnen und Kunden, die Schwierigkeiten haben, Farbänderungen wahrzunehmen.

1. Unterstreichen Sie Textlinks oder geben Sie ihnen eine andere klare visuelle Unterscheidung vom umgebenden Text.

Alternativtext für Bilder

Alternativtext hilft blinden Kundinnen und Kunden sowie Personen mit eingeschränktem Sehvermögen, Bildinhalte mithilfe von Screenreadern zu verstehen. Fügen Sie jedem bedeutungsvollen Bild einen genauen Alternativtext hinzu.

Sie können im Shopify-Adminbereich Alternativtext zu Produktbildern hinzufügen. Im Theme-Editor können Sie Alternativtext zu anderen Theme-Bildern hinzufügen

Verfassen Sie den Alternativtext so, als würden Sie das Bild einer Person mit geschlossenen Augen beschreiben. Beschreiben Sie Details, die im Kontext der Seite und Ihres Unternehmens wichtig sind. Beispielsweise könnte eine Reiseagentur den Ort und die Landschaft in einem Bild beschreiben, während ein Outdoor-Ausrüstungsgeschäft den Schwerpunkt auf die Marken und Eigenschaften der abgebildeten Rucksäcke legen könnte.

Für eine Reiseagentur bietet „Zwei Personen vor dem Meer“ nur wenige nützliche Details. „Zwei Freunde reisen an einem sonnigen Tag durch Lagos, Portugal, und blicken auf die sandige Bucht Praia do Camilo“ ist aussagekräftiger.

Alternativtext zu Theme-Bildern hinzufügen

1. Gehen Sie im Shopify-Adminbereich zu Onlineshop > Themes
2. Suchen Sie das Align-Theme, das Sie bearbeiten möchten, und klicken Sie anschließend auf Customize.
3. Wählen Sie in der Seitenleiste des Theme-Editors den Abschnitt aus, der das Bild enthält.
4. Wählen Sie beim Bild Edit aus.
5. Geben Sie den Alternativtext im Dialog ein und klicken Sie anschließend auf Save.
6. Klicken Sie erneut auf Save, um Ihre Theme-Änderungen zu speichern.

Barrierefreiheit von Diashows und Videos

Berücksichtigen Sie beim Hinzufügen von Diashows und Videos Kundinnen und Kunden mit eingeschränktem Sehvermögen, gehörlose oder schwerhörige Personen sowie Personen, die anfällig für vestibuläre Störungen sein können.

Einige Kundinnen und Kunden verwenden Screenreader-Text-to-Speech. Unerwartete Videotöne oder Musik können die Nutzung einer Seite erschweren. Untertitel helfen gehörlosen oder schwerhörigen Personen beim Zugriff auf Videoinhalte. Bewegte Inhalte können bei Personen mit vestibulären Störungen Schwindel verursachen.

Diashows

1. Stellen Sie Diashows nicht auf automatische Wiedergabe ein.
2. Wenn eine Diashow automatisch wiedergegeben wird, stellen Sie eine Einstellung bereit, mit der Kundinnen und Kunden sie anhalten oder stoppen können.

Videos

1. Stellen Sie Videos nicht auf automatische Wiedergabe ein.
2. Wenn ein Video automatisch wiedergegeben wird, schalten Sie den Ton stumm.
3. Sorgen Sie dafür, dass Videos mit Ton vollständig sichtbar und nicht verdeckt sind, damit Untertitel sichtbar bleiben.
4. Stellen Sie für Videos mit Dialogen Texttranskripte bereit, entweder auf der Seite oder über einen Link zu einer separaten Seite.
5. Wenden Sie diese Richtlinien auch auf Videos an, die in Diashows enthalten sind.

Tastaturunterstützung

Kundinnen und Kunden mit Seh- oder motorischen Einschränkungen verwenden möglicherweise eine Tastatur, um zu navigieren und Aufgaben auszuführen. Ein klarer visueller Fokusindikator zeigt an, welches Seitenelement derzeit ausgewählt ist, beispielsweise ein Email-Feld.

1. Stellen Sie sicher, dass jedes interaktive Element einen klaren visuellen Tastatur-Fokusindikator besitzt, einschließlich Links, Schaltflächen und Formularfeldern.