Zum Inhalt springen
Pandus
de Sprache ändern
Menü

Beispiel

Beispielbericht: Das erhält Ihr Kunde

Dies ist ein vollständiger automatischer Bericht über Linden & Loom, einen fiktiven Onlineshop, erstellt unter der Marke von Kestrel & Pine, einer fiktiven Webagentur. Beide Namen sind für dieses Beispiel erfunden; die Probleme sind echte Ergebnisse unseres Scanners auf den Demoseiten des Shops.

Beispiel-PDF öffnen Preise ansehen

Der Beispielbericht

Kestrel & Pine

Beispiel mit erfundenen Namen

Barrierefreiheitsbericht

lindenloom.example

Geprüft am 12. Oktober 2026 · Erstellt von Kestrel & Pine

36 Probleme gefunden

Problemarten: 9 · geprüfte Seiten: 3

Kritisch
6
Schwerwiegend
27
Mittel
3
Gering
0

Kritische Probleme: 6. Sie können einen Teil Ihrer Besucher daran hindern, zu kaufen oder Sie zu kontaktieren.

Was zuerst zu beheben ist

  1. 1 Einige Schaltflächen haben keinen Namen ×4
  2. 2 Formularfelder haben keine Beschriftung ×1
  3. 3 Ein Auswahlmenü hat keine Beschriftung ×1
Der erste Bildschirm von lindenloom.example, wie unser Scanner ihn gesehen hat.
Der erste Bildschirm der Seite. Die Nummern markieren Probleme aus der Liste unten.

Alle Probleme

1
Kritisch 4 Elemente

Einige Schaltflächen haben keinen Namen

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Was das für Ihre Besucher bedeutet

Wer einen Screenreader oder Sprachsteuerung nutzt, erkennt nicht, welche Schaltfläche in den Warenkorb legt, das Menü öffnet oder die Suche startet. Das kann einen Kauf ganz verhindern.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer
  • Nutzer von Sprachsteuerung

So beheben Sie es

Geben Sie jeder Schaltfläche einen Namen: sichtbaren Text, aria-label oder aria-labelledby mit Verweis auf sichtbaren Text. Reine Icon-Buttons brauchen ein aria-label wie "In den Warenkorb" oder "Schließen". Verlassen Sie sich nicht auf title-Attribute oder reine CSS-Icons.

Ein Teil dieser Erklärung ist maschinell übersetzt und noch nicht von Muttersprachlern geprüft.

Seiten, auf denen es vorkommt

  • /×2
  • /product.html×2

Beispiele auf Ihrer Website

  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Einige Schaltflächen haben keinen Namen

    Element: button[type="button"]:nth-child(1)

    Code für die Entwicklung 
    <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>
  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Einige Schaltflächen haben keinen Namen

    Element: .icons > button:nth-child(1)

    Code für die Entwicklung 
    <button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg></button>

  • Element: .cart

    Code für die Entwicklung 
    <button type="button" class="cart"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><path d="M5 7h14l-1.5 12h-11z"></path><path d="M9 7a3 3 0 0 1 6 0"></path></svg></button>

Weitere Elemente mit demselben Problem: 1.

2
Kritisch 1 Element

Formularfelder haben keine Beschriftung

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Was das für Ihre Besucher bedeutet

Screenreader-Nutzer hören nur „Eingabefeld“ und wissen nicht, ob Name, Telefonnummer oder Postleitzahl gefragt ist. Im Checkout führt das direkt zu abgebrochenen Bestellungen. Felder, die nur einen Platzhalter haben, verwirren außerdem ältere Kunden, sobald sie zu tippen beginnen.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer
  • ältere Kundinnen und Kunden
  • Menschen mit kognitiven Einschränkungen
  • Nutzer von Sprachsteuerung

So beheben Sie es

Verknüpfen Sie jedes Eingabefeld mit einem sichtbaren <label for> oder umschließen Sie das Feld mit dem Label. Verwenden Sie aria-label nur, wenn ein sichtbares Label wirklich nicht möglich ist. Ein Platzhalter ist kein Label. Prüfen Sie Such-, Newsletter-, Mengen- und Checkout-Felder.

Ein Teil dieser Erklärung ist maschinell übersetzt und noch nicht von Muttersprachlern geprüft.

Beispiele auf Ihrer Website

  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Formularfelder haben keine Beschriftung

    Element: input

    Code für die Entwicklung 
    <input type="number" value="1" min="1">
3
Kritisch 1 Element

Ein Auswahlmenü hat keine Beschriftung

WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.4.1.2

Was das für Ihre Besucher bedeutet

Screenreader-Nutzer hören nur „Kombinationsfeld“ und wissen nicht, ob Größe, Farbe, Menge oder Land ausgewählt wird. Das kann die Auswahl einer Produktvariante oder den Abschluss der Bestellung verhindern.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer
  • Nutzer von Sprachsteuerung
  • Menschen mit kognitiven Einschränkungen

So beheben Sie es

Verknüpfen Sie jedes <select> mit einem sichtbaren <label for> oder verwenden Sie aria-labelledby mit Verweis auf sichtbaren Text. aria-label nur, wenn kein sichtbares Label möglich ist. Prüfen Sie Variantenauswahl, Sortierung und Länderauswahl.

Ein Teil dieser Erklärung ist maschinell übersetzt und noch nicht von Muttersprachlern geprüft.

Beispiele auf Ihrer Website

  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Ein Auswahlmenü hat keine Beschriftung

    Element: select

    Code für die Entwicklung 
    <select>
                <option>135 × 200 cm</option>
                <option>155 × 220 cm</option>
                <option>200 × 220 cm</option>
            </select>
4
Schwerwiegend 19 Elemente

Text ist wegen zu geringen Kontrasts schwer lesbar

WCAG 2.2 1.4.3 (AA) Contrast (Minimum) · EN 301 549 9.1.4.3

Was das für Ihre Besucher bedeutet

Kunden, die weniger scharf sehen, ältere Menschen und alle, die das Smartphone im Freien nutzen, übersehen womöglich Preise, Lieferbedingungen oder Button-Beschriftungen. Schwer lesbarer Text führt zu Zögern und abgebrochenen Warenkörben.

Wen es betrifft

  • Menschen mit Sehschwäche
  • ältere Kundinnen und Kunden
  • Menschen mit Farbsehschwäche
  • Smartphone-Nutzer bei hellem Licht

So beheben Sie es

Sorgen Sie für ein Kontrastverhältnis von mindestens 4.5:1 bei normalem Text und 3:1 bei großem Text (24px oder 18.66px fett). Prüfen Sie Platzhalter, deaktiviert wirkende Zustände, Text auf Bildern und Rabatt-Badges. Passen Sie Farben in den Design-Tokens oder im CSS an statt Element für Element.

Ein Teil dieser Erklärung ist maschinell übersetzt und noch nicht von Muttersprachlern geprüft.

Seiten, auf denen es vorkommt

  • /×13
  • /product.html×4
  • /contact.html×2

Beispiele auf Ihrer Website

  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Text ist wegen zu geringen Kontrasts schwer lesbar
    Kontrast 3,93 : 1, nötig sind mindestens 4,5 : 1 Text #8c8178 auf #2b2622, 9.8pt (13px)

    Element: .bar > span

    Code für die Entwicklung 
    <span>· Returns within 30 days</span>
  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Text ist wegen zu geringen Kontrasts schwer lesbar
    Kontrast 3,93 : 1, nötig sind mindestens 4,5 : 1 Text #8c8178 auf #2b2622, 9.8pt (13px)

    Element: .bar > span

    Code für die Entwicklung 
    <span>· Returns within 30 days</span>
  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Text ist wegen zu geringen Kontrasts schwer lesbar
    Kontrast 2,88 : 1, nötig sind mindestens 4,5 : 1 Text #ffffff auf #c98a5b, 11.3pt (15px)

    Element: button

    Code für die Entwicklung 
    <button type="submit" class="btn">Send</button>

Weitere Elemente mit demselben Problem: 16.

5
Schwerwiegend 5 Elemente

Bilder haben keine Textbeschreibung

WCAG 2.2 1.1.1 (A) Non-text Content · EN 301 549 9.1.1.1

Was das für Ihre Besucher bedeutet

Screenreader-Nutzer hören nichts oder einen Dateinamen wie „IMG_2041.jpg“ statt des Produkts, der Farbe oder des Angebots. Sie übersehen womöglich wichtige Details und wechseln zu einem Shop, der seine Produkte beschreibt.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer
  • Menschen mit deaktivierten Bildern oder langsamer Verbindung

So beheben Sie es

Ergänzen Sie an jedem <img> ein alt-Attribut. Beschreiben Sie in einer kurzen Formulierung, was für den Kauf wichtig ist (Produkt, Farbe, wichtiges Detail). Verwenden Sie alt="" für rein dekorative Bilder, damit sie übersprungen werden. Kein „Bild von“ und keine Keyword-Häufung.

Ein Teil dieser Erklärung ist maschinell übersetzt und noch nicht von Muttersprachlern geprüft.

Beispiele auf Ihrer Website

  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Bilder haben keine Textbeschreibung

    Element: img[src$="hero.svg"]

    Code für die Entwicklung 
    <img src="/hero.svg" width="800" height="600">
  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Bilder haben keine Textbeschreibung

    Element: img[src$="duvet.svg"]

    Code für die Entwicklung 
    <img src="/duvet.svg">
  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Bilder haben keine Textbeschreibung

    Element: img[src$="towel.svg"]

    Code für die Entwicklung 
    <img src="/towel.svg">

Weitere Elemente mit demselben Problem: 2.

6
Schwerwiegend 3 Elemente

Einige Links sagen nicht, wohin sie führen

WCAG 2.2 2.4.4 (A) Link Purpose (In Context) · WCAG 2.2 4.1.2 (A) Name, Role, Value · EN 301 549 9.2.4.4, 9.4.1.2

Was das für Ihre Besucher bedeutet

Screenreader-Nutzer hören nur „Link“ und können nicht erkennen, ob er den Warenkorb, das Kundenkonto oder Instagram öffnet. Sie verlieren Zeit oder finden Warenkorb oder Kontaktseite gar nicht.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer
  • Nutzer von Sprachsteuerung

So beheben Sie es

Geben Sie jedem Link einen Textnamen: sichtbaren Text, Alternativtext an einem Bild im Link oder aria-label bei reinen Icon-Links. Der Name sollte das Ziel beschreiben, zum Beispiel "Warenkorb, 2 Artikel". Blenden Sie dekorative Icons mit aria-hidden="true" aus.

Ein Teil dieser Erklärung ist maschinell übersetzt und noch nicht von Muttersprachlern geprüft.

Beispiele auf Ihrer Website

  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Einige Links sagen nicht, wohin sie führen

    Element: .icons > a[href$="contact.html"]

    Code für die Entwicklung 
    <a href="/contact.html"><svg viewBox="0 0 24 24" fill="none" stroke="#2b2622" stroke-width="2"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"></path></svg></a>
  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Einige Links sagen nicht, wohin sie führen

    Element: a[href$="contact.html"]:nth-child(1)

    Code für die Entwicklung 
    <a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#7a4e2d"></circle></svg></a>

  • Element: .social > a[href$="contact.html"]:nth-child(2)

    Code für die Entwicklung 
    <a href="/contact.html"><svg width="14" height="14" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="4" fill="#7a4e2d"></rect></svg></a>
7
Mittel 1 Element

Links im Fließtext sehen aus wie normaler Text

WCAG 2.2 1.4.1 (A) Use of Color · EN 301 549 9.1.4.1

Was das für Ihre Besucher bedeutet

Menschen mit Farbsehschwäche oder Sehschwäche bemerken Links zu Lieferbedingungen, Größentabellen oder Rücksendungen womöglich nicht und verpassen Informationen, die sie brauchen.

Wen es betrifft

  • Menschen mit Farbsehschwäche
  • Menschen mit Sehschwäche
  • ältere Kundinnen und Kunden

So beheben Sie es

Unterstreichen Sie Links im Fließtext oder kennzeichnen Sie sie auf andere Weise als nur durch Farbe. Wenn Sie sich allein auf Farbe verlassen, braucht der Link mindestens 3:1 Kontrast zum umgebenden Text sowie eine sichtbare Veränderung bei Hover und Fokus.

Ein Teil dieser Erklärung ist maschinell übersetzt und noch nicht von Muttersprachlern geprüft.

Beispiele auf Ihrer Website

  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Links im Fließtext sehen aus wie normaler Text

    Element: .desc > a[href$="contact.html"]

    Code für die Entwicklung 
    <a href="/contact.html">care guide</a>
8
Mittel 1 Element

Einige Überschriften sind nur fetter oder großer Text

WCAG 2.2 1.3.1 (A) Info and Relationships · EN 301 549 9.1.3.1

Was das für Ihre Besucher bedeutet

Blinde Kundinnen und Kunden springen oft von Überschrift zu Überschrift, um Abschnitte wie „Beschreibung“, „Versand“ oder „Bewertungen“ zu finden. Unechte Überschriften sind für diese Navigation unsichtbar, sodass sie die ganze Seite anhören müssen und wichtige Informationen verpassen können.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer
  • Menschen, die mit Tastenkürzeln navigieren

So beheben Sie es

Machen Sie Text, der als Abschnittstitel dient, zu einer echten Überschrift (<h2>, <h3> usw.) in logischer Reihenfolge und gestalten Sie das Aussehen per CSS. Wählen Sie in Editoren im Formatmenü „Überschrift 2“ oder „Überschrift 3“, statt Text fett oder größer zu machen. Ist der Text keine Überschrift, lassen Sie ihn als Absatz: axe stuft diese Prüfung als experimentell ein und markiert manchmal fette Einleitungssätze.

Ein Teil dieser Erklärung ist maschinell übersetzt und noch nicht von Muttersprachlern geprüft.

Beispiele auf Ihrer Website

  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Einige Überschriften sind nur fetter oder großer Text

    Element: .price

    Code für die Entwicklung 
    <p class="price">€129</p>
9
Mittel 1 Element

Formularfelder werden nicht automatisch ausgefüllt

WCAG 2.2 1.3.5 (AA) Identify Input Purpose · EN 301 549 9.1.3.5

Was das für Ihre Besucher bedeutet

Kunden müssen Adresse, Telefonnummer und E-Mail von Hand eintippen. Menschen mit motorischen Einschränkungen oder Gedächtnisproblemen trifft das am stärksten, und ein mühsamer Checkout kostet bei allen Bestellungen.

Wen es betrifft

  • Menschen mit motorischen Einschränkungen
  • Menschen mit kognitiven Einschränkungen
  • Kunden auf dem Smartphone
  • alle Kunden im Checkout

So beheben Sie es

Verwenden Sie gültige autocomplete-Werte aus der HTML-Spezifikation, die zum Feld passen, zum Beispiel "email", "given-name", "postal-code", "tel". Korrigieren Sie Tippfehler und erfundene Werte; "off" nur dort, wo automatisches Ausfüllen falsch wäre.

Ein Teil dieser Erklärung ist maschinell übersetzt und noch nicht von Muttersprachlern geprüft.

Beispiele auf Ihrer Website

  • Screenshot des Elements auf Ihrer Seite, rot umrandet: Formularfelder werden nicht automatisch ausgefüllt

    Element: input[type="email"]

    Code für die Entwicklung 
    <input type="email" placeholder="E-mail" autocomplete="e-mail-address">

Empfehlungen über WCAG 2.2 AA hinaus

Über das Niveau WCAG 2.2 AA hinaus, auf das sich die Gesetze stützen. Nicht als Probleme gezählt; die Behebung macht die Website leichter nutzbar.

  • Einige Inhalte liegen außerhalb der Hauptbereiche der Seite Elemente: 2

    Teile der Seite befinden sich nicht in Landmarks wie Kopfbereich, Navigation, Hauptinhalt oder Fußbereich. Dies ist eine empfohlene Praxis über das Niveau WCAG 2.2 AA hinaus.

    Platzieren Sie alle sichtbaren Inhalte in Landmark-Elementen: <header>, <nav>, <main>, <aside> und <footer> (oder den entsprechenden ARIA-Rollen). Verschieben Sie lose Blöcke wie Ankündigungsleisten, Banner und Newsletter-Formulare in die passende Landmark und stellen Sie sicher, dass jede Seite genau ein <main> hat. Pop-ups und Cookie-Banner können als Dialog oder als benannte Region ausgezeichnet werden.

  • Text erreicht nicht den erhöhten Kontrast (AAA) Elemente: 1 WCAG AAA

    Manche Texte erfüllen den Basis-Kontrast, aber nicht die strengere Stufe: 7:1 für normalen und 4.5:1 für großen Text. Das ist eine Empfehlung über WCAG AA hinaus, keine Pflichtanforderung.

    Erhöhen Sie, wo praktikabel, den Kontrast auf 7:1 für normalen und 4.5:1 für großen Text (24px oder 18.66px fett), beginnend mit Fließtext, Preisen und Checkout. Machen Sie Textfarben in den Design-Tokens oder im CSS dunkler oder Hintergründe heller. Beheben Sie zuerst die Basis-Kontrastprobleme mit 4.5:1 (Regel color-contrast); diese Prüfung ist nur ein zusätzlicher Hinweis.

Im Vergleich zur vorherigen Prüfung

Prüfung vom 5. Oktober 2026: 40 Probleme

Neu
19
Behoben
22
Verbleibend
17

Seit der vorherigen Prüfung behoben

  • ✓ Text ist wegen zu geringen Kontrasts schwer lesbar×7
  • ✓ Bilder haben keine Textbeschreibung×4
  • ✓ Die Seite gibt ihre Sprache nicht an×3
  • ✓ Einige Schaltflächen haben keinen Namen×2
  • ✓ Einige Links sagen nicht, wohin sie führen×2
  • ✓ Formularfelder haben keine Beschriftung×1
  • ✓ Links im Fließtext sehen aus wie normaler Text×1
  • ✓ Einige Überschriften sind nur fetter oder großer Text×1
  • ✓ Ein Auswahlmenü hat keine Beschriftung×1

Probleme je Prüfung

Probleme je Prüfung
DatumGefundene Probleme
12. Oktober 202636
5. Oktober 202640

Geprüfte Seiten

SeiteProbleme
Linden & Loom – Linen and cotton for your homehttps://lindenloom.example/ 23
Washed linen duvet cover – Linden & Loomhttps://lindenloom.example/product.html 10
Contact – Linden & Loomhttps://lindenloom.example/contact.html 3

Derselbe Bericht als PDF, für Ihre Unterlagen oder Ihren Entwickler.

Beispiel-PDF öffnen

Automatisierte Prüfung, kein vollständiges Audit. Keine Rechtsberatung. Automatisierte Tools finden nur einen Teil der Barrierefreiheitsprobleme; Tests mit Tastatur und Screenreader bleiben notwendig.