Beispiel-Kundenbericht · 17. Oktober 2026

Kleiner Onlineshop: Barrierefreiheitsprüfung

Field & Form · fieldandform.example

Fiktive Demonstration. Alle Kunden, Domains, Befunde und Nachweise sind Beispiele. Die Berichte zeigen die Ergebnisstruktur; sie sind keine echten Scans oder Nachweise für Produktergebnisse.

Tarif auswählen

Zusammenfassung

Klären Sie Produktbilder und Mengensteuerung, bevor Sie den Bericht dem Shopteam übergeben. Beide betreffen den Weg zum Warenkorb. Korrigieren Sie dann die übersprungene Überschriftenebene für eine bessere Katalognavigation.

Geprüfte Seiten: 3
Befundtypen: 3
Kritisch: 2
Mittel: 1

Die Zahlen zeigen unterschiedliche Befundtypen im fiktiven Beispiel, nicht betroffene Elemente. Schweregrad bedeutet Prüfpriorität, keine Konformitätsbewertung.

Umfang und Methode

Kundenablauf: Browse products → choose quantity → review the cart.

Beispielseiten: //products/stoneware-mug/cart

Methode: automatische axe-Prüfung jeder geladenen öffentlichen Seite. Das Beispiel umfasst keine angemeldeten Bereiche, alle Zustände, Tastaturnutzung, Screenreader oder vollständige WCAG-Prüfung. Befunde benötigen menschliche Bestätigung.

Dieser Bericht zeigt automatisierte Barrierefreiheitsbefunde. Er stellt keine Rechtskonformität fest; eine manuelle Bewertung bleibt erforderlich.

Barrierefreiheit: Regeln und Geltungsbereich

Priorisierte Befunde

Priorität	Befund	Seite / Regel	Nächster Schritt
Critical	Product image is missing an alternative	`/products/stoneware-mug` `image-alt`	Describe the product information shown in the image.
Critical	Quantity buttons have no accessible names	`/cart` `button-name`	Name each quantity action and identify its product.
Moderate	Catalog heading skips a level	`/` `heading-order`	Use a consistent heading hierarchy for catalog sections.

Nachweise und Behebung

Zwei Befunde werden erläutert, um die Übergabe zur Umsetzung zu zeigen.

Befund 1 · Critical

Product image is missing an alternative

Betroffenes Element: .product-gallery img:first-child auf /products/stoneware-mug

Warum es wichtig ist: Customers who cannot see the photograph still need the product details it communicates. Alternative text should describe useful visual information without repeating every nearby word.

1 · Schematischer Beispielnachweis. Nachgebauter Oberflächenausschnitt, kein Screenshot oder Livescan. Illustrative product markup has no alt attribute. The photograph is the only place where the mug’s glaze and handle shape are described.

Vorgeschlagene Korrektur

Add concise alternative text that conveys the meaningful product details. Review each gallery image individually; avoid repeating the same description for every view.

Vorher · Beispiel-HTML

<img src="/mug.jpg" width="480" height="480">

Nachher · vorgeschlagenes HTML

<img src="/mug.jpg" width="480" height="480"
  alt="Speckled cream stoneware mug with a wide loop handle">

Korrektur prüfen: Re-run the image-alt rule. Read the product page with a screen reader and confirm the description is useful alongside the product name, price, and any additional gallery views.

Befund 2 · Critical

Quantity buttons have no accessible names

Betroffenes Element: .cart-item .quantity button auf /cart

Warum es wichtig ist: Customers need to distinguish increase from decrease, especially when more than one product is in the cart. The visible icon may not supply a meaningful control name.

1 · Schematischer Beispielnachweis. Nachgebauter Oberflächenausschnitt, kein Screenshot oder Livescan. Illustrative quantity buttons contain decorative minus and plus SVGs without accessible names. This finding groups two affected buttons under one rule.

Vorgeschlagene Korrektur

Give each button an action and product name. Announce quantity changes without moving focus, and communicate the minimum quantity through the control state.

Vorher · Beispiel-HTML

<button><svg aria-hidden="true">…</svg></button>
<span>1</span>
<button><svg aria-hidden="true">…</svg></button>

Nachher · vorgeschlagenes HTML

<button aria-label="Decrease Stoneware mug quantity">−</button>
<output aria-live="polite">1</output>
<button aria-label="Increase Stoneware mug quantity">+</button>

Korrektur prüfen: Re-run the button-name rule. Adjust quantity with the keyboard and screen reader; confirm the action names, announced value, cart total update, and behavior at the minimum quantity.

Empfohlene Übergabe

Bestätigen Sie Befunde in der echten Oberfläche und vereinbaren Sie Zuständigkeiten und Umfang.
Beheben Sie kritische Befunde zuerst; prüfen Sie jeden Vorschlag im Kontext.
Testen Sie den Kundenablauf mit Tastatur und assistiver Technologie.
Scannen Sie dieselben Seiten erneut, dokumentieren Sie ausstehende manuelle Prüfungen und teilen Sie Änderungen mit dem Kunden.