Zum Inhalt springen
Prüfen

Beispielbericht

musterladen.example

Diese Website ist erfunden

Den Musterladen gibt es nicht. Der Bericht ist genauso entstanden wie eine echte Einzelprüfung, mit denselben Regeln, Erklärungen und Code-Korrekturen. So sehen Sie, was Sie bekommen. Die Antworten des Inhabers in der geführten Prüfung und die Erklärung sind ebenfalls Beispiele.

Eigene Startseite kostenlos prüfen

1 · Zusammenfassung

48 / 100

Deutliche Barrieren

Abdeckung von WCAG 2.2 AA

  • Automatisch geprüft: 26 von 55 Kriterien
  • Nicht automatisch prüfbar: 29, braucht einen Menschen
Kritisch
58 Stellen · 2 Fehler
Schwer
161 Stellen · 3 Fehler
Mittel
6 Stellen · 1 Fehler
Gering
0 Stellen · 0 Fehler

225 fehlerhafte Stellen insgesamt

Dazu 3 Stellen, die von Hand zu prüfen sind, in 1 Fund, den die automatische Prüfung nicht entscheiden konnte. Zur Liste

Die fünf wichtigsten Maßnahmen

  1. Bilder ohne TextalternativeErgänzen Sie ein alt-Attribut, das den Inhalt beschreibt, oder alt="" bei rein dekorativen Bildern.
  2. Formularfelder ohne BeschriftungVerknüpfen Sie jedes Feld über for und id mit einem sichtbaren <label>.
  3. Text mit zu wenig KontrastMachen Sie den Text dunkler oder den Hintergrund heller, bis normaler Text 4,5:1 und großer Text 3:1 erreicht.
  4. Links ohne NamenGeben Sie dem Link sichtbaren Text oder ein aria-label, das das Ziel nennt.
  5. Der Tastaturfokus ist nicht sichtbarGeben Sie Links, Buttons und Feldern einen deutlichen Fokusstil, zum Beispiel einen Rahmen in :focus-visible. Entfernen Sie den Fokusrahmen nicht ohne Ersatz.
Website
https://musterladen.example/
Geprüfte Seiten
12
Datum
November 2, 2026
Tastatur- und Layoutprüfung
7 Seiten
Standard
WCAG 2.2 Stufe AA, EN 301 549

2 · Fehler (6)

6 Fehler angezeigt

  • KritischBilder ohne TextalternativeWer einen Screenreader nutzt, hört nur „Bild“ oder einen Dateinamen und erfährt nicht, was zu sehen ist..product-tile > a > img46 Stellen9 Seiten

    So beheben Sie es: Ergänzen Sie ein alt-Attribut, das den Inhalt beschreibt, oder alt="" bei rein dekorativen Bildern.

    WCAG 1.1.1 Nicht-Text-Inhalt · EN 301 549 9.1.1.1

    Codevorschlag

    Ein Vorschlag aus dem HTML des Elements. Prüfen Sie ihn, bevor Sie ihn übernehmen.

    Vorher

    <img src="/media/sofa-oslo-grau.jpg" class="product-tile__image" width="480" height="360">

    Nachher

    <img src="/media/sofa-oslo-grau.jpg" class="product-tile__image" width="480" height="360" alt="Describe what the image shows">

    Beispiele

    • https://musterladen.example/ · desktop.product-tile > a > img
      <img src="/media/sofa-oslo-grau.jpg" class="product-tile__image" width="480" height="360">
    • https://musterladen.example/sofas · desktop.product-tile > a > img
      <img src="/media/sofa-oslo-grau.jpg" class="product-tile__image" width="480" height="360">
    • https://musterladen.example/sofas/oslo-2-sitzer · desktop.product-tile > a > img
      <img src="/media/sofa-oslo-grau.jpg" class="product-tile__image" width="480" height="360">

    Seiten mit diesem Fehler

    • https://musterladen.example/
    • https://musterladen.example/kontakt
    • https://musterladen.example/leuchten
    • https://musterladen.example/sofas
    • https://musterladen.example/sofas/bergen-ecksofa
    • https://musterladen.example/sofas/oslo-2-sitzer
    • https://musterladen.example/tische
    • https://musterladen.example/tische/esstisch-lund
    • https://musterladen.example/warenkorb
  • KritischFormularfelder ohne BeschriftungWer einen Screenreader nutzt, weiß nicht, was einzugeben ist. Ein Platzhalter, der beim Tippen verschwindet, hilft ebenfalls nicht.footer .newsletter input[type="email"]12 Stellen12 Seiten

    So beheben Sie es: Verknüpfen Sie jedes Feld über for und id mit einem sichtbaren <label>.

    WCAG 4.1.2 Name, Rolle, Wert · EN 301 549 9.4.1.2

    Codevorschlag

    Ein Vorschlag aus dem HTML des Elements. Prüfen Sie ihn, bevor Sie ihn übernehmen.

    Vorher

    <input type="email" name="newsletter_email" placeholder="E-Mail-Adresse">

    Nachher

    <label for="field-name">Field name</label>
<input type="email" name="newsletter_email" placeholder="E-Mail-Adresse" id="field-name">

    Beispiele

    • https://musterladen.example/ · desktopfooter .newsletter input[type="email"]
      <input type="email" name="newsletter_email" placeholder="E-Mail-Adresse">
    • https://musterladen.example/sofas · desktopfooter .newsletter input[type="email"]
      <input type="email" name="newsletter_email" placeholder="E-Mail-Adresse">
    • https://musterladen.example/sofas/oslo-2-sitzer · desktopfooter .newsletter input[type="email"]
      <input type="email" name="newsletter_email" placeholder="E-Mail-Adresse">

    Seiten mit diesem Fehler

    • https://musterladen.example/
    • https://musterladen.example/impressum
    • https://musterladen.example/kontakt
    • https://musterladen.example/leuchten
    • https://musterladen.example/sofas
    • https://musterladen.example/sofas/bergen-ecksofa
    • https://musterladen.example/sofas/oslo-2-sitzer
    • https://musterladen.example/tische
    • https://musterladen.example/tische/esstisch-lund
    • https://musterladen.example/ueber-uns
    • https://musterladen.example/versand
    • https://musterladen.example/warenkorb
  • SchwerText mit zu wenig KontrastMenschen mit Sehschwäche, aber auch alle, die im Sonnenlicht aufs Handy schauen, können blassen Text schlecht lesen..price--old118 Stellen12 Seiten

    So beheben Sie es: Machen Sie den Text dunkler oder den Hintergrund heller, bis normaler Text 4,5:1 und großer Text 3:1 erreicht.

    WCAG 1.4.3 Kontrast (Minimum) · EN 301 549 9.1.4.3

    Codevorschlag

    Ein Vorschlag aus dem HTML des Elements. Prüfen Sie ihn, bevor Sie ihn übernehmen.

    Vorher

    .price--old {
    color: #9a9a9a;
}

    Nachher

    .price--old {
    color: #747474; /* 4.7:1 on #ffffff */
}

    Beispiele

    • https://musterladen.example/ · desktop.price--old
      <span class="price--old">1.299,00 €</span>
    • https://musterladen.example/sofas · desktop.price--old
      <span class="price--old">1.299,00 €</span>
    • https://musterladen.example/sofas/oslo-2-sitzer · desktop.price--old
      <span class="price--old">1.299,00 €</span>

    Seiten mit diesem Fehler

    • https://musterladen.example/
    • https://musterladen.example/impressum
    • https://musterladen.example/kontakt
    • https://musterladen.example/leuchten
    • https://musterladen.example/sofas
    • https://musterladen.example/sofas/bergen-ecksofa
    • https://musterladen.example/sofas/oslo-2-sitzer
    • https://musterladen.example/tische
    • https://musterladen.example/tische/esstisch-lund
    • https://musterladen.example/ueber-uns
    • https://musterladen.example/versand
    • https://musterladen.example/warenkorb
  • SchwerLinks ohne NamenEin Screenreader sagt nur „Link“, man erfährt nicht, wohin er führt. Das betrifft oft Links, die nur aus einem Symbol bestehen.footer .social > a:nth-child(1)36 Stellen12 Seiten

    So beheben Sie es: Geben Sie dem Link sichtbaren Text oder ein aria-label, das das Ziel nennt.

    WCAG 2.4.4 Linkzweck (im Kontext) · EN 301 549 9.2.4.4WCAG 4.1.2 Name, Rolle, Wert · EN 301 549 9.4.1.2

    Codevorschlag

    Ein Vorschlag aus dem HTML des Elements. Prüfen Sie ihn, bevor Sie ihn übernehmen.

    Vorher

    <a href="https://instagram.com/musterladen" class="social__link">

    Nachher

    <a href="https://instagram.com/musterladen" class="social__link" aria-label="Where the link goes">

    Beispiele

    • https://musterladen.example/ · desktopfooter .social > a:nth-child(1)
      <a href="https://instagram.com/musterladen" class="social__link"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle></svg></a>
    • https://musterladen.example/sofas · desktopfooter .social > a:nth-child(1)
      <a href="https://instagram.com/musterladen" class="social__link"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle></svg></a>
    • https://musterladen.example/sofas/oslo-2-sitzer · desktopfooter .social > a:nth-child(1)
      <a href="https://instagram.com/musterladen" class="social__link"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle></svg></a>

    Seiten mit diesem Fehler

    • https://musterladen.example/
    • https://musterladen.example/impressum
    • https://musterladen.example/kontakt
    • https://musterladen.example/leuchten
    • https://musterladen.example/sofas
    • https://musterladen.example/sofas/bergen-ecksofa
    • https://musterladen.example/sofas/oslo-2-sitzer
    • https://musterladen.example/tische
    • https://musterladen.example/tische/esstisch-lund
    • https://musterladen.example/ueber-uns
    • https://musterladen.example/versand
    • https://musterladen.example/warenkorb
  • SchwerSkriptprüfungDer Tastaturfokus ist nicht sichtbarWer mit der Tastatur navigiert, sieht nicht, wo er ist, weil sich beim Fokus nichts am Element ändert..main-nav__link7 Stellen7 Seiten

    So beheben Sie es: Geben Sie Links, Buttons und Feldern einen deutlichen Fokusstil, zum Beispiel einen Rahmen in :focus-visible. Entfernen Sie den Fokusrahmen nicht ohne Ersatz.

    WCAG 2.4.7 Fokus sichtbar · EN 301 549 9.2.4.7

    Codevorschlag

    Ein Vorschlag aus dem HTML des Elements. Prüfen Sie ihn, bevor Sie ihn übernehmen.

    CSS

    .main-nav__link:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

    Beispiele

    • https://musterladen.example/ · desktop.main-nav__link
      <a href="/sofas" class="main-nav__link">Sofas</a>
    • https://musterladen.example/sofas · desktop.main-nav__link
      <a href="/sofas" class="main-nav__link">Sofas</a>
    • https://musterladen.example/sofas/oslo-2-sitzer · desktop.main-nav__link
      <a href="/sofas" class="main-nav__link">Sofas</a>

    Seiten mit diesem Fehler

    • https://musterladen.example/
    • https://musterladen.example/leuchten
    • https://musterladen.example/sofas
    • https://musterladen.example/sofas/bergen-ecksofa
    • https://musterladen.example/sofas/oslo-2-sitzer
    • https://musterladen.example/tische
    • https://musterladen.example/tische/esstisch-lund
  • MittelZu kleine KlickflächenKleine oder eng beieinanderliegende Buttons und Links sind bei Zittern und auf Touchscreens schwer zu treffen..quantity__step6 Stellen3 Seiten

    So beheben Sie es: Machen Sie Klickflächen mindestens 24 × 24 Pixel groß oder lassen Sie genug Abstand.

    WCAG 2.5.8 Zielgröße (Minimum)

    Codevorschlag

    Ein Vorschlag aus dem HTML des Elements. Prüfen Sie ihn, bevor Sie ihn übernehmen.

    CSS

    .quantity__step {
    min-width: 24px;
    min-height: 24px;
}

    Beispiele

    • https://musterladen.example/ · desktop.quantity__step
      <button class="quantity__step" type="button">+</button>
    • https://musterladen.example/sofas · desktop.quantity__step
      <button class="quantity__step" type="button">+</button>
    • https://musterladen.example/sofas/oslo-2-sitzer · desktop.quantity__step
      <button class="quantity__step" type="button">+</button>

    Seiten mit diesem Fehler

    • https://musterladen.example/
    • https://musterladen.example/sofas
    • https://musterladen.example/sofas/oslo-2-sitzer

Von Hand zu prüfen

Diese Stellen konnte die automatische Prüfung nicht entscheiden. Sie zählen nicht zur Punktzahl. Sehen Sie sich jede an und entscheiden Sie, ob es ein Fehler ist.

  • Möglicherweise schwerText mit zu wenig KontrastMenschen mit Sehschwäche, aber auch alle, die im Sonnenlicht aufs Handy schauen, können blassen Text schlecht lesen.3 Stellen1 Vorlage

    So beheben Sie es: Machen Sie den Text dunkler oder den Hintergrund heller, bis normaler Text 4,5:1 und großer Text 3:1 erreicht.

    WCAG 1.4.3 Kontrast (Minimum) · EN 301 549 9.1.4.3

    Wo es vorkommt

    • .hero__title3 Stellen · 1 Seite

      Beispiele

      • https://musterladen.example/ · desktop.hero__title
        <h1 class="hero__title">Neu: die Kollektion Herbst</h1>

      Seiten mit diesem Fehler

      • https://musterladen.example/

3 · Dokumentation

Manuelle Prüfung

Dies sind die Antworten der Websitebetreiber in der geführten manuellen Prüfung, zu 4 von 20 Fragen. Es ist ihre eigene Einschätzung, keine Prüfung durch Luentis.

  • Alles funktioniert mit der TastaturWCAG 2.1.1 · WCAG 2.1.2 · 09.11.2026Keine Probleme gefunden
  • Der Fokus ist sichtbar und logischWCAG 2.4.3 · WCAG 2.4.7 · WCAG 2.4.11 · 09.11.2026Probleme gefunden
  • Nichts ändert sich unerwartetWCAG 3.2.1 · WCAG 3.2.2 · 09.11.2026Keine Probleme gefunden
  • Bilder sind sinnvoll beschriebenWCAG 1.1.1 · WCAG 1.4.5 · 09.11.2026Probleme gefunden

Alle Erfolgskriterien der WCAG 2.2 auf den Stufen A und AA, mit dem Abschnitt in der EN 301 549. „Automatisch keine Fehler gefunden“ heißt nur, dass unsere automatischen Regeln nichts gefunden haben. Es heißt nicht, dass das Kriterium erfüllt ist.

Erfolgskriterien der WCAG 2.2 und Ergebnisse
WCAGKriteriumEN 301 549Ergebnis
1.1.1Nicht-Text-Inhalt9.1.1.1Fehler gefunden
1.2.1Reine Audio- und reine Videoinhalte (aufgezeichnet)9.1.2.1Automatisch keine Fehler gefunden
1.2.2Untertitel (aufgezeichnet)9.1.2.2Automatisch keine Fehler gefunden
1.2.3Audiodeskription oder Medienalternative (aufgezeichnet)9.1.2.3Nicht automatisch prüfbar
1.2.4Untertitel (live)9.1.2.4Nicht automatisch prüfbar
1.2.5Audiodeskription (aufgezeichnet)9.1.2.5Nicht automatisch prüfbar
1.3.1Info und Beziehungen9.1.3.1Automatisch keine Fehler gefunden
1.3.2Bedeutungstragende Reihenfolge9.1.3.2Nicht automatisch prüfbar
1.3.3Sensorische Eigenschaften9.1.3.3Nicht automatisch prüfbar
1.3.4Ausrichtung9.1.3.4Automatisch keine Fehler gefunden
1.3.5Bestimmung des Zwecks einer Eingabe9.1.3.5Automatisch keine Fehler gefunden
1.4.1Benutzung von Farbe9.1.4.1Automatisch keine Fehler gefunden
1.4.2Audio-Steuerelement9.1.4.2Automatisch keine Fehler gefunden
1.4.3Kontrast (Minimum)9.1.4.3Fehler gefunden
1.4.4Textgröße ändern9.1.4.4Automatisch keine Fehler gefunden
1.4.5Bilder eines Textes9.1.4.5Von Ihnen geprüft: Probleme gefunden
1.4.10Umfluss9.1.4.10Automatisch keine Fehler gefunden
1.4.11Nicht-Text-Kontrast9.1.4.11Nicht automatisch prüfbar
1.4.12Textabstand9.1.4.12Automatisch keine Fehler gefunden
1.4.13Eingeblendete Inhalte bei Hover oder Fokus9.1.4.13Nicht automatisch prüfbar
2.1.1Tastatur9.2.1.1Von Ihnen geprüft: keine Probleme gefunden
2.1.2Keine Tastaturfalle9.2.1.2Von Ihnen geprüft: keine Probleme gefunden
2.1.4Tastatur-Kurzbefehle9.2.1.4Nicht automatisch prüfbar
2.2.1Zeiteinteilung anpassbar9.2.2.1Automatisch keine Fehler gefunden
2.2.2Pausieren, beenden, ausblenden9.2.2.2Automatisch keine Fehler gefunden
2.3.1Grenzwert von dreimaligem Blitzen oder weniger9.2.3.1Nicht automatisch prüfbar
2.4.1Blöcke umgehen9.2.4.1Automatisch keine Fehler gefunden
2.4.2Seite mit Titel9.2.4.2Automatisch keine Fehler gefunden
2.4.3Fokus-Reihenfolge9.2.4.3Von Ihnen geprüft: Probleme gefunden
2.4.4Linkzweck (im Kontext)9.2.4.4Fehler gefunden
2.4.5Verschiedene Methoden9.2.4.5Nicht automatisch prüfbar
2.4.6Überschriften und Beschriftungen9.2.4.6Nicht automatisch prüfbar
2.4.7Fokus sichtbar9.2.4.7Fehler gefunden
2.4.11Fokus nicht verdeckt (Minimum)–Von Ihnen geprüft: Probleme gefunden
2.5.1Zeigergesten9.2.5.1Nicht automatisch prüfbar
2.5.2Zeigerabbruch9.2.5.2Nicht automatisch prüfbar
2.5.3Beschriftung im Namen9.2.5.3Automatisch keine Fehler gefunden
2.5.4Betätigung durch Bewegung9.2.5.4Nicht automatisch prüfbar
2.5.7Ziehbewegungen–Nicht automatisch prüfbar
2.5.8Zielgröße (Minimum)–Fehler gefunden
3.1.1Sprache der Seite9.3.1.1Automatisch keine Fehler gefunden
3.1.2Sprache von Teilen9.3.1.2Automatisch keine Fehler gefunden
3.2.1Bei Fokus9.3.2.1Von Ihnen geprüft: keine Probleme gefunden
3.2.2Bei Eingabe9.3.2.2Von Ihnen geprüft: keine Probleme gefunden
3.2.3Konsistente Navigation9.3.2.3Nicht automatisch prüfbar
3.2.4Konsistente Erkennung9.3.2.4Nicht automatisch prüfbar
3.2.6Konsistente Hilfe–Nicht automatisch prüfbar
3.3.1Fehlererkennung9.3.3.1Nicht automatisch prüfbar
3.3.2Beschriftungen oder Anweisungen9.3.3.2Automatisch keine Fehler gefunden
3.3.3Fehlerempfehlung9.3.3.3Nicht automatisch prüfbar
3.3.4Fehlervermeidung (rechtlich, finanziell, Daten)9.3.3.4Nicht automatisch prüfbar
3.3.7Redundante Eingaben–Nicht automatisch prüfbar
3.3.8Barrierefreie Authentifizierung (Minimum)–Nicht automatisch prüfbar
4.1.2Name, Rolle, Wert9.4.1.2Fehler gefunden
4.1.3Statusmeldungen9.4.1.3Nicht automatisch prüfbar
Geprüfte Seiten (12)
  • https://musterladen.example/
  • https://musterladen.example/sofas
  • https://musterladen.example/sofas/oslo-2-sitzer
  • https://musterladen.example/sofas/bergen-ecksofa
  • https://musterladen.example/tische
  • https://musterladen.example/tische/esstisch-lund
  • https://musterladen.example/leuchten
  • https://musterladen.example/warenkorb
  • https://musterladen.example/kontakt
  • https://musterladen.example/ueber-uns
  • https://musterladen.example/versand
  • https://musterladen.example/impressum