Einleitung

Barrierefreiheit bedeutet nicht nur, gesetzliche Vorgaben einzuhalten – es geht darum sicherzustellen,
dass alle Nutzer:innen, unabhängig von ihren Fähigkeiten, effektiv mit Ihrem Shopify-Shop interagieren können.
In Shopify können ARIA-Labels (Accessible Rich Internet Applications)
das Nutzungserlebnis für Screenreader-Nutzer:innen deutlich verbessern und gleichzeitig das
SEO stärken. Diese Anleitung zeigt Ihnen, wie Sie ARIA-Labels in Ihrem Shopify-Theme
einsetzen, um sowohl die Barrierefreiheit als auch das Suchmaschinenranking zu optimieren.

Was sind ARIA-Labels und warum sind sie für SEO wichtig?

ARIA-Labels sind HTML-Attribute, die unterstützenden Technologien wie
Screenreader zusätzlichen Kontext liefern. Sie beschreiben Elemente, die keinen sichtbaren Text
enthalten, und stellen sicher, dass alle Nutzer:innen Ihre Website effektiv navigieren und verstehen können.

Ein Button, der nur ein Symbol enthält, kann ohne ARIA-Label von
Screenreader-Software falsch interpretiert werden. Durch das Hinzufügen eines klaren
ARIA-Labels wird eindeutig, welche Funktion der Button hat.

Aus SEO-Sicht verbessert bessere Barrierefreiheit die Nutzererfahrung (z. B. längere
Verweildauer, niedrigere Absprungraten) und trägt so indirekt zu besseren Rankings bei.

Häufige Anwendungsfälle für ARIA-Labels in Shopify-Themes

ARIA-Labels können in vielen Bereichen Ihres Shopify-Shops die Zugänglichkeit verbessern:

• Buttons – z. B. „In den Warenkorb“, „Zur Kasse“ oder Symbol-Buttons ohne sichtbaren Text.
• Icons – z. B. Suche-, Menü– oder Warenkorb-Symbol.
• Navigationsmenüs – klare Beschriftung von Dropdowns und Bereichen.
• Formularfelder – z. B. benutzerdefinierte Suchfelder oder Newsletter-Anmeldung.
• Slider/Karussells – verständliche Pfeile und Folienstatus.

Beispiel: Ohne ARIA-Labels könnte ein Warenkorb-Symbol von einem Screenreader nur als „Button“ vorgelesen werden. Mit ARIA-Labels heißt es stattdessen: „Warenkorb ansehen“.

Praxis‑Snippets (direkt nutzbar)

1) Add‑to‑Cart‑Button (Icon‑only oder mit Text)

<button
  type="submit"
  class="btn add-to-cart"
  aria-label="In den Warenkorb: {{ product.title | escape }}"
>
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="visually-hidden">In den Warenkorb</span>
</button>

2) Suche öffnen/schließen (Icon‑Button mit Zustand)

<button
  class="btn header-search-toggle"
  aria-label="Suche öffnen"
  aria-expanded="false"
  aria-controls="search-drawer"
>
  <svg aria-hidden="true">...</svg>
</button>

<div id="search-drawer" hidden>...</div>

3) Navigation / Burger‑Menü

<button
  class="btn nav-toggle"
  aria-label="Menü öffnen"
  aria-expanded="false"
  aria-controls="main-navigation"
>
  <svg aria-hidden="true">...</svg>
</button>

<nav id="main-navigation" role="navigation" hidden>...</nav>

4) Formularfelder (Suche / Newsletter)

<input
  type="search"
  name="q"
  placeholder="Suchen"
  aria-label="Produktsuche"
/>

<input
  type="email"
  name="email"
  aria-label="E-Mail für Newsletter"
/>

<p id="nl-hint" class="visually-hidden">Wir senden nur gelegentlich Updates.</p>
<input type="email" name="email" aria-describedby="nl-hint" />

5) Slider / Karussell

<div class="carousel" role="region" aria-roledescription="Karussell" aria-label="Produktempfehlungen">
  <button class="prev" aria-label="Vorherige Folie">‹</button>
  <div class="slides" aria-live="polite">...</div>
  <button class="next" aria-label="Nächste Folie">›</button>
</div>

Best Practices (kurz)

• aria-label nur verwenden, wenn kein sichtbarer Text vorhanden ist – ansonsten übernimmt der sichtbare Text das Labeling.
• Zustände mit aria-expanded und aria-controls per JavaScript synchron halten (Werte bei Öffnen/Schließen aktualisieren).
• Icon‑SVGs mit aria-hidden="true" ausblenden; bei Bedarf eine visually-hidden-Beschriftung ergänzen.
• Kurz, konkret und lokalisiert beschriften (z. B. „Warenkorb ansehen“, nicht „Icon“).
• Regelmäßig mit einem Screenreader testen (z. B. VoiceOver, NVDA).

So fügen Sie ARIA-Labels in Shopify hinzu

Beispiel 1: ARIA-Label zu einem Button in Liquid hinzufügen

<button class="cart-icon" aria-label="View shopping cart">
  <svg>...</svg>
</button>

Beispiel 2: Verwendung von aria-labelledby, um Labels mit Elementen zu verknüpfen

<h2 id="main-nav-label">Main Navigation</h2>
<nav aria-labelledby="main-nav-label">
  <ul>
    <li><a href="/collections/all">Shop All</a></li>
    <li><a href="/pages/about-us">About Us</a></li>
  </ul>
</nav>

Beispiel 3: Ausblenden von Elementen vor Screenreadern mit aria-hidden

<span class="icon" aria-hidden="true">
  <svg>...</svg>
</span>

Hinzufügen von ARIA-Labels in ein Shopify Theme Abschnitts Schema

Sie können es Händlern ermöglichen, ARIA-Labels direkt im Theme-Editor anzupassen:

{% schema %}
{
  "name": "Button with ARIA label",
  "settings": [
    {
      "type": "text",
      "id": "aria_label",
      "label": "ARIA Label",
      "default": "Add to Cart"
    }
  ]
}
{% endschema %}

<button aria-label="{{ section.settings.aria_label }}">
  Add to Cart
</button>

Best Practices für Barrierefreiheit & SEO

Bei der Verwendung von ARIA-Labels in Shopify:

1. Keyword-Stuffing vermeiden – Zwingen Sie keine Schlüsselwörter unnatürlich in Labels; halten Sie sie relevant.
2. Beschreibend, aber prägnant – „Warenkorb ansehen“ ist besser als nur „Warenkorb“ oder „Button“.
3. Mit Screenreadern testen – prüfen Sie das Nutzungserlebnis mit NVDA (Windows) oder VoiceOver (Mac).

ARIA mit semantischem HTML kombinieren – ARIA ist kein Ersatz für saubere Struktur und korrekte Rollen/Elemente.

Fazit & Abschließende Tipps

ARIA-Labels schlagen die Brücke zwischen Design und Barrierefreiheit. Setzen Sie sie
durchdacht ein, wird Ihr Shopify-Shop nicht nur inklusiver – auch die Benutzerfreundlichkeit steigt,
was die SEO indirekt stärkt.

Wichtige Erkenntnisse:

• Verwenden Sie ARIA-Labels für interaktive Elemente, reine Symbole und Navigations-Elemente.
• Halten Sie Labels klar, prägnant und relevant (z. B. „Warenkorb ansehen“ statt „Icon“).
• Testen Sie regelmäßig mit einem Screenreader (z. B. NVDA, VoiceOver), um die Barrierefreiheits-Standards sicherzustellen.

Ermutigen Sie Ihr Team oder Ihre Kund:innen, Barrierefreiheit nicht als Option,
sondern als festen Bestandteil jedes Shopify-Projekts zu betrachten.