Website prüfen

Ratgeber

Shopify barrierefrei machen: Die häufigsten Fehler und wie Sie sie beheben

Veröffentlicht am · Lesezeit ca. 7 Minuten

Shopify-Themes sind inzwischen deutlich besser als noch vor ein paar Jahren. Trotzdem treten in vielen Shops dieselben Probleme auf: fehlende Alternativtexte, Icon-Buttons ohne Namen, zu schwache Kontraste. Die gute Nachricht: Die meisten lassen sich ohne Agentur in wenigen Stunden beheben. Dieser Ratgeber zeigt, wie.

Die Beispiele setzen Grundkenntnisse in Liquid voraus, der Template-Sprache von Shopify. Sichern Sie vor Änderungen immer Ihr Theme (Onlineshop, Themes, Aktionen, Duplizieren).

Das richtige Theme wählen

Die Wahl des Themes bestimmt, wie viel Arbeit Sie später haben. Shopifys kostenlose Themes wie Dawn und die darauf aufbauenden Themes sind laut Shopify auf Barrierefreiheit ausgelegt: Sie haben Sprunglinks, sichtbare Fokusrahmen und eine saubere Struktur. Bei Premium-Themes von Drittanbietern schwankt die Qualität stark. Prüfen Sie vor dem Kauf die Demo-Seite mit der Tastatur: Kommen Sie per Tab durch Menü, Filter und Warenkorb? Ist der Fokus sichtbar? Dann erst entscheiden.

Je mehr Sie an einem Theme umbauen, desto eher bauen Sie Fehler ein. Halten Sie Anpassungen klein und prüfen Sie nach jeder Änderung.

Fehler 1: Bilder ohne Alternativtext

Das ist in Shops der häufigste Befund. Produktbilder, Kollektionsbilder und Banner haben kein alt-Attribut oder einen Dateinamen als Text. Screenreader lesen dann „DSC_0412 Punkt J-P-G“ vor.

Im Admin beheben

Öffnen Sie ein Produkt, klicken Sie auf das Bild und wählen Sie Alt-Text bearbeiten. Beschreiben Sie, was zu sehen ist und was für den Kauf wichtig ist: „Wanderschuh Alpin, Leder, braun, Seitenansicht“. Nicht „Bild 1“ und kein Keyword-Stuffing. Bei Kollektionen und Blogbeiträgen gibt es dieselbe Funktion.

Im Theme beheben

Prüfen Sie, ob Ihr Theme den Alternativtext auch ausgibt. Gute Ausgabe in Liquid:

{{ image | image_url: width: 800 | image_tag: alt: image.alt }}

Ist ein Bild rein dekorativ, etwa ein Trennmuster, geben Sie ein leeres Attribut aus:

{{ section.settings.pattern | image_url: width: 400 | image_tag: alt: '' }}

Bei Produktbildern, die kein eigenes Alt haben, ist ein Fallback auf den Produkttitel besser als nichts:

{%- assign alt_text = image.alt | default: product.title -%}
{{ image | image_url: width: 800 | image_tag: alt: alt_text }}

Fehler 2: Icon-Buttons ohne Namen

Warenkorb, Suche, Menü, Konto: Oft stecken hier nur SVG-Icons in einem Link oder Button. Ohne Text oder Namen liest ein Screenreader nur „Schaltfläche“ vor.

<!-- vorher -->
<a href="../{{ routes.cart_url }}">{% render 'icon-cart' %}</a>

<!-- nachher -->
<a href="../{{ routes.cart_url }}">
  {% render 'icon-cart' %}
  <span class="visually-hidden">Warenkorb, {{ cart.item_count }} Artikel</span>
</a>

Die Klasse visually-hidden verbirgt den Text optisch, lässt ihn aber für Screenreader lesbar. Die meisten Themes bringen sie mit. Das Icon selbst bekommt aria-hidden="true".

Fehler 3: Zu schwache Kontraste

Normaler Text braucht mindestens 4,5:1. Häufige Kandidaten: graue Streichpreise, helle Platzhaltertexte, Text auf Hero-Bildern, Buttons in Pastellfarben. Passen Sie die Farben im Theme-Editor unter Theme-Einstellungen, Farben an. Für Text auf Bildern hilft ein halbtransparentes Overlay. Der Wert in den Einstellungen reicht dann oft nicht aus, wenn das Bild wechselt. Kontrolle: Entwicklerwerkzeuge des Browsers, Farbwähler anklicken, Kontrastwert ablesen.

Fehler 4: Formulare ohne Labels

Newsletter-Felder und Suchfelder haben oft nur einen Platzhalter. Ergänzen Sie ein Label, notfalls unsichtbar:

<label for="NewsletterForm-{{ section.id }}" class="visually-hidden">
  E-Mail-Adresse
</label>
<input id="NewsletterForm-{{ section.id }}" type="email"
       name="contact[email]" autocomplete="email" required>

Ein sichtbares Label ist besser. Für Fehlermeldungen im Checkout sorgt Shopify selbst. Prüfen Sie aber Ihre eigenen Formulare, etwa Kontakt oder Rückruf, auf aria-invalid und eine Fehlermeldung, die dem Feld zugeordnet ist.

Fehler 5: Fokus unsichtbar

Suchen Sie im Theme (Code bearbeiten, Dateien base.css oder theme.css) nach outline: none oder outline: 0. Wo kein Ersatz folgt, ergänzen Sie:

:focus-visible {
  outline: 3px solid #0B3D91;
  outline-offset: 3px;
}

Wählen Sie eine Farbe, die auf Ihrem Hintergrund mindestens 3:1 Kontrast hat. Prüfen Sie, dass der Rahmen nicht von einem mitlaufenden Header verdeckt wird.

Fehler 6: Apps und Pop-ups

Jede App, die Inhalte ausgibt, bringt eigenen Code mit: Bewertungen, Pop-ups, Produktfinder, Cookie-Banner, Chat-Widgets. Hier liegen oft die schwersten Fehler, und Sie können sie nicht direkt ändern. Gehen Sie so vor:

  • Testen Sie jedes Pop-up mit der Tastatur: Lässt es sich mit Esc schließen? Wandert der Fokus hinein und danach zurück?
  • Entfernen Sie Apps, die Sie nicht brauchen.
  • Fragen Sie beim Hersteller nach einer Erklärung zur Barrierefreiheit. Bei fehlender Antwort suchen Sie eine Alternative.
  • Ein Barrierefreiheits-Overlay ist keine Lösung, wie unser Ratgeber zu Overlays zeigt.

Bonus: Überschriften und Seitenstruktur

Viele Themes nutzen Überschriften als Designmittel. Auf der Startseite steht dann eine h1 im Logo, danach folgen mehrere h4 nur wegen der Schriftgröße. Screenreader-Nutzer navigieren aber über die Überschriften wie über ein Inhaltsverzeichnis. Halten Sie die Ebenen in der richtigen Reihenfolge ein und steuern Sie die Optik mit CSS-Klassen. Außerdem sollte der Hauptinhalt in einem <main>-Element liegen. Prüfen Sie in layout/theme.liquid, ob {{ content_for_layout }} darin eingebettet ist. Bei Dawn ist das der Fall, bei älteren Themes oft nicht.

Ein Praxistipp: Öffnen Sie Ihre Startseite und drücken Sie in einem Screenreader die Taste für „nächste Überschrift“. Wenn Sie dabei Überschriften hören, die keinen Sinn ergeben, wissen Sie, wo Sie ansetzen müssen.

Ergebnis prüfen

  1. Prüfen Sie Ihre Startseite mit dem kostenlosen Schnellcheck.
  2. Bedienen Sie den Shop von der Startseite bis zur Bestellung nur mit der Tastatur.
  3. Gehen Sie unsere Checkliste mit 15 Punkten durch.
  4. Veröffentlichen Sie Ihre Barrierefreiheitserklärung. In Shopify legen Sie dafür eine Seite unter Onlineshop, Seiten an und verlinken sie im Footer-Menü.
  5. Wiederholen Sie die Prüfung nach jedem Theme-Update und jeder neuen App.

Wenn Sie nicht selbst suchen möchten, welche Stelle im Theme betroffen ist: Der Website-Report (149 €) nennt je Befund die Stelle und einen Code-Fix für Shopify. Wenn Sie auch die Umsetzung abgeben möchten, fragen Sie uns an.

Automatische Tests finden etwa 30 bis 50 % der Barrieren. Dieser Ratgeber ist keine Rechtsberatung. Die Codebeispiele sind Vorlagen und müssen an Ihr Theme angepasst werden.