harborandpine.example

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: Der Tastaturfokus ist im Cookie-Banner gefangen (WCAG 2.1.2).
Wo: 1 Vorkommen auf 1 Seite, zum Beispiel /.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
Settings
```

Warum das wichtig ist: Wer nur die Tastatur oder einen Screenreader nutzt, kann überhaupt nicht einkaufen, wenn der Fokus gefangen ist (WCAG 2.1.2 Keine Tastaturfalle).

Was sich ändern muss:
- Suchen Sie in den Einstellungen Ihrer Cookie- oder Consent-Banner-App nach einer Option für Barrierefreiheit oder Fokusfallen, oder bitten Sie den Anbieter, das Problem zu beheben.
- Ein Modal darf den Fokus nur festhalten, solange es geöffnet ist, und muss sich mit der Esc-Taste schließen lassen und den Fokus an die Ausgangsstelle zurückgeben.

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: Produktoptionen lassen sich nicht mit der Tastatur auswählen (WCAG 2.1.1).
Wo: 1 Vorkommen auf 1 Seite, zum Beispiel /products/trail-daypack.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

Warum das wichtig ist: Wer nur per Tastatur einkauft, darunter viele Screenreader-Nutzer, kommt an diesem Schritt nicht weiter (WCAG 2.1.1).

Was sich ändern muss:
- Bauen Sie Optionsauswahlen aus nativen Radiobuttons (oder einem <select>) mit sichtbaren Labels; gestalten Sie das Label als Farbfeld.
- Behalten Sie eigene Elemente, braucht jede Option tabindex="0", role="radio" mit aria-checked innerhalb einer role="radiogroup" sowie Unterstützung für Pfeiltasten und Leertaste. Native Radiobuttons bringen all das von selbst mit.

Ein Änderungsvorschlag (Das Produktformular Ihres Themes (Variantenauswahl)):
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: Schaltflächen müssen wahrnehmbaren Text enthalten (WCAG 4.1.2).
Wo: 41 Vorkommen auf 9 Seiten, zum Beispiel /, /collections/all, /products/trail-daypack, /cart.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

Warum das wichtig ist: WCAG 4.1.2 verlangt, dass jedes Bedienelement einen Namen hat. Buttons ohne Namen sind oft Mengenregler, Schließen-Buttons und Slider-Pfeile.

Was sich ändern muss:
- Suchen Sie die Buttons in den Beispielen unten.
- Ergänzen Sie sichtbaren Text, visuell versteckten Text oder ein aria-label, das sagt, was der Button tut (zum Beispiel aria-label="Close" oder aria-label="Increase quantity").

Ein Änderungsvorschlag (Ihr Theme-Code (suchen Sie darin nach dem gezeigten Markup)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: Abbildungen müssen einen Alternativtext besitzen (WCAG 1.1.1).
Wo: 22 Vorkommen auf 7 Seiten, zum Beispiel /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

Warum das wichtig ist: WCAG 1.1.1 verlangt eine Textalternative für bedeutungstragende Bilder. Ohne sie können Screenreader-Nutzer nicht erkennen, welches Produkt ein Foto zeigt.

Was sich ändern muss:
- Öffnen Sie im Shopify-Adminbereich Produkte > [Produkt] > Medien, klicken Sie auf jedes Bild und füllen Sie „Alt-Text“ aus. Für Bilder in Abschnitten öffnen Sie Onlineshop > Themes > Anpassen und legen den Alt-Text des Bildes in den Abschnittseinstellungen fest.
- Beschreiben Sie, was für Kunden wichtig ist: Produktname, Farbe und gezeigte Ansicht (zum Beispiel „Canvas-Tasche in Oliv, Vorderansicht“).
- Dekorative Bilder sollten ein leeres alt-Attribut haben (alt=""), damit Screenreader sie überspringen.

Ein Änderungsvorschlag (Produktfotos: Shopify-Adminbereich › Produkte › Medien › Alt-Text. Andere Bilder: Ihr Theme-Code):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: <form>-Elemente müssen eine Beschriftung haben (WCAG 4.1.2).
Wo: 7 Vorkommen auf 6 Seiten, zum Beispiel /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
<input type="number" value="1" min="1">
```

Warum das wichtig ist: WCAG 1.3.1, 3.3.2 und 4.1.2 verlangen Labels für Formularfelder. Häufige Verursacher sind die Felder für Newsletter-Anmeldung und Suche.

Was sich ändern muss:
- Geben Sie jedem Feld ein Element <label for="field-id"> oder mindestens ein aria-label.
- Platzhaltertext allein zählt nicht als Label.

Ein Änderungsvorschlag (Ihr Theme-Code (suchen Sie darin nach dem gezeigten Markup)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: <select> Elemente müssen einen zugänglichen Namen (accessible name) besitzen (WCAG 4.1.2).
Wo: 1 Vorkommen auf 1 Seite, zum Beispiel /collections/all.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Warum das wichtig ist: WCAG 4.1.2 verlangt, dass Auswahlmenüs einen zugänglichen Namen haben.

Was sich ändern muss:
- Ergänzen Sie ein mit dem Select verknüpftes <label> oder ein aria-label wie aria-label="Sort by".

Ein Änderungsvorschlag (Ihr Theme-Code (suchen Sie darin nach dem gezeigten Markup)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: Links müssen wahrnehmbaren Text beinhalten (WCAG 2.4.4, 4.1.2).
Wo: 36 Vorkommen auf 9 Seiten, zum Beispiel /, /collections/all, /products/trail-daypack, /cart.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

Warum das wichtig ist: WCAG 2.4.4 und 4.1.2 verlangen, dass Links einen zugänglichen Namen haben, der ihren Zweck beschreibt.

Was sich ändern muss:
- Suchen Sie die Links in den Beispielen unten. Meist sind es Icons oder Bilder in einem <a>-Tag.
- Fügen Sie im Link visuell versteckten Text ein oder ein aria-label wie aria-label="Instagram" oder aria-label="Cart".
- Umschließt der Link ein Bild, geben Sie stattdessen dem Bild einen aussagekräftigen Alternativtext.

Ein Änderungsvorschlag (Ihr Theme-Code (suchen Sie darin nach dem gezeigten Markup)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: Elemente müssen einen ausreichenden Farbkontrast haben (WCAG 1.4.3).
Wo: 22 Vorkommen auf 9 Seiten, zum Beispiel /, /collections/all, /products/trail-daypack, /cart.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Warum das wichtig ist: WCAG 1.4.3 verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. Blasse Preise, Badges und Banner sind für Menschen mit Sehbehinderung schwer lesbar, und bei hellem Licht für alle.

Was sich ändern muss:
- Öffnen Sie die unten aufgeführten fehlerhaften Elemente und notieren Sie die Vorder- und Hintergrundfarben aus der Fehlerzusammenfassung.
- Machen Sie unter Onlineshop > Themes > Anpassen > Theme-Einstellungen > Farben für das betroffene Farbschema die Textfarbe dunkler oder den Hintergrund heller, bis das Verhältnis mindestens 4,5:1 beträgt.
- Achten Sie besonders auf Sale-Badges, Platzhaltertext, Footer-Links und Buttons auf Bildern.

Ein Änderungsvorschlag (Theme-Einstellungen › Farben oder die CSS-Datei Ihres Themes):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: Inhalte sollten in einer landmark region enthalten sein.
Wo: 18 Vorkommen auf 9 Seiten, zum Beispiel /, /collections/all, /products/trail-daypack, /cart.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

Warum das wichtig ist: Mit Landmarks können Screenreader-Nutzer auf der Seite gezielt springen. Das ist eine bewährte Praxis (Best Practice), die WCAG 1.3.1 und 2.4.1 unterstützt.

Was sich ändern muss:
- Umschließen Sie verstreute Inhalte (Ankündigungsleisten, Pop-ups, Chat-Widgets) mit der passenden Landmark oder platzieren Sie sie in <main>.

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.

Ich betreibe einen Shopify-Shop (Online-Store-2.0-Theme, Liquid-Templates) unter harborandpine.example. Ein Barrierefreiheitstest hat dieses Problem gefunden, und ich möchte es in meinem Theme beheben.

Problem: Überschriftenebenen sollten nur jeweils um eins steigen.
Wo: 7 Vorkommen auf 7 Seiten, zum Beispiel /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

Ein fehlerhaftes Element, wie der Browser es gerendert hat:
```html
<h3>Trail Daypack 22L</h3>
```

Warum das wichtig ist: Screenreader-Nutzer navigieren über Überschriften. Das ist eine bewährte Praxis (Best Practice), die WCAG 1.3.1 unterstützt.

Was sich ändern muss:
- Passen Sie die Überschriftenebenen in den betroffenen Abschnitten so an, dass sie der Reihe nach folgen, ohne Ebenen zu überspringen.
- Ändern Sie nur das Tag, nicht die visuelle Gestaltung (verwenden Sie CSS-Klassen für die Größe).

Ein Änderungsvorschlag (Ihr Theme-Code (suchen Sie darin nach dem gezeigten Markup)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

Regeln für die Antwort:
- Die genaue Änderung als Vorher und Nachher zeigen und die Datei oder Einstellung nennen, in die sie gehört. Wird meine Datei zuerst benötigt, mich bitten, sie einzufügen.
- Das visuelle Design und das gesamte bestehende Verhalten unverändert lassen.
- Keine Produktnamen, Preise oder Texte erfinden; Platzhalter verwenden, die ich ausfüllen kann.
- Zum Schluss erklären, wie ich die Korrektur selbst überprüfen kann.
- Dabei erklären, wie sich die Korrektur mit der Tastatur und einem Screenreader bestätigen lässt.