Beispielbericht — so sieht eine Prüfung von Accy aus

Was zu beheben ist

1. Links ohne Namen

   Kritisch

   4 Mal auf dieser Seite · WCAG 2.4.4, 4.1.2 (A) · EN 301 549 9.2.4.4, 9.4.1.2

   Einige Links haben keinen sichtbaren Text und keinen zugänglichen Namen.

   Warum das zählt

   Screenreader können sämtliche Links einer Seite auflisten, um schnell zu navigieren. Ein Link ohne Namen erscheint in dieser Liste als nackte Adresse oder schlicht als „Link“. Betroffen sind meist die Symbole der sozialen Netzwerke in der Fußzeile und Artikelkacheln, bei denen nur das Bild verlinkt ist.

   So beheben Sie es

   Geben Sie ihm sichtbaren Text — oder, wenn es ein Symbol ist, ein aria-label, das das Ziel benennt.

   <a href="https://instagram.com/shop"><svg>…</svg></a>

   <a href="https://instagram.com/shop" aria-label="Folgen Sie uns auf Instagram">
     <svg aria-hidden="true">…</svg>
   </a>

   Sehen, wo es auftritt

   • body.template-index > div.header:nth-of-type(1) > a

     Das Bild darin hat kein alt-Attribut.

     <a href="/"><img src="/cdn/shop/files/logo_final_v2.png"></a>

   • body.template-index > div.grid:nth-of-type(3) > div.card:nth-of-type(1) > a:nth-of-type(1)

     Das Bild darin hat kein alt-Attribut.

     <a href="/products/camiseta-arena"><img src="/cdn/shop/products/DSC_0042.jpg"></a>

   • body.template-index > div.footer:nth-of-type(6) > div.social:nth-of-type(4) > a:nth-of-type(1)

     Darin steht nur ein Symbol, ohne Titel oder Beschriftung.

     <a href="https://instagram.com/tienda"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /></svg></a>

   • body.template-index > div.footer:nth-of-type(6) > div.social:nth-of-type(4) > a:nth-of-type(2)

     Darin steht nur ein Symbol, ohne Titel oder Beschriftung.

     <a href="https://facebook.com/tienda"><svg viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" /></svg></a>

2. Formularfelder ohne Beschriftung

   Kritisch

   1 Mal auf dieser Seite · WCAG 1.3.1, 3.3.2, 4.1.2 (A) · EN 301 549 9.1.3.1, 9.3.3.2, 9.4.1.2

   Einige Formularfelder haben keinen zugänglichen Namen: kein <label>, kein aria-label, kein aria-labelledby.

   Warum das zählt

   Ein Feld ohne Beschriftung wird als „Eingabefeld“ angesagt und sonst nichts. Im Suchfeld ist das ärgerlich; bei der Lieferanschrift im Bestellvorgang macht es den Kauf ohne Raten unmöglich.

   Ein unklares Feld im Bestellvorgang ist ein abgebrochener Kauf. Das ist nicht nur Rechtskonformität, das ist Conversion.

   So beheben Sie es

   Verknüpfen Sie ein <label> über das for-Attribut mit der id des Feldes, oder schließen Sie das Feld in das label ein. Ein Platzhalter zählt nicht: Er verschwindet, sobald jemand tippt, und viele Screenreader sagen ihn nie an.

   In Ihrem System · Shopify

   Die Felder im Shopify-eigenen Bestellvorgang sind bereits beschriftet. Prüfen Sie die, die Sie ergänzt haben: Newsletter in der Fußzeile, Suche im Kopfbereich und Formulare aus Apps von Drittanbietern.

   <input type="email" name="email">

   <label for="email">E-Mail-Adresse</label>
   <input type="email" id="email" name="email" autocomplete="email">
   
   <!-- Oder durch Einschließen -->
   <label>Postleitzahl
     <input type="text" name="plz" autocomplete="postal-code">
   </label>

   Sehen, wo es auftritt

   • body.template-index > div.newsletter:nth-of-type(5) > form > input:nth-of-type(1)

     <input type="email" name="email">

3. Schaltflächen ohne Namen

   Kritisch

   1 Mal auf dieser Seite · WCAG 4.1.2 (A) · EN 301 549 9.4.1.2

   Einige Schaltflächen haben keinen sichtbaren Text und keinen zugänglichen Namen.

   Warum das zählt

   Das trifft meist Schaltflächen, die nur aus einem Symbol bestehen: das X zum Schließen, die Lupe für die Suche, der Warenkorb im Kopfbereich. Ein Screenreader sagt sie als „Schaltfläche“ an, und die Person muss sie auslösen, um herauszufinden, was sie tun.

   So beheben Sie es

   Hat die Schaltfläche sichtbaren Text, sind Sie fertig. Besteht sie nur aus einem Symbol, ergänzen Sie ein aria-label mit der Handlung und kennzeichnen Sie das Symbol mit aria-hidden="true".

   In Ihrem System · Shopify

   In Dawn und den davon abgeleiteten Themes liegen die Symbolschaltflächen des Kopfbereichs in sections/header.liquid.

   <button><svg>…</svg></button>

   <button aria-label="Hinweis schließen">
     <svg aria-hidden="true">…</svg>
   </button>

   Sehen, wo es auftritt

   • body.template-index > div.header:nth-of-type(1) > button.cart-toggle

     Darin steht nur ein Symbol, ohne Titel oder Beschriftung.

     <button class="cart-toggle"><svg viewBox="0 0 24 24"><path d="M7 4h14l-2 9H8z" /></svg></button>

4. Zu geringer Farbkontrast

   Schwerwiegend

   4 Mal auf dieser Seite · WCAG 1.4.3 (AA) · EN 301 549 9.1.4.3

   Es gibt Text in 18px mit einem Kontrastverhältnis von 2.35:1 zum Hintergrund, während die Norm 4.5:1 verlangt.

   Warum das zählt

   Das ist die verbreitetste Barriere und die, die die meisten Menschen betrifft: müde Augen, ein Telefon in praller Sonne, ein billiger Bildschirm. Man braucht keine diagnostizierte Behinderung, um Hellgrau auf Weiß nicht lesen zu können.

   Der Text, der üblicherweise durchfällt, ist genau der Text, der verkauft: durchgestrichene Preise, Versandkosten, Lagerhinweise.

   So beheben Sie es

   Dunkeln Sie den Text ab oder hellen Sie den Hintergrund auf, bis das geforderte Verhältnis erreicht ist. Normaler Text braucht 4,5:1; ab 24 px (oder 18,66 px fett) genügen 3:1. Grautöne um #999 auf Weiß bestehen so gut wie nie.

   In Ihrem System · Shopify

   Im Theme-Editor lassen sich unter Einstellungen › Farben die Farbschemata ändern, ohne Code anzufassen.

   /* 2,85:1 — durchgefallen */
   .alter-preis { color: #999999; background: #ffffff; }

   /* 4,83:1 — bestanden */
   .alter-preis { color: #717171; background: #ffffff; }

   Sehen, wo es auftritt

   • body.template-index > div.hero:nth-of-type(2) > p.hero-sub

     <p class="hero-sub">Fabricada en España con algodón orgánico certificado.</p>

   • body.template-index > div.grid:nth-of-type(3) > div.card:nth-of-type(1) > span.price-old:nth-of-type(1)

     <span class="price-old">29,00 €</span>

   • body.template-index > div.grid:nth-of-type(3) > div.card:nth-of-type(1) > a:nth-of-type(2)

     <a href="/products/camiseta-arena">Leer más</a>

   • body.template-index > div.footer:nth-of-type(6) > p.legal

     <p class="legal">© 2026 Tienda de ejemplo. Todos los derechos reservados.</p>

5. Keine Barrierefreiheitserklärung gefunden

   Schwerwiegend

   1 Mal auf dieser Seite · EN 301 549 Annex V

   Auf dieser Seite haben wir keinen Verweis auf Informationen zur Barrierefreiheit gefunden.

   Warum das zählt

   Anlage 3 zu §§ 14, 28 BFSG verlangt von Dienstleistungserbringern, Informationen über die Barrierefreiheit ihrer Dienstleistung bereitzustellen. Es ist das Einzige, was die Marktüberwachung prüfen kann, ohne ein einziges Entwicklerwerkzeug zu öffnen: Sie sehen in Ihre Fußzeile, und wenn dort nichts steht, haben sie einen dokumentierten Verstoß.

   Das ist der billigste Verstoß auf dieser Liste und der, den man von außen am leichtesten sieht. Die Behebung kostet einen Nachmittag; erwischt zu werden kostet ein Verfahren.

   So beheben Sie es

   Veröffentlichen Sie eine Seite zur Barrierefreiheit und verlinken Sie sie in der Fußzeile, neben Impressum und Datenschutz. Nennen Sie den Konformitätsgrad, den Sie erklären, die Teile, von denen Sie wissen, dass sie noch nicht konform sind, das Datum der letzten Prüfung und einen Weg, Barrieren zu melden.

   In Ihrem System · Shopify

   Legen Sie die Seite unter Onlineshop › Seiten an und nehmen Sie sie unter Navigation in das Fußzeilenmenü auf.

   <footer>
     <a href="/impressum">Impressum</a>
     <a href="/datenschutz">Datenschutz</a>
   </footer>

   <footer>
     <a href="/impressum">Impressum</a>
     <a href="/datenschutz">Datenschutz</a>
     <a href="/barrierefreiheit">Barrierefreiheit</a>
   </footer>

6. Alternativtext ohne Informationsgehalt

   Schwerwiegend

   1 Mal auf dieser Seite · WCAG 1.1.1 (A) · EN 301 549 9.1.1.1

   Einige Bilder haben als Alternativtext einen Dateinamen, einen Code oder ein allgemeines Wort wie „Bild“ oder „Foto“.

   Warum das zählt

   Ein alt, das „DSC_0042.jpg“ oder „Produkt“ lautet, erfüllt die Form, aber nicht den Zweck: Die Person weiß immer noch nicht, was auf dem Bild zu sehen ist. Meist passiert das, wenn ein Katalog per Massenimport eingespielt und das Feld automatisch befüllt wurde.

   So beheben Sie es

   Beschreiben Sie den tatsächlichen Inhalt. Für Artikel funktioniert die Formel: was es ist + unterscheidendes Merkmal + Variante. „T-Shirt aus Bio-Baumwolle in Sand“ funktioniert, „Produkt“ nicht.

   In Ihrem System · Shopify

   Wenn Sie Ihren Katalog aus einer CSV importiert haben, prüfen Sie die Spalte „Image Alt Text“ und importieren Sie erneut — mit echten Beschreibungen statt Dateinamen.

   <img src="/p1.jpg" alt="Bild">
   <img src="/p2.jpg" alt="DSC_0042.jpg">

   <img src="/p1.jpg" alt="Grauer Laufschuh mit oranger Sohle">
   <img src="/p2.jpg" alt="Schwarzer Canvas-Rucksack, 20 Liter, Seitenansicht">

   Sehen, wo es auftritt

   • body.template-index > div.grid:nth-of-type(3) > div.card:nth-of-type(2) > a:nth-of-type(1) > img

     <img src="/cdn/shop/products/sudadera.jpg" alt="imagen">

7. Eingebetteter Rahmen ohne Titel

   Schwerwiegend

   1 Mal auf dieser Seite · WCAG 4.1.2, 2.4.1 (A) · EN 301 549 9.4.1.2

   Es gibt ein <iframe> ohne title-Attribut.

   Warum das zählt

   Screenreader können die Rahmen einer Seite auflisten. Ohne Titel erscheinen sie dort als „Frame“, „Frame“, „Frame“, und die Person muss jeden einzeln betreten, um herauszufinden, welcher das Video ist, welcher die Karte und welcher das Chat-Widget.

   Dreißig Sekunden Arbeit je Rahmen — und es steht in jedem Prüfbericht.

   So beheben Sie es

   Ergänzen Sie ein title, das den Inhalt des Rahmens beschreibt. Handelt es sich um ein unsichtbares Zählpixel, kennzeichnen Sie es zusätzlich mit aria-hidden="true".

   In Ihrem System · Shopify

   Stammt das Video aus einem Theme-Block, bearbeiten Sie die Vorlage unter Onlineshop › Themes › Code bearbeiten und ergänzen Sie das title am iframe.

   <iframe src="https://www.youtube.com/embed/xyz"></iframe>

   <iframe src="https://www.youtube.com/embed/xyz"
           title="Video: die richtige Größe finden"></iframe>

   Sehen, wo es auftritt

   • body.template-index > iframe

     <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>

8. Der Platzhalter übernimmt die Aufgabe der Beschriftung

   Schwerwiegend

   1 Mal auf dieser Seite · WCAG 3.3.2 (A) · EN 301 549 9.3.3.2

   Einige Felder beziehen ihren einzigen zugänglichen Namen aus dem placeholder-Attribut.

   Warum das zählt

   Platzhaltertext verschwindet in dem Moment, in dem jemand zu tippen beginnt. Wer mitten im Formular unterbrochen wird, kann nicht mehr erkennen, was in dieses Feld gehörte; wer Schwierigkeiten mit Gedächtnis oder Aufmerksamkeit hat, bleibt ganz ohne Anhaltspunkt. Der Kontrast ist gestalterisch bedingt meist ohnehin sehr gering.

   So beheben Sie es

   Ergänzen Sie ein sichtbares <label>. Den Platzhalter können Sie als Formathinweis behalten („z. B. 10115“), niemals aber als Ersatz für den Feldnamen.

   <input type="text" name="plz" placeholder="Postleitzahl">

   <label for="plz">Postleitzahl</label>
   <input type="text" id="plz" name="plz"
          placeholder="z. B. 10115" autocomplete="postal-code">

   Sehen, wo es auftritt

   • body.template-index > div.header:nth-of-type(1) > form.search > input

     <input type="text" name="q" placeholder="Buscar productos">

9. Datentabelle ohne Kopfzellen

   Schwerwiegend

   1 Mal auf dieser Seite · WCAG 1.3.1 (A) · EN 301 549 9.1.3.1

   Es gibt eine Tabelle mit Daten, aber ohne <th>-Zellen.

   Warum das zählt

   In einer sauber ausgezeichneten Tabelle sagt ein Screenreader „Größe: M, Preis: 19 €“ an, während die Person zwischen den Zellen wandert. Ohne Kopfzellen liest er nur „M, 19 €“, und sie muss sich die Reihenfolge der Spalten merken.

   So beheben Sie es

   Machen Sie aus der ersten Zeile (oder Spalte) <th> und ergänzen Sie scope="col" beziehungsweise scope="row".

   In Ihrem System · Shopify

   Größentabellen entstehen meist im Rich-Text-Editor der Artikelbeschreibung; bearbeiten Sie das HTML über die Schaltfläche „</>“.

   <tr><td>Größe</td><td>Preis</td></tr>
   <tr><td>M</td><td>19 €</td></tr>

   <tr><th scope="col">Größe</th><th scope="col">Preis</th></tr>
   <tr><td>M</td><td>19 €</td></tr>

   Sehen, wo es auftritt

   • body.template-index > div.sizes:nth-of-type(4) > table

     <table> <tr><td>Talla</td><td>Pecho</td><td>Largo</td></tr> <tr><td>S</td><td>96 cm</td><td>68 cm</td></tr> <tr><td>M</td><td>101 cm</td><td>70 cm</td></tr> </table>

10. Die Fokusanzeige ist abgeschaltet

    Schwerwiegend

    1 Mal auf dieser Seite · WCAG 2.4.7 (AA) · EN 301 549 9.2.4.7

    Das CSS entfernt die Fokusumrandung (a:focus), ohne etwas Sichtbares an ihre Stelle zu setzen.

    Warum das zählt

    Wer mit der Tabulatortaste navigiert, muss sehen, wo er gerade ist. Ohne Fokusanzeige drückt die Person Tab und kann nicht erkennen, welches Element ausgewählt ist: Navigieren wird zum Raten. Es ist einer der am stärksten behindernden Fehler und einer der am leichtesten zu behebenden.

    Ein einziges `outline: none` im Stylesheet eines Themes kann den gesamten Shop per Tastatur unbenutzbar machen.

    So beheben Sie es

    Verwenden Sie outline: none nie ohne Ersatz. Passt der Standardrahmen nicht zu Ihrer Gestaltung, zeichnen Sie einen eigenen — mit mindestens 3:1 Kontrast zum Hintergrund.

    a:focus, button:focus { outline: none; }

    a:focus-visible, button:focus-visible {
      outline: 3px solid #005fcc;
      outline-offset: 2px;
    }

    Sehen, wo es auftritt

    • a:focus

      a:focus { outline: none }

11. Anklickbares Element, per Tastatur nicht erreichbar

    Schwerwiegend

    1 Mal auf dieser Seite · WCAG 2.1.1, 4.1.2 (A) · EN 301 549 9.2.1.1

    Es gibt ein <div> mit einem Klick-Handler, aber ohne Rolle und ohne Platz in der Tabulatorreihenfolge.

    Warum das zählt

    Eine Maus kann alles anklicken, eine Tastatur nicht. Ein <div> mit onclick ist unsichtbar für jeden, der mit Tab, mit einer Tastensteuerung oder per Sprache navigiert. Und wenn dieses div „In den Warenkorb“ ist, ist der Shop unbenutzbar.

    Das ist der Fehler, der am häufigsten einen kompletten Bestellvorgang blockiert.

    So beheben Sie es

    Verwenden Sie <button>. Es regelt Fokus, Auslösen mit Enter und Leertaste und die Ansage der Rolle auf einmal, ganz ohne zusätzliches JavaScript.

    <div onclick="inDenWarenkorb()">In den Warenkorb</div>

    <button type="button" onclick="inDenWarenkorb()">In den Warenkorb</button>

    Sehen, wo es auftritt

    • body.template-index > div.hero:nth-of-type(2) > div.cta

      <div class="cta" onclick="location.href='/collections/novedades'">Ver la colección</div>

12. Video ohne Untertitel

    Schwerwiegend

    1 Mal auf dieser Seite · WCAG 1.2.2 (A) · EN 301 549 9.1.2.2

    Es gibt ein <video> ohne Untertitelspur.

    Warum das zählt

    Ohne Untertitel existiert das Video für niemanden, der nicht hören kann. Und ebenso wenig für die Mehrheit, die auf dem Telefon ohne Ton unterwegs ist, also für fast alle.

    So beheben Sie es

    Ergänzen Sie ein <track kind="captions"> mit einer WebVTT-Datei. Liegt das Video bei YouTube oder Vimeo, schalten Sie die Untertitel dort ein und lesen Sie sie gegen: die automatischen sind meist falsch.

    <video src="/promo.mp4" controls></video>

    <video src="/promo.mp4" controls>
      <track kind="captions" src="/promo-de.vtt" srclang="de" label="Deutsch" default>
    </video>

    Sehen, wo es auftritt

    • body.template-index > div.hero:nth-of-type(2) > video

      <video src="/cdn/shop/videos/hero.mp4" autoplay loop></video>

13. Ton, der von selbst abspielt

    Schwerwiegend

    1 Mal auf dieser Seite · WCAG 1.4.2 (A) · EN 301 549 9.1.4.2

    Es gibt ein <video> mit autoplay und ohne Stummschaltung.

    Warum das zählt

    Unerwarteter Ton redet dem Screenreader dazwischen und macht die Seite unlesbar, bis er sich abstellen lässt. Die Pausetaste zu finden, ohne den Bildschirm zu sehen, während es läuft, ist genau so schwer, wie es klingt.

    So beheben Sie es

    Entfernen Sie autoplay oder ergänzen Sie muted. Brauchen Sie das automatische Abspielen, halten Sie es unter drei Sekunden oder setzen Sie ganz oben auf der Seite eine Schaltfläche zum Stoppen.

    <video src="/hero.mp4" autoplay loop></video>

    <video src="/hero.mp4" autoplay loop muted playsinline></video>

    Sehen, wo es auftritt

    • body.template-index > div.hero:nth-of-type(2) > video

      <video src="/cdn/shop/videos/hero.mp4" autoplay loop></video>

14. Sprache des Dokuments fehlt

    Schwerwiegend

    1 Mal auf dieser Seite · WCAG 3.1.1 (A) · EN 301 549 9.3.1.1

    Das <html>-Element gibt keine gültige Sprache an.

    Warum das zählt

    Screenreader wählen Stimme und Aussprache anhand dieses Attributs. Ohne es wird ein deutscher Shop womöglich mit englischer Aussprache vorgelesen, und nichts davon ist zu verstehen.

    Eine Korrektur von dreißig Sekunden, die jede Seite der Website betrifft. Fangen Sie hier an.

    So beheben Sie es

    Ergänzen Sie lang="de" (oder Ihre Sprache) am <html>-Element. Ein Attribut, eine Zeile, und die ganze Seite ist behoben.

    In Ihrem System · Shopify

    In layout/theme.liquid sollte die erste Zeile <html lang="{{ request.locale.iso_code }}"> lauten.

    <html>

    <html lang="de">

15. Die Seite verhindert das Vergrößern

    Schwerwiegend

    1 Mal auf dieser Seite · WCAG 1.4.4 (AA) · EN 301 549 9.1.4.4

    Das viewport-Tag blockiert den Zoom (width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no).

    Warum das zählt

    Sehr viele Menschen zoomen auf dem Telefon hinein, um zu lesen. Das aus Gestaltungsgründen zu unterbinden schneidet sie schlicht vom Inhalt ab. Die Norm verlangt eine Vergrößerung auf mindestens 200 %.

    So beheben Sie es

    Entfernen Sie user-scalable=no und jedes maximum-scale unter 2.

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    Sehen, wo es auftritt

    • head > meta:nth-of-type(2)

      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

16. Links mit nichtssagendem Text

    Mittel

    2 Mal auf dieser Seite · WCAG 2.4.4 (A) · EN 301 549 9.2.4.4

    Einige Links lauten „weiterlesen“, „hier klicken“, „mehr erfahren“ oder ähnlich.

    Warum das zählt

    Aus dem Zusammenhang gerissen sagt dieser Text nichts. In der Linkliste, die ein Screenreader erzeugt, wird eine Kategorieseite zu zwanzig identischen Einträgen, die alle „weiterlesen“ heißen.

    Der Linktext ist eines der Signale, über die Google die Zielseite versteht. „Weiterlesen“ sagt auch Google nichts.

    So beheben Sie es

    Schreiben Sie das Ziel in den Link selbst: „T-Shirt aus Bio-Baumwolle ansehen“. Verlangt die Gestaltung, dass „Weiterlesen“ sichtbar bleibt, ergänzen Sie ein vollständiges aria-label.

    <h3>T-Shirt sandfarben</h3>
    <a href="/p/1">Weiterlesen</a>

    <h3>T-Shirt sandfarben</h3>
    <a href="/p/1" aria-label="T-Shirt sandfarben ansehen">Weiterlesen</a>
    
    <!-- Besser noch -->
    <a href="/p/1">T-Shirt sandfarben ansehen</a>

    Sehen, wo es auftritt

    • body.template-index > div.grid:nth-of-type(3) > div.card:nth-of-type(1) > a:nth-of-type(2)

      <a href="/products/camiseta-arena">Leer más</a>

    • body.template-index > div.grid:nth-of-type(3) > div.card:nth-of-type(2) > a:nth-of-type(2)

      <a href="/products/sudadera-gris">Leer más</a>

17. Überschriftenebenen übersprungen

    Mittel

    1 Mal auf dieser Seite · WCAG 1.3.1 (A) · EN 301 549 9.1.3.1

    Die Seite springt von einer Überschriftenebene zur nächsten und lässt die dazwischenliegenden aus (h1 auf h4).

    Warum das zählt

    Überschriften sind das Inhaltsverzeichnis, an dem entlang eine Seite navigiert wird. Werden Ebenen übersprungen, bildet diese Gliederung die tatsächliche Hierarchie nicht mehr ab, und die Person kann nicht erkennen, ob der neue Abschnitt zum vorherigen gehört oder neu beginnt.

    So beheben Sie es

    Verwenden Sie die Ebenen der Reihe nach. Haben Sie eine Ebene wegen der Schriftgröße übersprungen, setzen Sie die richtige Ebene und regeln die Größe im CSS.

    <h1>Shop</h1>
    <h4>Angebote</h4>

    <h1>Shop</h1>
    <h2 class="ueberschrift-klein">Angebote</h2>

    Sehen, wo es auftritt

    • body.template-index > h4

      <h4>Más vendidos</h4>

18. Nicht existierende ARIA-Rolle

    Mittel

    1 Mal auf dieser Seite · WCAG 4.1.2 (A) · EN 301 549 9.4.1.2

    Ein Element hat role="buton", was keine gültige Rolle ist.

    Warum das zählt

    Eine falsch geschriebene Rolle bewirkt nichts: Der Browser ignoriert sie, und das Element wird mit seiner ursprünglichen Semantik ausgegeben — was fast immer „gar keine Bedeutung“ heißt. Die Entwicklerin hält es für behoben, und es ist es nicht.

    So beheben Sie es

    Korrigieren Sie den Rollennamen — oder lassen Sie ihn weg und verwenden Sie das native HTML-Element, das die richtige Rolle bereits mitbringt.

    <span role="buton">Kaufen</span>

    <button type="button">Kaufen</button>

    Sehen, wo es auftritt

    • body.template-index > span

      <span role="buton" aria-labl="ayuda" tabindex="4">Ayuda</span>

19. Nicht existierendes ARIA-Attribut

    Mittel

    1 Mal auf dieser Seite · WCAG 4.1.2 (A) · EN 301 549 9.4.1.2

    Ein Element hat das Attribut aria-labl, das nicht Teil der Spezifikation ist.

    Warum das zählt

    Genau wie bei einer erfundenen Rolle: Der Browser verwirft es stillschweigend. Meist sind es Tippfehler (aria-labl, aria-describe), die das Element ohne den Namen oder die Beschreibung zurücklassen, die es haben sollte.

    So beheben Sie es

    Gleichen Sie die Schreibweise des Attributs mit der WAI-ARIA-Spezifikation ab.

    Sehen, wo es auftritt

    • body.template-index > span

      <span role="buton" aria-labl="ayuda" tabindex="4">Ayuda</span>

20. Positiver tabindex-Wert

    Mittel

    1 Mal auf dieser Seite · WCAG 2.4.3 (A) · EN 301 549 9.2.4.3

    Einige Elemente verwenden tabindex="4".

    Warum das zählt

    Ein positiver tabindex reißt das Element aus seinem natürlichen Platz in der Tabulatorreihenfolge und stellt es vor alles andere. Der Fokus springt dann in einer Reihenfolge über die Seite, die nicht dem entspricht, was zu sehen ist — und mit wachsender Seite wird das unwartbar.

    So beheben Sie es

    Verwenden Sie tabindex="0", um ein Element fokussierbar zu machen, oder tabindex="-1", um es programmgesteuert zu fokussieren. Stimmt die Reihenfolge nicht, ändern Sie die Reihenfolge im HTML.

    Sehen, wo es auftritt

    • body.template-index > span

      <span role="buton" aria-labl="ayuda" tabindex="4">Ayuda</span>

21. Bereich für den Hauptinhalt fehlt

    Mittel

    1 Mal auf dieser Seite · WCAG 1.3.1 (A) · EN 301 549 9.1.3.1

    Die Seite hat kein <main> — oder mehr als eines.

    Warum das zählt

    Die Abkürzung „Zum Hauptinhalt springen“ ist der schnellste Weg an der Navigation vorbei, die sich auf jeder Seite identisch wiederholt. Ohne <main> gibt es diese Abkürzung nicht, und das gesamte Menü muss jedes Mal durchgetabbt werden.

    So beheben Sie es

    Fassen Sie den eigentlichen Inhalt der Seite — nicht Kopfbereich, Navigation oder Fußzeile — in einem einzigen <main> zusammen.

22. Doppelte ids

    Gering

    1 Mal auf dieser Seite · WCAG 4.1.1 (A) · EN 301 549 9.4.1.1

    Die id „col“ kommt 3-mal vor.

    Warum das zählt

    Verweise für die Barrierefreiheit (label for, aria-labelledby, aria-describedby) zeigen auf eine id und lösen immer zum ersten Treffer auf. Bei doppelten ids kann so die Beschriftung des einen Feldes am Ende ein anderes beschreiben.

    So beheben Sie es

    Machen Sie jede id eindeutig. Stammt sie aus einer wiederholten Komponente, hängen Sie den Index oder die Artikelnummer an.

    Sehen, wo es auftritt

    • #col

      <div id="col"><a href="/pages/privacidad">Política de privacidad</a></div>

Manuell zu prüfen

• ARIA-Verweis auf eine id, die es nicht gibt

  Das Attribut aria-labelledby verweist auf die ids titulo-inexistente, die auf der Seite nicht vorhanden sind.

  Prüfen Sie, ob die id existiert und exakt übereinstimmt, Groß- und Kleinschreibung eingeschlossen. Ist das Ziel weg, ersetzen Sie den Verweis durch ein aria-label.

• Felder für persönliche Daten ohne autocomplete

  Einige Felder, die gängige persönliche Daten abfragen (E-Mail, Telefon, Anschrift), haben kein autocomplete-Attribut.

  Ergänzen Sie das passende Standardtoken: in diesem Fall autocomplete="email".

• Pflichtfeld nur optisch gekennzeichnet

  Die Beschriftung weist das Feld als Pflichtfeld aus (mit Sternchen oder in Worten), das Feld selbst erklärt aber weder required noch aria-required.

  Ergänzen Sie am Feld das Attribut required. Behalten Sie die optische Kennzeichnung bei: beides, nicht das eine statt des anderen.

• Bereichsauszeichnungen fehlen

  Die Seite zeichnet einige ihrer Hauptbereiche nicht aus: navigation, banner, contentinfo.

  Verwenden Sie die passenden semantischen Elemente — <header>, <nav>, <main> und <footer> — statt <div class="header">.

• Extrem kleiner Text

  Es gibt Text unter 10 px (9px).

  Gehen Sie auf mindestens 12 px hoch, im Hauptinhalt auf 16 px. Verwenden Sie relative Einheiten (rem), damit die Browsereinstellung respektiert wird.

Was bereits stimmt

• Bilder ohne Alternativtext
• Redundanter Alternativtext
• Bedeutungstragendes SVG-Symbol ohne Namen
• Links, die die vollständige Adresse anzeigen
• Hauptüberschrift fehlt oder ist mehrfach vorhanden
• Die Seite hat keine Überschriften
• Leere Überschriften
• Element mit interaktiver Rolle, aber ohne Namen
• Seitentitel fehlt oder ist leer