Infogespräch zum BFSG & BaFG (Google Meet)

4.8 | Ausgezeichnet seit 2018

Klarheit gewinnen

€ 0,00

inkl. MwSt.

Individuelle Fragen klären

Kostenfrei beraten lassen

Persönliche Empfehlungen erhalten

Unverbindlich informieren

Das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland sowie das Barrierefeiheitsgesetz (BaFG) in Österreich, setzt die EU-Richtlinie zum „European Accessibility Act (EAA)“ um und betrifft insbesondere digitale Dienstleistungen wie Shopify-Shops. Wenn du dein Shopify-Store barrierefrei gestalten möchtest, ohne zusätzliche Apps zu nutzen, solltest du folgende Maßnahmen ergreifen:

1. Strukturierte und semantisch korrekte Gestaltung der Website

Verwende sauberen HTML-Code mit korrekt verschachtelten Überschriften (<h1>, <h2>, <h3> usw.), um Screenreader-freundliche Strukturen zu schaffen.
Alternativtexte (alt-Attribute) für Bilder: Alle produkt- und inhaltsrelevanten Bilder sollten mit Alternativtexten versehen werden, damit sie von Screenreadern erfasst werden können.
Eindeutige Link-Texte statt „Hier klicken“ oder „Mehr erfahren“, damit Nutzer verstehen, worauf sie klicken.

2. Tastaturbedienbarkeit sicherstellen

Teste, ob alle Elemente (Navigation, Formulare, Buttons) über die Tab-Taste erreichbar sind.
Verwende den :focus-Zustand in CSS, um die Sichtbarkeit des aktuellen Elements für Nutzer zu erhöhen.
Vermeide onclick-Ereignisse ohne alternative Tastatursteuerung.

3. Farbkontraste optimieren

Achte auf ein ausreichendes Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für größere Schrift.
Vermeide reine Farbkennzeichnungen für wichtige Informationen (z. B. Fehlermeldungen sollten nicht nur in Rot dargestellt werden, sondern auch mit Symbolen oder Text).

4. Skalierbarkeit ohne Funktionsverlust

Stelle sicher, dass die Schriftgröße auf 200 % vergrößert werden kann, ohne dass Inhalte verloren gehen oder überlappen.
Verwende flexible Layouts (rem, % oder em anstatt fixer Pixelwerte), um eine anpassbare Darstellung zu ermöglichen.

5. Verständliche Sprache und einfache Navigation

Verwende klare und einfache Sprache, insbesondere für Formulare, Anweisungen und Fehlermeldungen.
Reduziere Fachbegriffe oder erkläre sie direkt auf der Seite.
Stelle sicher, dass die Navigation konsistent bleibt und ein logischer Aufbau vorhanden ist.

6. Barrierefreie Formulare und Checkout-Prozess

Jedes Formularfeld sollte eine beschreibende Bezeichnung (label-Tag) haben.
Pflichtfelder müssen klar erkennbar sein und nicht nur farblich hervorgehoben werden.
Fehlerhinweise sollten genau erklären, was falsch ist und wie es korrigiert werden kann.

7. Barrierefreie Videos und Multimedia-Inhalte

Biete Untertitel für Videos an, um gehörlose oder schwerhörige Nutzer zu unterstützen.
Alternativ sollten Transkripte oder beschreibende Texte für Audioinhalte bereitgestellt werden.

8. Vermeidung von Barrieren durch Pop-ups und Animationen

Pop-ups sollten per Tastatur schließbar sein und nicht automatisch erscheinen, ohne dass der Nutzer eine Möglichkeit zur Steuerung hat.
Vermeide blinkende oder sich automatisch bewegende Inhalte, die nicht pausiert oder gestoppt werden können.

9. Kompatibilität mit Screenreadern und Assistenzsoftware

Teste deine Website mit Screenreadern wie NVDA oder VoiceOver.
Verwende ARIA-Attribute (aria-label, aria-hidden, role), um Screenreader-kompatible Inhalte bereitzustellen.

10. Rechtliche und inhaltliche Anforderungen

Erstelle eine Erklärung zur Barrierefreiheit, die beschreibt, welche Maßnahmen du zur Barrierefreiheit umgesetzt hast und wie Nutzer Probleme melden können.
Teste deine Seite regelmäßig mit Barrierefreiheits-Checkern wie dem WAVE Web Accessibility Evaluation Tool oder Google Lighthouse.

Mit diesen Maßnahmen kannst du sicherstellen, dass dein Shopify-Shop weitgehend barrierefrei ist und den Vorgaben des BFSG entspricht.

Wir sind eine Shopify Agentur im Herzen von NRW und stehen dir in Deutschland, Österreich & der Schweiz mit Rat und Tat zur Seite.

Du erfährst in einem 1:1 Gespräch via Google Meet, wie dein Shop mehr Umsatz genieren kann. Hier gehts zur Terminbuchung.

Infogespräch zum BFSG & BaFG (Google Meet)

EU-Garantielabel

GARAN Label Generator

Erstelle ein GARAN-Label als SVG, PDF, PNG, JPG oder WebP. Der QR-Code verweist fest auf die Informationsseite der Europäischen Union.

Variante

Garantiedauer (Jahre) Mehr als 2 Jahre. Halbe Jahre sind möglich, zum Beispiel 2,5. Hersteller / Marke Modellbezeichnung

Download

Mit dem Download bestätigen Sie, dass Sie das Label eigenverantwortlich prüfen und einsetzen.

Vorschau

Vorlage wird geladen …

Die Darstellung basiert direkt auf den unter „Assets“ hinterlegten SVG-Vorlagen. Hersteller, Modellbezeichnung und Garantiedauer werden in der Vorschau ersetzt. Der QR-Code bleibt Bestandteil der Originalvorlage.

Hinweis: Dies ist ein unabhängiges Werkzeug und nicht das offizielle Tool der EU-Kommission. Eine Zusicherung der Rechtskonformität ist nicht verbunden. Maßgeblich ist ausschließlich der amtliche Verordnungstext. Verantwortlich für die korrekte Kennzeichnung bleibt der jeweilige Verwender. Prüfen Sie das erzeugte Label vor dem Einsatz und ziehen Sie im Zweifel rechtlichen Rat hinzu. Zu den Nutzungsbedingungen

Was brauche ich wirklich?

Beantworte einige kurze Fragen und erhalte deine persönliche Dienstleistungsempfehlung.

Frage 1 von 10

Was möchtest du aktuell am meisten verbessern?

Frage 2 von 10

Welche Herausforderung beschreibt deine Situation am besten?

Frage 3 von 10

Wobei benötigst du aktuell die größte Unterstützung?

Frage 4 von 10

Welches Ziel verfolgst du kurzfristig?

Frage 5 von 10

Welcher Bereich interessiert dich am meisten?

Frage 6 von 10

Was würde deinem Unternehmen aktuell am meisten helfen?

Frage 7 von 10

Welches Thema möchtest du zuerst angehen?

Frage 8 von 10

Welche Aussage trifft auf dich am ehesten zu?

Frage 9 von 10

Worin möchtest du investieren?

Frage 10 von 10

Welches Ergebnis wäre für dich der größte Erfolg?

Shopify Playground: Gewinne einen kleinen Einblick in unsere Arbeit.

Verändere Farben, Typografie, Bilddarstellung, Abstände, Ecken und Layout direkt in der Demo.

Layout

Hintergrund

Eigene Farbe Akzentfarbe

Verändere deine Produktseite live. Alle Anpassungen werden unmittelbar in Vorschau und Code übernommen.

shop.example/products/premium-chair

Neu

London Premium Stuhl

★★★★☆(128)

€ 74,90

inkl. MwSt. zzgl. Versand

Farbe: Beige

Menge

Kostenloser Versand ab 50 €

30 Tage Rückgabe

2 Jahre Garantie

Schneller Versand

✦ main-product.liquid

{% assign current_variant =
product.selected_or_first_available_variant %}
<section class="product-page">
<div class="product-page__gallery">
{{
product.featured_image
| image_url: width: 1600
| image_tag:
loading: 'lazy',
class: 'product-page__image'
}}
</div>
<div class="product-page__details">
<h1>{{ product.title }}</h1>
<div class="product-page__price">
{{ current_variant.price | money }}
</div>
<form method="post" action="/cart/add">
<input type="hidden" name="id"
value="{{ current_variant.id }}">
<button type="submit"
class="button button--primary">
In den Warenkorb
</button>
</form>
</div>
</section>
.product-page {
display: grid;
grid-template-columns: minmax(0, 52%) minmax(0, 1fr);
gap: 24px;
font-family: Theme font;
--product-accent: #21f4bf;
}
.product-page__image {
border-radius: 18px;
}

✓ Code ist aktuell Liquid

Warenkorb ×

Premium Produkt Standard

89,00 €

Zwischensumme 89,00 €

Zur Kasse

Produkt Premium Produkt Standard

Menge

Versandhinweis Kostenloser Versand ab 50 €

Zwischensumme 89,00 €

Versand Kostenlos

Checkout

Sicher zur Kasse

▣ SSL verschluesselt

Zahlungsarten

PayPal VISA Apple Pay Klarna

✓Sicher bezahlen

✓Schneller Versand

✓Persoenlicher Support

Desktop: Hover · Smartphone: Tippen

Vorher

Nachher

greenmarket

Pavlina Jauss

Münchner Waschkultur

Schritt 1 von 4

Wie lautet deine Mailadresse?

Bitte gib deine E-Mail-Adresse ein.

Schritt 3 von 4

Welches Thema interessiert dich?

So können wir deine Anfrage besser zuordnen.

Shop-Erstellung Neuen Shop aufbauen Design & Branding Design anpassen Marketing Mehr Reichweite Technische Anpassungen Funktionen & Integrationen Optimierung Performance & Conversion Sonstiges Andere Anfrage

Deine Nachricht (optional)

Deine Daten sind bei uns sicher. Wir senden dir keine Werbe-E-Mails.

Wie entwickelt sich deine Conversion Rate?

Verändere die drei Hebel und sieh sofort, wie sich Seitenbesucher, Bestellungen und Conversion Rate entwickeln.

Conversion Rate

0,0 %

Anzahl der Seitenbesucher

Anzahl der Bestellungen

Traffic

Werbebudget pro Monat

0 €

Shop-Optimierung

Shopify Agentur-Budget pro Monat

0 €

Kundenbindung

Newsletter-Anmeldungen Gesamt

EU-Widerrufsbutton ohne App

Die meisten Lösungsanbieter zur rechtskonformen Einbindung des EU-Widerrufsbuttons empfehlen eine App, dass diese jedoch pro Jahr mehrere hundert Euro kostet, darüber spricht Niemand.

Widerrufsbutton bestellen

Wir optimieren nicht nur das Design. Wir gehen tiefer.

Bewegen Sie das Fenster über die Section und entdecken Sie den Shopify-Code hinter der sichtbaren Oberfläche.

Ein Shop, der nicht nur gut aussieht.

Wir verbinden hochwertiges Design mit individueller Shopify-Entwicklung, durchdachter Nutzerführung und sauberem Code.

Projekt besprechen

Individueller Shopify-Code

Ohne unnötige Apps

Sauber umgesetzt Schnell und skalierbar



{% assign product_form_id = 'product-form-' | append: section.id %}

<section class="product-section">
  <div class="page-width">
    <div class="product-grid">
      <div class="product-media">
        {{ product.featured_image
          | image_url: width: 1400
          | image_tag:
            loading: 'lazy',
            widths: '500, 800, 1100, 1400',
            class: 'product-image'
        }}
      </div>

      <div class="product-information">
        {% if product.vendor != blank %}
          <p class="product-vendor">
            {{ product.vendor }}
          </p>
        {% endif %}

        <h1 class="product-title">
          {{ product.title }}
        </h1>

        <div class="product-price">
          {{ product.price | money }}
        </div>

        {% form 'product', product, id: product_form_id %}
          <input
            type="hidden"
            name="id"
            value="{{ product.selected_or_first_available_variant.id }}"
          >

          <button
            type="submit"
            class="button button--primary"
          >
            In den Warenkorb
          </button>
        {% endform %}
      </div>
    </div>
  </div>
</section>

<style>
  .product-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 64px;
  }

  .product-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
  }

  .product-title {
    margin: 0 0 20px;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .button--primary {
    width: 100%;
    min-height: 56px;
    margin-top: 28px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
</style>



{% assign product_form_id = 'product-form-' | append: section.id %}

<section class="product-section">
  <div class="page-width">
    <div class="product-grid">
      <div class="product-media">
        {{ product.featured_image
          | image_url: width: 1400
          | image_tag:
            loading: 'lazy',
            widths: '500, 800, 1100, 1400',
            class: 'product-image'
        }}
      </div>

      <div class="product-information">
        {% if product.vendor != blank %}
          <p class="product-vendor">
            {{ product.vendor }}
          </p>
        {% endif %}

        <h1 class="product-title">
          {{ product.title }}
        </h1>

        <div class="product-price">
          {{ product.price | money }}
        </div>

        {% form 'product', product, id: product_form_id %}
          <input
            type="hidden"
            name="id"
            value="{{ product.selected_or_first_available_variant.id }}"
          >

          <button
            type="submit"
            class="button button--primary"
          >
            In den Warenkorb
          </button>
        {% endform %}
      </div>
    </div>
  </div>
</section>

<style>
  .product-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 64px;
  }

  .product-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
  }

  .product-title {
    margin: 0 0 20px;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .button--primary {
    width: 100%;
    min-height: 56px;
    margin-top: 28px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
</style>



{% assign product_form_id = 'product-form-' | append: section.id %}

<section class="product-section">
  <div class="page-width">
    <div class="product-grid">
      <div class="product-media">
        {{ product.featured_image
          | image_url: width: 1400
          | image_tag:
            loading: 'lazy',
            widths: '500, 800, 1100, 1400',
            class: 'product-image'
        }}
      </div>

      <div class="product-information">
        {% if product.vendor != blank %}
          <p class="product-vendor">
            {{ product.vendor }}
          </p>
        {% endif %}

        <h1 class="product-title">
          {{ product.title }}
        </h1>

        <div class="product-price">
          {{ product.price | money }}
        </div>

        {% form 'product', product, id: product_form_id %}
          <input
            type="hidden"
            name="id"
            value="{{ product.selected_or_first_available_variant.id }}"
          >

          <button
            type="submit"
            class="button button--primary"
          >
            In den Warenkorb
          </button>
        {% endform %}
      </div>
    </div>
  </div>
</section>

<style>
  .product-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 64px;
  }

  .product-image {
    width: 100%;
    height: auto;
    border-radius: 20px;
  }

  .product-title {
    margin: 0 0 20px;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .button--primary {
    width: 100%;
    min-height: 56px;
    margin-top: 28px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
</style>

E-Commerce-Management buchen

Bereits ab € 39,-/Std. managen wir alle Abläufe in deinem Onlineshop. Unsere Interim E-Commerce-Manager bearbeiten nicht nur deine Bestellungen, sondern kümmern sich um die Shoppflege, Kundensupport & Absatzsteigerung.

Du konzentrierst dich auf dein Business & wir konzentrieren uns auf die notwendigen Prozesse im E-Commerce deines Shops.

Kapazität planen

Infogespräch zum BFSG & BaFG (Google Meet)

1. Strukturierte und semantisch korrekte Gestaltung der Website

2. Tastaturbedienbarkeit sicherstellen

3. Farbkontraste optimieren

4. Skalierbarkeit ohne Funktionsverlust

5. Verständliche Sprache und einfache Navigation

6. Barrierefreie Formulare und Checkout-Prozess

7. Barrierefreie Videos und Multimedia-Inhalte

8. Vermeidung von Barrieren durch Pop-ups und Animationen

9. Kompatibilität mit Screenreadern und Assistenzsoftware

10. Rechtliche und inhaltliche Anforderungen

GARAN Label Generator

Was brauche ich wirklich?

Was möchtest du aktuell am meisten verbessern?

Welche Herausforderung beschreibt deine Situation am besten?

Wobei benötigst du aktuell die größte Unterstützung?

Welches Ziel verfolgst du kurzfristig?

Welcher Bereich interessiert dich am meisten?

Was würde deinem Unternehmen aktuell am meisten helfen?

Welches Thema möchtest du zuerst angehen?

Welche Aussage trifft auf dich am ehesten zu?

Worin möchtest du investieren?

Welches Ergebnis wäre für dich der größte Erfolg?

E-Book Shopify Coaching: Bring dein Geschäft voran

E-Book Shopify SEO: Dein Weg zur Spitzenposition bei Google

E-Book GPSR: Umsetzung mit Metafeldern

E-Book Shopify Secrets

GRATIS Storeanalyse (45 Min. Google Meet)

llms.txt Datei GRATIS - Perfekt für deine GEO-Strategie

E-Book: WordPress Design – Elementor, WP Bakery, Divi & Gutenberg (82 Seiten PDF)

E-Book: Das große WooCommerce SEO-Handbuch (125 Seiten PDF)

E-Book: WooCommerce Marketing - Social Ads Strategien für deinen Erfolg (58 Seiten PDF)

E-Book Shopify Coaching: Bring dein Geschäft voran

E-Book Shopify SEO: Dein Weg zur Spitzenposition bei Google

E-Book GPSR: Umsetzung mit Metafeldern

E-Book Shopify Secrets

Shopify Playground: Gewinne einen kleinen Einblick in unsere Arbeit.

London Premium Stuhl

Warenkorb und Checkout

greenmarket

Pavlina Jauss

Münchner Waschkultur

Wie lautet deine Mailadresse?

Wie heißt du?

Welches Thema interessiert dich?

Fast geschafft! Bitte prüfe deine Angaben.

Wie entwickelt sich deine Conversion Rate?

EU-Widerrufsbutton ohne App

Wir optimieren nicht nur das Design. Wir gehen tiefer.

Ein Shop, der nicht nur gut aussieht.

E-Commerce-Management buchen

STARTKRAFT Rawfood

Fast And Bright

Land Hessen