Barrierefreiheitsregeln, die wir prüfen

Das Niveau, auf das sich EN 301 549, EAA, BFSG und ADA stützen. Jedes dieser Probleme zählt im Bericht.

• Schwerwiegend WCAG 2.4.4 A

  Klickbare Bildbereiche haben keine Beschreibung

  Die Seite verwendet eine Imagemap (ein Bild, das in mehrere klickbare Bereiche aufgeteilt ist), und einige dieser Bereiche haben keinen Text, der sagt, wohin sie führen.

  area-alt

• Mittel WCAG 4.1.2 A

  Barrierefreiheits-Attribute stehen an den falschen Elementen

  Einige Elemente tragen Barrierefreiheits-Attribute, die für ihren Typ nicht erlaubt sind.

  aria-allowed-attr

• Mittel WCAG 4.1.2 A

  Einige Elemente haben eine Braille-Beschriftung, aber keinen normalen Namen

  Einige Elemente tragen eine Beschriftung nur für Braillezeilen (aria-braillelabel oder aria-brailleroledescription), aber nicht die normale Beschriftung oder Beschreibung, die sie ergänzen soll.

  aria-braille-equivalent

• Kritisch WCAG 4.1.2 A

  Selbst gebaute Schaltflächen haben keinen Namen

  Einige Elemente, die als Schaltflächen, Links oder Menüpunkte dienen, wurden selbst gebaut und haben keinen lesbaren Namen.

  aria-command-name

• Mittel WCAG 4.1.2 A

  Barrierefreiheits-Attribute werden in der falschen Situation verwendet

  Einige Elemente verwenden Barrierefreiheits-Attribute, die für ihren Typ nur unter bestimmten Bedingungen erlaubt sind, zum Beispiel aria-checked auf einer echten Checkbox oder Baumtabellen-Attribute auf einer normalen Tabellenzeile.

  aria-conditional-attr

• Gering WCAG 4.1.2 A

  Einige Elemente verwenden veraltete Barrierefreiheits-Rollen

  Einige Elemente verwenden Rollen, die der Barrierefreiheits-Standard WAI-ARIA als veraltet eingestuft hat, zum Beispiel role="directory".

  aria-deprecated-role

• Kritisch WCAG 1.3.1 A

  Die ganze Seite ist für Screenreader ausgeblendet

  Das <body>-Element der Seite hat aria-hidden="true". Damit werden Screenreader angewiesen, den gesamten Inhalt zu ignorieren.

  aria-hidden-body

• Schwerwiegend WCAG 4.1.2 A

  Versteckte Elemente sind per Tastatur weiterhin erreichbar

  Einige Bereiche der Seite sind für Screenreader ausgeblendet, erhalten aber trotzdem den Tastaturfokus.

  aria-hidden-focus

• Kritisch WCAG 4.1.2 A

  Selbst gebaute Eingabefelder haben keine Beschriftung

  Einige selbst gebaute Eingabefelder, etwa ein Suchfeld oder eine Länderauswahl, haben keinen Namen, den assistive Technologien vorlesen können.

  aria-input-field-name

• Mittel WCAG 1.1.1 A

  Einige Füllstandsanzeigen haben keinen Namen

  Einige Elemente, die als Messanzeige (meter) gekennzeichnet sind, etwa für Passwortstärke, Lagerbestand oder Bewertung, haben keinen Text, der sagt, was sie messen.

  aria-meter-name

• Mittel WCAG 1.1.1 A

  Einige Fortschrittsbalken haben keinen Namen

  Einige Elemente, die als Fortschrittsbalken gekennzeichnet sind, haben keinen Text, der sagt, was sie zeigen, zum Beispiel „Noch 20 € bis zum kostenlosen Versand“, Checkout-Schritte oder eine Ladeanzeige.

  aria-progressbar-name

• Mittel WCAG 4.1.2 A

  Einige Beschriftungen stehen dort, wo Screenreader sie ignorieren

  Einige Elemente verwenden Barrierefreiheits-Attribute, die für ihren Typ nicht erlaubt sind, meist aria-label auf einem einfachen <div> oder <span> ohne Rolle.

  aria-prohibited-attr

• Schwerwiegend WCAG 4.1.2 A

  Selbst gebauten Bedienelementen fehlen nötige Angaben

  Einige selbst gebaute Bedienelemente geben eine Rolle an, aber es fehlen Angaben, die diese Rolle braucht, etwa ob ein Ausklappmenü geöffnet ist.

  aria-required-attr

• Schwerwiegend WCAG 1.3.1 A

  Selbst gebaute Menüs oder Listen sind fehlerhaft aufgebaut

  Einige selbst gebaute Komponenten wie Menüs, Tab-Leisten oder Auswahllisten enthalten nicht die Einträge, die sie benötigen.

  aria-required-children

• Mittel WCAG 1.3.1 A

  Selbst gebaute Menüpunkte oder Tabs stehen außerhalb ihrer Gruppe

  Einige selbst gebaute Einträge wie Menüpunkte, Tabs oder Optionen stehen nicht in der Gruppe, zu der sie gehören.

  aria-required-parent

• Schwerwiegend WCAG 4.1.2 A

  Einige Elemente haben eine Rolle, die es nicht gibt

  Einige Elemente haben ein role-Attribut mit einem falsch geschriebenen, erfundenen oder abstrakten Wert. Assistive Technologien erkennen dadurch nicht, worum es sich handelt.

  aria-roles

• Schwerwiegend WCAG 4.1.2 A

  Einige Schalter und Kontrollkästchen haben keinen Namen

  Einige selbst gebaute Umschalter (Kontrollkästchen, Schalter, Optionsfelder oder Menüoptionen mit ARIA-Rollen) haben keine lesbare Beschriftung.

  aria-toggle-field-name

• Mittel WCAG 4.1.2 A

  Einige Tooltips sind leer

  Einige Elemente, die als Tooltip ausgezeichnet sind (role="tooltip"), enthalten keinen lesbaren Text.

  aria-tooltip-name

• Schwerwiegend WCAG 4.1.2 A

  Barrierefreiheits-Attribute sind falsch geschrieben

  Einige Attribute beginnen mit „aria-“, sind aber keine echten ARIA-Attribute, meist wegen eines Tippfehlers.

  aria-valid-attr

• Schwerwiegend WCAG 4.1.2 A

  Barrierefreiheits-Attribute haben falsche Werte

  Einige Barrierefreiheits-Attribute im Code haben unzulässige Werte oder verweisen auf Elemente, die es nicht gibt.

  aria-valid-attr-value

• Mittel WCAG 1.3.5 AA

  Formularfelder werden nicht automatisch ausgefüllt

  Einige Formularfelder verwenden autocomplete-Werte, die ungültig sind oder nicht zum Feld passen. Browser können sie deshalb nicht automatisch ausfüllen.

  autocomplete-valid

• Mittel WCAG 1.4.12 AA

  Textabstände lassen sich nicht anpassen

  Bei einigen Texten sind Zeilen-, Buchstaben- oder Wortabstände per !important im style-Attribut festgelegt. Leser können sie daher nicht mit eigenen Einstellungen ändern.

  avoid-inline-spacing

• Gering WCAG 2.2.2 A

  Die Seite enthält veraltetes Markup für blinkenden Text

  Die Seite enthält das alte <blink>-Element, das Text ein- und ausblinken lassen sollte.

  blink

• Kritisch WCAG 4.1.2 A

  Einige Schaltflächen haben keinen Namen

  Einige Schaltflächen haben keine lesbare Beschriftung, zum Beispiel reine Icon-Buttons für „In den Warenkorb“, Suche oder Menü.

  button-name

• Schwerwiegend WCAG 2.4.1 A

  Es gibt keinen schnellen Sprung zum Hauptinhalt

  Die Seite hat keinen Sprunglink, keine Überschrift und keinen main-Bereich, mit dem Tastatur- und Screenreader-Nutzer Kopfbereich und Menü überspringen können.

  bypass

• Schwerwiegend WCAG 1.4.3 AA

  Text ist wegen zu geringen Kontrasts schwer lesbar

  Einige Texte sind zu hell für ihren Hintergrund, zum Beispiel grauer Text auf Weiß oder weißer Text auf einem blassen Button.

  color-contrast

• Schwerwiegend WCAG 1.3.4 AA

  Die Website funktioniert nur in einer Bildschirmausrichtung

  Die Stile der Website zwingen die Seite ins Hoch- oder Querformat. Hält man Smartphone oder Tablet anders, wird der Inhalt gedreht, abgeschnitten oder ausgeblendet.

  css-orientation-lock

• Gering WCAG 1.3.1 A

  Eine Liste aus Bezeichnungen und Werten ist falsch aufgebaut

  Eine Beschreibungsliste (<dl>), oft für Produktdaten oder gewählte Optionen genutzt, enthält Elemente an der falschen Stelle oder in falscher Reihenfolge.

  definition-list

• Gering WCAG 1.3.1 A

  Eine Bezeichnung oder ein Wert steht außerhalb ihrer Liste

  Ein <dt>- oder <dd>-Element (eine Bezeichnung oder ein Wert, oft in Produktdaten) steht nicht in einer Beschreibungsliste <dl>.

  dlitem

• Mittel WCAG 2.4.2 A

  Die Seite hat keinen Titel

  Die Seite hat in ihrem Code keinen Titel. Browser-Tabs, Lesezeichen und Screenreader zeigen deshalb nichts Hilfreiches an.

  document-title

• Schwerwiegend WCAG 4.1.2 A

  Manche Beschriftungen verweisen auf das falsche Element

  Mehrere Elemente haben dieselbe id, und diese id wird genutzt, um eine Beschriftung, Beschreibung oder Fehlermeldung mit einem Feld oder Bedienelement zu verknüpfen.

  duplicate-id-aria

• Mittel WCAG 3.3.2 A

  Manche Formularfelder haben mehrere Beschriftungen

  Ein Formularfeld, etwa für E-Mail, Menge oder Adresse, ist mit zwei oder mehr <label>-Elementen verknüpft.

  form-field-multiple-labels

• Schwerwiegend WCAG 2.1.1 A

  Tastaturnutzer erreichen eingebettete Inhalte nicht

  Ein eingebetteter Rahmen (iframe) enthält Links, Schaltflächen oder Formularfelder, ist aber selbst auf tabindex="-1" gesetzt und damit aus der Tastaturreihenfolge entfernt.

  frame-focusable-content

• Mittel WCAG 4.1.2 A

  Eingebettete Inhalte haben keinen Namen

  Ein eingebetteter Rahmen (iframe), etwa ein Video, eine Karte, ein Chat oder ein Zahlungs-Widget, hat keinen beschreibenden Titel.

  frame-title

• Mittel WCAG 4.1.2 A

  Mehrere eingebettete Rahmen haben denselben Namen

  Zwei oder mehr eingebettete Rahmen (iframes) auf der Seite haben denselben title, obwohl sie Unterschiedliches zeigen – etwa mehrere Produktvideos, die alle „YouTube video player“ heißen.

  frame-title-unique

• Schwerwiegend WCAG 3.1.1 A

  Die Seite gibt ihre Sprache nicht an

  Die Seite gibt ihre Sprache nicht an. Assistive Technologien müssen deshalb raten, wie der Text auszusprechen ist.

  html-has-lang

• Schwerwiegend WCAG 3.1.1 A

  Die Spracheinstellung der Seite ist fehlerhaft

  Die Seite gibt einen Sprachcode an, den es nicht gibt, zum Beispiel wegen eines Tippfehlers oder eines erfundenen Werts.

  html-lang-valid

• Mittel WCAG 3.1.1 A

  Die Seite gibt zwei verschiedene Sprachen an

  Das <html>-Tag der Seite hat sowohl ein lang- als auch ein xml:lang-Attribut, und beide nennen unterschiedliche Sprachen, etwa lang="de" und xml:lang="en".

  html-xml-lang-mismatch

• Schwerwiegend WCAG 1.1.1 A

  Bilder haben keine Textbeschreibung

  Einige Bilder haben keinen Alternativtext. Wer sie nicht sehen kann, erfährt nicht, was sie zeigen.

  image-alt

• Kritisch WCAG 4.1.2 A

  Manche Formular-Schaltflächen haben keinen Namen

  Manche Schaltflächen, die mit <input type="button">, "submit" oder "reset" erstellt sind, haben keinen lesbaren Text – etwa eine Such- oder Newsletter-Schaltfläche, die nur ein Symbol oder einen leeren value zeigt.

  input-button-name

• Kritisch WCAG 1.1.1 A

  Eine Bild-Schaltfläche hat keine Textbeschreibung

  Eine Schaltfläche, die aus einem Bild besteht, hat keine Textalternative. Es ist daher unklar, was sie tut.

  input-image-alt

• Kritisch WCAG 4.1.2 A

  Formularfelder haben keine Beschriftung

  Einige Formularfelder haben keine Beschriftung, die assistive Technologien vorlesen können. Es ist daher unklar, was eingegeben werden soll.

  label

• Mittel WCAG 2.5.3 A

  Der verborgene Name von Schaltflächen weicht vom sichtbaren Text ab

  Einige Schaltflächen oder Links zeigen auf dem Bildschirm einen Text, haben aber einen anderen verborgenen Namen (aria-label), der die sichtbaren Wörter nicht enthält, etwa eine Schaltfläche „Jetzt kaufen“ mit dem Namen „Absenden“.

  label-content-name-mismatch

• Mittel WCAG 1.4.1 A

  Links im Fließtext sehen aus wie normaler Text

  Einige Links in Absätzen sind nur durch eine andere Farbe erkennbar, ohne Unterstreichung oder sonstige sichtbare Kennzeichnung.

  link-in-text-block

• Schwerwiegend WCAG 2.4.4 A

  Einige Links sagen nicht, wohin sie führen

  Einige Links haben keinen lesbaren Text, oft Icons wie ein Warenkorb, ein Herz oder ein Logo ohne Textbeschriftung.

  link-name

• Gering WCAG 1.3.1 A

  Eine Liste ist fehlerhaft aufgebaut

  Eine Aufzählung oder nummerierte Liste enthält Elemente, die nicht direkt in eine Liste gehören.

  list

• Gering WCAG 1.3.1 A

  Ein Listeneintrag steht außerhalb einer Liste

  Ein Element, das als Listeneintrag ausgezeichnet ist, steht nicht in einer Liste. Seine Struktur geht dadurch verloren.

  listitem

• Mittel WCAG 2.2.2 A

  Manche Texte laufen durch und lassen sich nicht anhalten

  Die Seite verwendet das veraltete <marquee>-Element, meist ein Laufband wie „Versandkostenfrei ab 50 €“ oder eine Sale-Ankündigung.

  marquee

• Schwerwiegend WCAG 2.2.1 A

  Die Seite lädt sich selbst neu oder leitet weiter

  Die Seite nutzt <meta http-equiv="refresh"> mit Verzögerung: Nach einigen Sekunden oder Minuten lädt sie sich neu oder springt zu einer anderen Adresse, ohne dass die Kundin oder der Kunde das ausgelöst hat.

  meta-refresh

• Schwerwiegend WCAG 1.4.4 AA

  Besucher können die Seite auf dem Smartphone nicht vergrößern

  Die Seite weist mobile Browser an, das Vergrößern mit zwei Fingern zu sperren oder einzuschränken.

  meta-viewport

• Schwerwiegend WCAG 4.1.2 A

  Klickbare Elemente sind ineinander verschachtelt

  Einige klickbare Elemente liegen in anderen klickbaren Elementen, zum Beispiel ein Wunschlisten-Button in einer klickbaren Produktkarte.

  nested-interactive

• Mittel WCAG 1.4.2 A

  Videos oder Töne starten von selbst mit Ton

  Ein Video- oder Audio-Element startet von selbst mit Ton, zum Beispiel ein Video im Startbereich, ein Produktvideo oder Hintergrundmusik, und lässt sich womöglich nicht einfach stoppen.

  no-autoplay-audio

• Mittel WCAG 1.1.1 A

  Eingebettete Dateien oder Medien haben keine Textbeschreibung

  Inhalte, die mit einem <object>-Tag eingebettet sind, zum Beispiel eine Größentabelle als PDF, ein Katalog, ein interaktiver Viewer oder ältere Medien, haben keinen Text, der sagt, worum es sich handelt.

  object-alt

• Mittel WCAG 1.3.1 A

  Einige Überschriften sind nur fetter oder großer Text

  Einige Absätze sehen wie Überschriften aus, weil sie fett, kursiv oder größer sind, im Code sind sie aber gewöhnlicher Text und keine echten Überschriften.

  p-as-heading

• Mittel WCAG 1.1.1 A

  Einige Grafiken haben keine Textbeschreibung

  Einige Elemente sind als Bild ausgezeichnet, haben aber keine Textalternative, zum Beispiel Sternebewertungen oder Icon-Grafiken.

  role-img-alt

• Schwerwiegend WCAG 2.1.1 A

  Einige scrollbare Bereiche sind per Tastatur nicht bedienbar

  Einige Boxen auf der Seite lassen sich scrollen, aber Tastaturnutzer können sie nicht ansteuern, um darin zu scrollen.

  scrollable-region-focusable

• Kritisch WCAG 4.1.2 A

  Ein Auswahlmenü hat keine Beschriftung

  Ein Auswahlmenü (Dropdown) hat keine Beschriftung, die assistive Technologien vorlesen können.

  select-name

• Gering WCAG 2.1.1 A

  Ein klickbares Bild funktioniert nur mit der Maus

  Die Seite verwendet eine serverseitige Imagemap: ein verlinktes Bild, bei dem der Server anhand der genauen Klickposition entscheidet, was geöffnet wird, zum Beispiel eine alte Filialkarte oder ein klickbares Katalogbild.

  server-side-image-map

• Schwerwiegend WCAG 4.1.2 A

  Aufklappbare Bereiche haben keinen Namen

  Die anklickbare Überschrift eines aufklappbaren Bereichs (ein <summary>-Element) hat keinen lesbaren Text, zum Beispiel ein Akkordeon mit Produktdetails, eine Filtergruppe, ein FAQ-Eintrag oder ein Menü, das über ein Symbol geöffnet wird.

  summary-name

• Mittel WCAG 1.1.1 A

  Einige Vektorgrafiken haben keine Textbeschreibung

  Einige SVG-Grafiken wie Logos, Icons oder Badges sind als Bild ausgezeichnet, haben aber keine Textalternative.

  svg-img-alt

• Gering WCAG 1.3.1 A

  Der Titel einer Tabelle steht in einer Tabellenzelle

  Eine Datentabelle, etwa eine Größentabelle oder Preisliste, hat ihren Titel in einer verbundenen ersten Zeile statt in einer richtigen Tabellenbeschriftung.

  table-fake-caption

• Mittel WCAG 2.5.8 AA

  Buttons und Links sind zu klein zum bequemen Antippen

  Einige Buttons oder Links sind kleiner als 24 × 24 Pixel und liegen zu dicht an benachbarten Elementen.

  target-size

• Mittel WCAG 1.3.1 A

  Große Tabellen haben Zellen ohne Überschriften

  Eine größere Datentabelle (mehr als 3 × 3 Zellen), etwa eine Größentabelle, technische Daten oder Versandkosten, hat keine Überschriftenzellen, sodass die Werte nicht mit ihrer Bedeutung verknüpft sind.

  td-has-header

• Mittel WCAG 1.3.1 A

  Tabellenzellen verweisen auf falsche Überschriften

  Eine Tabelle, zum Beispiel eine Größentabelle, eine Tabelle mit technischen Daten oder Versandkosten, verknüpft ihre Zellen über das Attribut headers mit den Überschriften, doch einige Verweise zeigen nicht auf Überschriftenzellen derselben Tabelle.

  td-headers-attr

• Mittel WCAG 1.3.1 A

  Tabellenüberschriften beschreiben keine Daten

  Eine Tabelle enthält Überschriftenzellen (<th>), die mit keinen Datenzellen verbunden sind, zum Beispiel eine leere Kopfzeile in einer Größentabelle oder eine Tabelle, die <th> nur für Fettschrift verwendet.

  th-has-data-cells

• Mittel WCAG 3.1.2 AA

  Textteile haben einen falschen Sprachcode

  Ein Teil der Seite, zum Beispiel ein Sprachumschalter, ein Zitat oder ein Textblock in einer anderen Sprache, gibt einen Sprachcode an, den es nicht gibt, etwa „ua“ statt „uk“ oder einen Tippfehler.

  valid-lang

• Schwerwiegend WCAG 1.2.2 A

  Videos haben keine Untertitel

  Ein Video auf der Seite, zum Beispiel eine Produktvorführung, ein Markenvideo oder eine kurze Anleitung, hat keine Untertitelspur.

  video-caption

Die höchste WCAG-Stufe. Von den Gesetzen nicht verlangt; im Bericht als Empfehlungen angezeigt.

• Gering WCAG 1.4.6 AAA

  Text erreicht nicht den erhöhten Kontrast (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.

  color-contrast-enhanced

• Gering WCAG 2.4.9 AAA

  Links mit gleichem Text führen zu verschiedenen Zielen

  Mehrere Links auf der Seite haben denselben Wortlaut, etwa „Mehr erfahren“ oder „Jetzt kaufen“, führen aber zu verschiedenen Seiten. Das ist eine Empfehlung der WCAG-Stufe AAA und geht über die Stufe AA hinaus, auf die sich das Gesetz stützt.

  identical-links-same-purpose

• Gering WCAG 2.2.4 AAA

  Die Seite lädt sich nach einer Wartezeit selbst neu, auch nach langer

  Die Seite verwendet <meta http-equiv="refresh">, um sich nach einer Wartezeit neu zu laden oder zu einer anderen Adresse zu springen. Jede zeitgesteuerte Aktualisierung zu vermeiden, auch mit Verzögerungen von vielen Stunden, ist eine Empfehlung der WCAG-Stufe AAA und geht über die Stufe AA hinaus, auf die sich das Gesetz stützt.

  meta-refresh-no-exceptions

Keine WCAG-Anforderungen, aber sie erleichtern die Nutzung mit Screenreader oder Tastatur. Werden als Empfehlungen angezeigt.

• Gering

  Mehrere Elemente nutzen dasselbe Tastaturkürzel

  Die Seite legt mit dem Attribut accesskey Tastaturkürzel fest, und zwei oder mehr Elemente teilen sich dieselbe Taste. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.

  accesskeys

• Gering

  Ein Element hat eine Rolle, die nicht zu ihm passt

  Ein HTML-Element hat ein role-Attribut, das für dieses Element nicht erlaubt ist, zum Beispiel ein <button>, der als Überschrift markiert ist, oder ein <nav>-Menü, das als Button markiert ist. Das ist eine empfohlene Praxis und für sich keine Anforderung der WCAG-Stufe AA, deutet aber oft auf weitere Probleme hin.

  aria-allowed-role

• Mittel

  Ein Pop-up-Fenster hat keinen Namen

  Ein Dialog wie ein seitlicher Warenkorb, ein Cookie-Banner, ein Newsletter-Pop-up oder eine Schnellansicht ist mit role="dialog" oder role="alertdialog" markiert, hat aber keinen zugänglichen Namen. Das ist eine empfohlene Praxis und für sich keine Anforderung der WCAG-Stufe AA.

  aria-dialog-name

• Mittel

  Ein Textblock verbirgt Links oder Buttons in seinem Inneren

  Ein Element mit role="text" enthält einen Link, einen Button oder ein anderes fokussierbares Element. role="text" ist eine nicht standardisierte Rolle, die manche Screenreader anweist, den gesamten Inhalt als reinen Text vorzulesen. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.

  aria-text

• Mittel

  Einträge in einem Baummenü haben keinen Namen

  Einige Einträge in einem baumartigen Menü, etwa einem aufklappbaren Kategoriebaum, haben keinen Text, den assistive Technologien vorlesen können. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.

  aria-treeitem-name

• Gering

  Eine Überschrift auf der Seite ist leer

  Die Seite enthält eine Überschrift ohne lesbaren Text, oft ein Rest eines leeren Abschnittstitels, eines Theme-Blocks oder einer Überschrift, die nur aus einem Symbol besteht. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.

  empty-heading

• Gering

  Eine Kopfzelle der Tabelle ist leer

  Eine Tabelle hat eine Kopfzelle ohne Text, zum Beispiel die linke obere Ecke einer Größentabelle oder eine Spalte mit Aktions-Buttons. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.

  empty-table-header

• Gering

  Ein per Tastatur erreichbares Element sagt nicht, was es ist

  Ein Element, das mit der Tab-Taste erreichbar ist, etwa ein klickbares div oder span, hat keine Rolle, die assistiven Technologien mitteilt, dass es ein Button, Link oder anderes Bedienelement ist. axe kennzeichnet diese Prüfung als experimentell, die Ergebnisse müssen daher manuell geprüft werden. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.

  focus-order-semantics

• Mittel

  Überschriftenebenen überspringen eine Stufe

  Die Überschriften auf der Seite springen Ebenen über, zum Beispiel von <h2> direkt zu <h4>, sodass die Gliederung der Seite Lücken hat. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.

  heading-order

• Gering

  Die Bildbeschreibung wiederholt den Text daneben

  Der Alternativtext eines Bildes ist identisch mit dem sichtbaren Text daneben, zum Beispiel ein Produktfoto mit dem Alternativtext „Blaues Leinenhemd“ in einem Link, der ebenfalls „Blaues Leinenhemd“ lautet. Das ist eine empfohlene Praxis, keine Anforderung der WCAG-Stufe AA.

  image-redundant-alt

• Schwerwiegend

  Formularfelder haben keine sichtbare Beschriftung

  Einige Formularfelder werden nur über einen Tooltip (title-Attribut), eine versteckte Beschreibung oder ein verstecktes Label benannt, sodass auf dem Bildschirm keine Beschriftung erscheint. Dies ist eine empfohlene Praxis, die über das Niveau WCAG 2.2 AA hinausgeht, auf das sich die Barrierefreiheitsgesetze stützen.

  label-title-only

• Gering

  Der Seitenkopf liegt innerhalb eines anderen Seitenbereichs

  Der Kopfbereich (die Landmark „banner“ mit Logo, Suche und Warenkorb) ist in einer anderen Landmark verschachtelt, etwa im Hauptinhalt oder in einer Navigation, statt eigenständig oben auf der Seite zu stehen. Dies ist eine empfohlene Praxis, die über das Niveau WCAG 2.2 AA hinausgeht, auf das sich die Barrierefreiheitsgesetze stützen.

  landmark-banner-is-top-level

• Gering

  Eine Seitenleiste liegt innerhalb eines anderen Seitenbereichs

  Ein <aside> oder ein ergänzender Bereich („complementary“), etwa eine Filterleiste, ähnliche Produkte oder eine Werbebox, ist in einer anderen Landmark verschachtelt, statt eigenständig neben dem Hauptinhalt zu stehen. Dies ist eine empfohlene Praxis, die über das Niveau WCAG 2.2 AA hinausgeht, auf das sich die Barrierefreiheitsgesetze stützen.

  landmark-complementary-is-top-level

• Gering

  Der Fußbereich liegt innerhalb eines anderen Seitenbereichs

  Der Fußbereich (die Landmark „contentinfo“ mit Kontakt, rechtlichen Links und Zahlungsinformationen) ist in einer anderen Landmark verschachtelt, etwa im Hauptinhalt, statt eigenständig am Ende der Seite zu stehen. Dies ist eine empfohlene Praxis, die über das Niveau WCAG 2.2 AA hinausgeht, auf das sich die Barrierefreiheitsgesetze stützen.

  landmark-contentinfo-is-top-level

• Mittel

  Der Hauptinhalt liegt innerhalb eines anderen Seitenbereichs

  Das Element <main> oder der Bereich mit role="main", der den Beginn des eigentlichen Seiteninhalts markiert, ist in einer anderen Landmark verschachtelt, etwa im Kopfbereich, in einer Navigation oder einer Seitenleiste. Dies ist eine empfohlene Praxis, die über das Niveau WCAG 2.2 AA hinausgeht, auf das sich die Barrierefreiheitsgesetze stützen.

  landmark-main-is-top-level

• Mittel

  Die Seite hat mehr als einen Seitenkopf

  Die Seite enthält zwei oder mehr Kopfbereiche („banner“), zum Beispiel den normalen Header plus eine separate Sticky- oder Mobil-Kopie oder einen als banner ausgezeichneten Aktionsstreifen. Dies ist eine empfohlene Praxis, die über das Niveau WCAG 2.2 AA hinausgeht, auf das sich die Barrierefreiheitsgesetze stützen.

  landmark-no-duplicate-banner

• Gering

  Die Seite hat mehr als einen Haupt-Footer

  Die Seite kennzeichnet mehrere Bereiche als Footer der Website, zum Beispiel den Shop-Footer und einen zweiten Footer in einem Pop-up oder Widget. Dies ist eine empfohlene Praxis, die über das WCAG-2.2-AA-Niveau hinausgeht, auf das sich das Gesetz stützt.

  landmark-no-duplicate-contentinfo

• Mittel

  Die Seite hat mehr als einen Hauptinhaltsbereich

  Zwei oder mehr Teile der Seite sind als Hauptinhalt gekennzeichnet. Es sollte nur einen geben. Dies ist eine empfohlene Praxis, die über das WCAG-2.2-AA-Niveau hinausgeht, auf das sich das Gesetz stützt.

  landmark-no-duplicate-main

• Mittel

  Auf der Seite ist kein Hauptinhalt gekennzeichnet

  Kein Teil der Seite ist als Hauptinhalt gekennzeichnet, daher können Hilfstechnologien nicht erkennen, wo das Wesentliche beginnt. Dies ist eine empfohlene Praxis, die über das WCAG-2.2-AA-Niveau hinausgeht, auf das sich das Gesetz stützt.

  landmark-one-main

• Gering

  Zwei Seitenbereiche klingen für Screenreader gleich

  Die Seite hat mehrere Bereiche desselben Typs, etwa zwei Menüs oder zwei Seitenleisten, ohne eine Beschriftung, die sie unterscheidet. Dies ist eine empfohlene Praxis, die über das WCAG-2.2-AA-Niveau hinausgeht, auf das sich das Gesetz stützt.

  landmark-unique

• Gering

  Zoom auf Mobilgeräten ist stark begrenzt

  Die Seite erlaubt das Vergrößern auf dem Smartphone, stoppt Besucher aber, bevor sie auf das Fünffache vergrößern können. Dies ist eine empfohlene Praxis, die über das WCAG-2.2-AA-Niveau hinausgeht, auf das sich das Gesetz stützt.

  meta-viewport-large

• Mittel

  Die Seite hat keine Hauptüberschrift

  Die Seite hat keine Überschrift der obersten Ebene (H1), die ihr Thema benennt, etwa den Produkt- oder Kategorienamen. Dies ist eine empfohlene Praxis, die über das WCAG-2.2-AA-Niveau hinausgeht, auf das sich das Gesetz stützt.

  page-has-heading-one

• Gering

  Ein dekoratives Element wird trotzdem vom Screenreader angesagt

  Ein als dekorativ markiertes Element (role="presentation" oder role="none") hat zusätzlich ARIA-Attribute oder kann den Tastaturfokus erhalten. Deshalb ignorieren manche Screenreader es und andere nicht. Dies ist eine empfohlene Praxis über das Niveau WCAG 2.2 AA hinaus.

  presentation-role-conflict

• Gering

  Einige Inhalte liegen außerhalb der Hauptbereiche der Seite

  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.

  region

• Gering

  Tabellenüberschriften verwenden das scope-Attribut falsch

  Eine Tabelle verwendet das scope-Attribut falsch, etwa auf einer normalen Datenzelle oder mit einem anderen Wert als row, col, rowgroup oder colgroup. Dies ist eine empfohlene Praxis über das Niveau WCAG 2.2 AA hinaus.

  scope-attr-valid

• Mittel

  Der Link „Zum Inhalt springen“ funktioniert nicht

  Die Seite hat einen Sprunglink, aber das Ziel, auf das er zeigt, existiert nicht oder kann keinen Fokus erhalten. Dies ist eine empfohlene Praxis über das Niveau WCAG 2.2 AA hinaus.

  skip-link

• Schwerwiegend

  Die Tastaturreihenfolge wird in eine unerwartete Abfolge gezwungen

  Einige Elemente haben einen tabindex-Wert größer als 0, wodurch sie vor allen anderen fokussiert werden, wenn man sich mit der Tab-Taste durch die Seite bewegt. Dies ist eine empfohlene Praxis über das Niveau WCAG 2.2 AA hinaus.

  tabindex

• Gering

  Beschriftung und Zusammenfassung einer Tabelle wiederholen denselben Text

  Eine Tabelle hat denselben Text in ihrem <caption> und im summary-Attribut, sodass Screenreader ihn womöglich zweimal vorlesen. Dies ist eine empfohlene Praxis über das Niveau WCAG 2.2 AA hinaus.

  table-duplicate-name