Machen Sie Ihren Shopify-Shop ADA-zugänglich

Zwischen 2020 und 2024 nahmen die ADA-Klagen (Americans with Disabilities Act) gegen E-Commerce-Websites um 300 % zu, wobei Shopify-Shops einen wachsenden Anteil der Angriffsziele ausmachten. Über die Einhaltung gesetzlicher Vorschriften hinaus wirkt sich Barrierefreiheit direkt auf den Umsatz aus: Ungefähr 26 % der Erwachsenen in den USA leben mit einer Behinderung, was einer Kaufkraft von 490 Milliarden US-Dollar entspricht. Ein unzugänglicher Laden schließt diese Kunden vollständig aus.

Dieser Leitfaden behandelt die praktische Implementierung der Barrierefreiheit bei Shopify: die spezifischen WCAG 2.1 AA-Kriterien, die für den E-Commerce am wichtigsten sind, wie Sie Ihren aktuellen Shop prüfen und die Korrekturen, die die häufigsten Verstöße beheben.

Wichtige Erkenntnisse

• WCAG 2.1 Level AA ist der für die ADA-Konformität erforderliche Standard – nicht AAA, nicht nur Level A
• Die Tastaturnavigation muss für jedes interaktive Element funktionieren: Navigation, Produktauswahl, Warenkorb und Kasse – Das Farbkontrastverhältnis muss 4,5:1 für normalen Text und 3:1 für großen Text und UI-Komponenten betragen – Screenreader müssen aussagekräftigen Alternativtext für alle Produktbilder und aussagekräftige Beschriftungen für alle Formularfelder erhalten
• Fokusindikatoren müssen visuell sichtbar sein – Browser unterdrücken sie in vielen Themes standardmäßig
• Der Checkout von Shopify wird von Shopify verwaltet und ist zugänglich, die Warenkorbschublade Ihres Themes jedoch möglicherweise nicht
• Automatisierte Barrierefreiheitsprüfer erkennen etwa 30 % der Probleme – für den Rest sind manuelle Tests erforderlich
• Barrierefreiheits-Overlays (wie accessiBe) erfüllen nicht die WCAG-Konformität und erhöhen das rechtliche Risiko

ADA- und WCAG-Anforderungen für E-Commerce verstehen

Das ADA enthält keine spezifischen technischen Standards für Websites. Gerichte haben die Web Content Accessibility Guidelines (WCAG) konsequent als De-facto-Standard angewendet, wobei Level 2.1 AA in den meisten Vergleichen und Urteilen das akzeptierte Compliance-Ziel darstellt.

WCAG 2.1 basiert auf vier Prinzipien (POUR):

1. Wahrnehmbar: Informationen und UI-Komponenten müssen so darstellbar sein, dass Benutzer sie wahrnehmen können (Alternativen für visuelle Inhalte, Untertitel für Audio, ausreichender Kontrast).
2. Bedienbar: UI-Komponenten und Navigation müssen bedienbar sein (Tastatur zugänglich, genügend Zeit zum Erledigen von Aufgaben, keine anfallsauslösenden Inhalte)
3. Verständlich: Informationen und UI-Bedienung müssen verständlich sein (lesbare Sprache, vorhersehbares Verhalten, Eingabehilfen)
4. Robust: Inhalte müssen robust genug sein, um von unterstützenden Technologien interpretiert zu werden

Die am häufigsten angeklagten Verstöße gegen die Barrierefreiheit auf E-Commerce-Websites:

Barrierefreiheitsprüfung: Tools und Prozesse

Automatisierte Testtools:

Automatisierte Tools finden strukturelle Probleme: fehlender Alt-Text, fehlende Formularbeschriftungen, Kontrastfehler. Sie können Folgendes nicht finden: aussagekräftige Alternativtextqualität, logische Tastaturfokusreihenfolge, Screenreader-Erfahrung, kognitive Komplexität.

Manueller Testprozess:

Schritt 1 – Nur-Tastatur-Navigationstest: Trennen Sie Ihre Maus. Navigieren Sie durch Ihren Shop nur mit Tab (vorwärts), Umschalt+Tab (rückwärts), Eingabetaste (aktivieren), Leertaste (auswählen/scrollen) und den Pfeiltasten (innerhalb von Komponenten). Erledigen Sie diese Aufgaben:

• Navigieren Sie zu einer Produktkategorie
• Wählen Sie ein Produkt aus
• Wählen Sie eine Größen-/Farbvariante
• In den Warenkorb legen
• Navigieren Sie zum Warenkorb
• Gehen Sie zur Kasse

Jede Aufgabe sollte nur mit der Tastatur erledigt werden können.

Schritt 2 – Screenreader-Test: Verwenden Sie NVDA (kostenlos, Windows) oder VoiceOver (integriert, Mac/iOS). Navigieren Sie mit aktivem Screenreader durch Ihre Homepage, eine Produktseite und Ihren Warenkorb. Hören Sie auf:

• Ist jedes Bild sinnvoll beschrieben?
• Sind alle Tasten mit ihrer Aktion beschriftet?
• Ist die Lesereihenfolge logisch?
• Werden Fehlermeldungen angekündigt?

Schritt 3 – Zoomtest: Erhöhen Sie den Browser-Zoom auf 200 % und 400 %. Die Seite sollte umbrochen werden und nutzbar bleiben – kein horizontales Scrollen bei 200 %, keine Inhaltsüberlappung, kein abgeschnittener Text.

Schritt 4 – Farbkontrasttest: Verwenden Sie die ax DevTools oder den WebAIM Contrast Checker, um zu überprüfen, ob der gesamte Text die Kontrastanforderungen erfüllt: 4,5:1 für normalen Text, 3:1 für großen Text (18pt+ oder 14pt+ fett), 3:1 für UI-Komponenten (Schaltflächen, Symbole, Formularränder).

Bildbarrierefreiheit: Alt-Text für Produktbilder

Alt-Text ist der häufigste Verstoß gegen die Barrierefreiheit in Shopify-Shops. Jedes Bild muss einen Alternativtext enthalten, der die gleichen Informationen vermittelt, die ein sehender Benutzer beim Betrachten des Bildes erhalten würde.

Alt-Text-Richtlinien für Shopify-Produktbilder:

Beschreiben Sie, worauf es bei Kaufentscheidungen ankommt:

• Produktname und wichtige Unterscheidungsmerkmale
• Farbe, Material und bemerkenswerte visuelle Eigenschaften – Kontext, wenn er bei der Verwendung angezeigt wird (z. B. „Blaue Keramiktasse auf Holztisch“)
• Jeder im Bild sichtbare Text

Was Sie NICHT tun sollten:

• „image001.jpg“ – Dateinamen sind kein Alternativtext
• „Produktbild“ – allgemeine Beschreibungen vermitteln keine Informationen
• Keyword-Stuffing – „blaue Tasse, blaue Keramik-Kaffeetasse, beste blaue Tasse“ – das ist schädlich
• Beschreiben Sie jedes noch so kleine Detail – seien Sie prägnant und relevant

Alt-Text-Implementierung in Shopify:

Fügen Sie über den Shopify-Adminbereich Alternativtext zu Produktbildern hinzu:

1. Admin > Produkte > [Produkt] > klicken Sie auf ein Bild
2. Geben Sie den Alternativtext in das Feld „Bild-Alttext“ ein
3. Speichern

Für Massenaktualisierungen von Alternativtexten verwenden Sie den Shopify-Masseneditor:

1. Admin > Produkte > Alle Produkte auswählen > Produkte bearbeiten
2. Fügen Sie die Spalte „Produktbild-Alternativtext“ hinzu
3. Bearbeiten und speichern

Dekorative Bilder:

Rein dekorative Bilder (Hintergrundmuster, dekorative Trennwände) sollten leeren Alternativtext (alt="") haben. Dies weist Screenreader an, das Bild vollständig zu überspringen, anstatt „Bild“ ohne Beschreibung anzukündigen.

Tastaturnavigation: Machen Sie Ihren Shop voll funktionsfähig

Die Zugänglichkeit über die Tastatur erfordert, dass jedes interaktive Element – ​​Schaltflächen, Links, Formularfelder, Dropdown-Menüs, Modalitäten – nur über eine Tastatur erreicht, aktiviert und navigiert werden kann.

Fokusverwaltung in Shopify-Themes:

Die meisten Shopify-Themes unterdrücken Fokusindikatoren für die visuelle Ästhetik:

/* Many themes include this — it's an accessibility violation */
:focus {
  outline: none;
}

Durch einen sichtbaren Fokusstil ersetzen, der das Design nicht beeinträchtigt:

/* Visible focus for keyboard users, hidden for mouse users */
:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Still suppress for mouse clicks (no :focus-visible means mouse/touch) */
:focus:not(:focus-visible) {
  outline: none;
}

Navigationsmenü-Tastaturzugriff:

Dropdown-Navigationsmenüs müssen über die Tastatur bedienbar sein:

• Tab zum Navigationselement
• Geben Sie die Eingabetaste oder die Leertaste ein, um das Dropdown-Menü zu öffnen
• Pfeiltasten zum Navigieren in Dropdown-Elementen
• Escape, um das Dropdown-Menü zu schließen

Testen Sie dies an Ihrem aktuellen Thema. Viele Shopify-Themes verfügen über per Mausklick ausgelöste Dropdown-Menüs, auf die Tastaturbenutzer nicht zugreifen können. Fix: Stellen Sie sicher, dass bei keydown-Ereignissen zusätzlich zum Mauszeiger auch Dropdown-Menüs für die Eingabe-/Leertaste/Pfeiltasten geöffnet werden.

Modale und Schubladentastaturverwaltung:

Wenn ein Modal oder eine Einkaufswagenschublade geöffnet wird, muss der Tastaturfokus auf das Modal verschoben werden. Wenn es geschlossen wird, muss der Fokus wieder auf das Element gerichtet werden, das es ausgelöst hat. Alle fokussierbaren Elemente innerhalb des Modals müssen zugänglich sein; Der Fokus darf dem Modal nicht entgehen.

// Example: Focus management for cart drawer
function openCartDrawer() {
  const cartDrawer = document.getElementById('cart-drawer');
  cartDrawer.setAttribute('aria-hidden', 'false');
  cartDrawer.removeAttribute('inert');

  // Move focus to first focusable element in drawer
  const firstFocusable = cartDrawer.querySelector(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  firstFocusable?.focus();

  // Trap focus within drawer
  cartDrawer.addEventListener('keydown', trapFocus);
}

function closeCartDrawer(triggerElement) {
  const cartDrawer = document.getElementById('cart-drawer');
  cartDrawer.setAttribute('aria-hidden', 'true');
  cartDrawer.setAttribute('inert', '');
  cartDrawer.removeEventListener('keydown', trapFocus);

  // Return focus to trigger element
  triggerElement?.focus();
}

Barrierefreiheit von Formularen: Beschriftungen, Fehler und Anweisungen

Formulare sind der Bereich mit der größten Barrierefreiheit im E-Commerce – das Add-to-Cart-Formular, die Sucheingabe, die Newsletter-Anmeldung und die Checkout-Formulare müssen alle vollständig barrierefrei sein.

Anforderungen an das Formularetikett:

Jede Formulareingabe muss eine programmgesteuert zugeordnete Bezeichnung haben:

<!-- Correct: label explicitly associated via 'for' attribute -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" required>

<!-- Correct: label wraps input (implicit association) -->
<label>
  Email address
  <input type="email" name="email" required>
</label>

<!-- Wrong: placeholder is not a substitute for label -->
<input type="email" placeholder="Email address" name="email">

Platzhaltertext verschwindet, wenn Benutzer tippen, und weist in den meisten Browsern einen unzureichenden Kontrast auf. Verwenden Sie niemals Platzhalter als einzige Beschriftung.

Zugriff auf Fehlermeldungen:

Fehlermeldungen müssen programmgesteuert mit dem Feld verknüpft werden, das sie verursacht hat:

<div>
  <label for="zip">ZIP code</label>
  <input
    type="text"
    id="zip"
    name="zip"
    aria-describedby="zip-error"
    aria-invalid="true"
  >
  <p id="zip-error" role="alert">
    Please enter a valid 5-digit ZIP code
  </p>
</div>

Der role="alert" bewirkt, dass Bildschirmleseprogramme die Fehlermeldung sofort ankündigen, wenn sie erscheint. aria-describedby verknüpft den Fehler mit dem Eingabefeld, sodass Bildschirmleser den Fehler finden können, wenn sie zum Feld navigieren.

Größen- und Farbvariantenauswahl:

Auswahlmöglichkeiten für Produktvarianten (Größenschaltflächen, Farbfelder) müssen zugänglich sein. Gängige Ansätze:

<!-- Accessible radio button group for size selection -->
<fieldset>
  <legend>Size</legend>
  <div class="size-options">
    <input type="radio" id="size-s" name="size" value="S">
    <label for="size-s">Small</label>

    <input type="radio" id="size-m" name="size" value="M">
    <label for="size-m">Medium</label>

    <input type="radio" id="size-l" name="size" value="L">
    <label for="size-l">Large</label>
  </div>
</fieldset>

Farbfelder benötigen verständliche Namen – die visuelle Farbe reicht nicht aus:

<!-- Accessible color swatch -->
<input type="radio" id="color-navy" name="color" value="Navy">
<label for="color-navy">
  <span class="swatch navy" aria-hidden="true"></span>
  <span class="visually-hidden">Navy</span>
</label>

ARIA-Labels und semantisches HTML

ARIA-Attribute (Accessible Rich Internet Applications) füllen semantische Lücken, bei denen HTML allein nicht ausreicht. Die erste Regel von ARIA lautet jedoch: „Verwenden Sie ARIA nicht, wenn HTML dies kann.“

Gemeinsame ARIA-Muster für Shopify-Shops:

<!-- Cart button with item count -->
<button aria-label="Cart, 3 items">
  <svg aria-hidden="true"><!-- cart icon --></svg>
  <span class="visually-hidden">Cart</span>
  <span class="cart-count" aria-hidden="true">3</span>
</button>

<!-- "Add to Cart" button state changes -->
<button id="add-to-cart" aria-live="polite">
  Add to Cart
</button>
<!-- After adding: -->
<button id="add-to-cart" aria-live="polite">
  Added to Cart ✓
</button>

<!-- Loading states -->
<div aria-busy="true" aria-live="polite">
  Loading products...
</div>

<!-- Expandable sections (accordion) -->
<button aria-expanded="false" aria-controls="faq-answer-1">
  What is your return policy?
</button>
<div id="faq-answer-1" hidden>
  <p>We accept returns within 30 days...</p>
</div>

Landmark-Rollen für die Navigation:

Stellen Sie sicher, dass Ihr Theme die richtigen wegweisenden HTML-Elemente verwendet, durch die Benutzer von Bildschirmleseprogrammen navigieren können:

<header role="banner"><!-- site header --></header>
<nav aria-label="Main navigation"><!-- primary navigation --></nav>
<main id="main-content"><!-- main content --></main>
<aside><!-- sidebar filters or complementary content --></aside>
<footer role="contentinfo"><!-- site footer --></footer>

Barrierefreiheits-Overlays: Warum sie scheitern

Barrierefreiheits-Overlays (accessiBe, UserWay, AudioEye) sind JavaScript-Widgets, die angeblich Ihre Website automatisch barrierefrei machen. Sie stellen keine Lösung dar und erhöhen das rechtliche Risiko.

Warum Overlays fehlschlagen:

1. Sie können strukturelle HTML-Barrierefreiheitsprobleme nicht beheben, sondern nur die Darstellung auf Oberflächenebene
2. Sie geraten häufig in Konflikt mit unterstützenden Technologien, was das Erlebnis für tatsächliche Screenreader-Benutzer verschlechtert
3. Gerichte haben die Behauptungen von Overlay-Anbietern nicht als ausreichende ADA-Konformität anerkannt
4. Die National Federation of the Blind und andere Behindertenschutzorganisationen lehnen Overlays ausdrücklich ab
5. Viele Overlay-Anbieter waren selbst mit Sammelklagen konfrontiert

Was stattdessen zu tun ist:

Investieren Sie in strukturelle Verbesserungen der Barrierefreiheit: semantisches HTML, richtige Beschriftungen, Tastaturnavigation, Fokusverwaltung und Farbkontrast. Diese Korrekturen kommen allen Benutzern zugute, verbessern die Suchmaschinenoptimierung (Screenreader und Suchcrawler haben ähnliche Anforderungen) und bieten echten Rechtsschutz.

Häufig gestellte Fragen

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Nächste Schritte

Eine umfassende Shopify-Barrierefreiheitsimplementierung – einschließlich Tastaturnavigation, Screenreader-Kompatibilität, Formularbarrierefreiheit und WCAG-Farbkontrast – erfordert sowohl Fachwissen in der Frontend-Entwicklung als auch Methodik zum Testen der Barrierefreiheit.

Zu den Shopify-Diensten von ECOSIRE gehören Barrierefreiheitsprüfungen, WCAG 2.1 AA-Behebung und laufende Barrierefreiheitsüberwachung, um Ihr Geschäft vor ADA-Rechtsstreitigkeiten zu schützen und gleichzeitig Ihren zugänglichen Kundenstamm zu erweitern.

Kontaktieren Sie unser Barrierefreiheitsteam, um einen umfassenden WCAG 2.1 AA-Audit für Ihren Shopify-Shop zu vereinbaren.