Eine vollständige Übersicht aller Barrierefreiheits-Regeln basierend auf den Web Content Accessibility Guidelines (WCAG). Verstehen Sie, welche Standards Ihre Website erfüllen muss.
Die Web Content Accessibility Guidelines 2.0 sind die grundlegenden Standards für digitale Barrierefreiheit, veröffentlicht im Jahr 2008.
area-altStellen Sie sicher, dass <area>-Elemente von Imagemaps alternativen Text haben
aria-allowed-attrStellen Sie sicher, dass die Rolle eines Elements seine ARIA-Attribute unterstützt
aria-braille-equivalentStellen Sie sicher, dass aria-braillelabel und aria-brailleroledescription ein nicht-Braille-Äquivalent haben
aria-command-nameStellen Sie sicher, dass jeder ARIA-Button, -Link und -Menüpunkt einen zugänglichen Namen hat
aria-conditional-attrStellen Sie sicher, dass ARIA-Attribute wie in der Spezifikation der Rolle des Elements beschrieben verwendet werden
aria-deprecated-roleStellen Sie sicher, dass Elemente keine veralteten Rollen verwenden
aria-hidden-bodyStellen Sie sicher, dass aria-hidden="true" nicht im Dokumentenkörper vorhanden ist.
aria-hidden-focusStellen Sie sicher, dass aria-hidden-Elemente nicht fokussierbar sind und keine fokussierbaren Elemente enthalten
aria-input-field-nameStellen Sie sicher, dass jedes ARIA-Eingabefeld einen zugänglichen Namen hat
aria-meter-nameStellen Sie sicher, dass jeder ARIA-Meter-Knoten einen zugänglichen Namen hat
aria-progressbar-nameStellen Sie sicher, dass jeder ARIA-Fortschrittsbalken-Knoten einen zugänglichen Namen hat
aria-prohibited-attrStellen Sie sicher, dass ARIA-Attribute für die Rolle eines Elements nicht verboten sind
aria-required-attrStellen Sie sicher, dass Elemente mit ARIA-Rollen alle erforderlichen ARIA-Attribute haben
aria-required-childrenStellen Sie sicher, dass Elemente mit einer ARIA-Rolle, die untergeordnete Rollen erfordern, diese enthalten
aria-required-parentStellen Sie sicher, dass Elemente mit einer ARIA-Rolle, die übergeordnete Rollen erfordern, von diesen enthalten sind
aria-rolesStellen Sie sicher, dass alle Elemente mit einem role-Attribut einen gültigen Wert verwenden
aria-toggle-field-nameStellen Sie sicher, dass jedes ARIA-Umschaltfeld einen zugänglichen Namen hat
aria-tooltip-nameStellen Sie sicher, dass jeder ARIA-Tooltip-Knoten einen zugänglichen Namen hat
aria-valid-attr-valueStellen Sie sicher, dass alle ARIA-Attribute gültige Werte haben
aria-valid-attrStellen Sie sicher, dass Attribute, die mit aria- beginnen, gültige ARIA-Attribute sind
blinkStellen Sie sicher, dass keine <blink>-Elemente verwendet werden
button-nameStellen Sie sicher, dass Schaltflächen einen erkennbaren Text haben
bypassStellen Sie sicher, dass jede Seite mindestens einen Mechanismus für Benutzer hat, um die Navigation zu umgehen und direkt zum Inhalt zu springen
color-contrastStellen Sie sicher, dass der Kontrast zwischen Vordergrund- und Hintergrundfarben die Mindestkontrastverhältnisse von WCAG 2 AA erfüllt
definition-listStellen Sie sicher, dass <dl>-Elemente korrekt strukturiert sind
dlitemStellen Sie sicher, dass <dt>- und <dd>-Elemente in einem <dl> enthalten sind
document-titleStellen Sie sicher, dass jedes HTML-Dokument ein nicht leeres <title>-Element enthält
duplicate-id-ariaStellen Sie sicher, dass jeder im ARIA und in Labels verwendete id-Attributwert eindeutig ist
form-field-multiple-labelsStellen Sie sicher, dass ein Formularfeld nicht mehrere Label-Elemente hat
frame-focusable-contentStellen Sie sicher, dass <frame>- und <iframe>-Elemente mit fokussierbarem Inhalt nicht tabindex=-1 haben
frame-title-uniqueStellen Sie sicher, dass <iframe>- und <frame>-Elemente ein eindeutiges title-Attribut enthalten
frame-titleStellen Sie sicher, dass <iframe>- und <frame>-Elemente einen zugänglichen Namen haben
html-has-langStellen Sie sicher, dass jedes HTML-Dokument ein lang-Attribut hat
html-lang-validStellen Sie sicher, dass das lang-Attribut des <html>-Elements einen gültigen Wert hat
html-xml-lang-mismatchStellen Sie sicher, dass HTML-Elemente mit sowohl gültigen lang- als auch xml:lang-Attributen über die Basissprache der Seite übereinstimmen
image-altStellen Sie sicher, dass <img>-Elemente alternativen Text oder eine Rolle von none oder presentation haben
input-button-nameStellen Sie sicher, dass Eingabeschaltflächen einen erkennbaren Text haben
input-image-altStellen Sie sicher, dass <input type="image">-Elemente alternativen Text haben
labelStellen Sie sicher, dass jedes Formularelement ein Label hat
link-in-text-blockStellen Sie sicher, dass Links vom umgebenden Text auf eine Weise unterschieden werden, die nicht auf Farbe beruht
link-nameStellen Sie sicher, dass Links einen erkennbaren Text haben
listStellen Sie sicher, dass Listen korrekt strukturiert sind
listitemStellen Sie sicher, dass <li>-Elemente semantisch verwendet werden
marqueeStellen Sie sicher, dass keine <marquee>-Elemente verwendet werden
meta-refreshStellen Sie sicher, dass <meta http-equiv="refresh"> nicht für eine verzögerte Aktualisierung verwendet wird
meta-viewportStellen Sie sicher, dass <meta name="viewport"> das Skalieren und Zoomen von Text nicht deaktiviert
nested-interactiveStellen Sie sicher, dass interaktive Steuerelemente nicht verschachtelt sind, da sie nicht immer von Screenreadern angesagt werden oder Fokusprobleme für assistive Technologien verursachen können
no-autoplay-audioStellen Sie sicher, dass <video>- oder <audio>-Elemente Audio nicht länger als 3 Sekunden automatisch abspielen, ohne einen Kontrollmechanismus zum Stoppen oder Stummschalten des Audios
object-altStellen Sie sicher, dass <object>-Elemente alternativen Text haben
role-img-altStellen Sie sicher, dass [role="img"]-Elemente alternativen Text haben
scrollable-region-focusableStellen Sie sicher, dass Elemente mit scrollbarem Inhalt über die Tastatur zugänglich sind
select-nameStellen Sie sicher, dass das select-Element einen zugänglichen Namen hat
server-side-image-mapStellen Sie sicher, dass serverseitige Imagemaps nicht verwendet werden
summary-nameStellen Sie sicher, dass summary-Elemente einen erkennbaren Text haben
svg-img-altStellen Sie sicher, dass <svg>-Elemente mit der Rolle img, graphics-document oder graphics-symbol einen zugänglichen Text haben
td-headers-attrStellen Sie sicher, dass jede Zelle in einer Tabelle, die das headers-Attribut verwendet, nur auf andere Zellen in dieser Tabelle verweist
th-has-data-cellsStellen Sie sicher, dass <th>-Elemente und Elemente mit role="columnheader"/"rowheader" Datenzellen haben, die sie beschreiben
valid-langStellen Sie sicher, dass lang-Attribute gültige Werte haben
video-captionStellen Sie sicher, dass <video>-Elemente Untertitel haben
p-as-headingStellen Sie sicher, dass fett, kursiv und Schriftgröße nicht verwendet werden, um <p>-Elemente als Überschrift zu gestalten
table-fake-captionStellen Sie sicher, dass Tabellen mit einer Beschriftung das <caption>-Element verwenden.
td-has-headerStellen Sie sicher, dass jede nicht leere Datenzelle in einer <table>, die größer als 3 mal 3 ist, eine oder mehrere Tabellenüberschriften hat
aria-roledescriptionStellen Sie sicher, dass aria-roledescription nur für Elemente verwendet wird, die eine implizite oder explizite Rolle haben
audio-captionStellen Sie sicher, dass <audio>-Elemente Untertitel haben
duplicate-id-activeStellen Sie sicher, dass jeder Wert des id-Attributs von aktiven Elementen eindeutig ist
duplicate-idStellen Sie sicher, dass jeder Wert des id-Attributs eindeutig ist
Erweitert WCAG 2.0 um zusätzliche Kriterien für mobile Barrierefreiheit, Sehbehinderungen und kognitive Einschränkungen (2018).
autocomplete-validStellen Sie sicher, dass das autocomplete-Attribut korrekt und für das Formularfeld geeignet ist
avoid-inline-spacingStellen Sie sicher, dass der durch Stilattribute festgelegte Textabstand mit benutzerdefinierten Stylesheets angepasst werden kann
css-orientation-lockStellen Sie sicher, dass der Inhalt nicht auf eine bestimmte Anzeigeausrichtung beschränkt ist und in allen Ausrichtungen bedienbar ist
label-content-name-mismatchStellen Sie sicher, dass Elemente, die durch ihren Inhalt beschriftet sind, ihren sichtbaren Text als Teil ihres zugänglichen Namens haben müssen
Die neueste Version der WCAG-Richtlinien mit zusätzlichen Kriterien für verbesserte Barrierefreiheit (2023).
| Regel-ID | Beschreibung | Auswirkung |
|---|---|---|
target-size | Stellen Sie sicher, dass Touch-Ziele eine ausreichende Größe und einen ausreichenden Abstand haben | Hoch |
Zusätzliche technische Regeln und Kriterien, die über die Basis-WCAG-Versionen hinausgehen.
color-contrast-enhancedStellen Sie sicher, dass der Kontrast zwischen Vordergrund- und Hintergrundfarben die erweiterten Kontrastverhältnisschwellen von WCAG 2 AAA erfüllt
identical-links-same-purposeStellen Sie sicher, dass Links mit demselben zugänglichen Namen einem ähnlichen Zweck dienen
meta-refresh-no-exceptionsStellen Sie sicher, dass <meta http-equiv="refresh"> nicht für eine verzögerte Aktualisierung verwendet wird
Empfohlene Best Practices, die über die Mindestanforderungen hinausgehen und die Benutzerfreundlichkeit weiter verbessern.
accesskeysStellen Sie sicher, dass jeder accesskey-Attributwert eindeutig ist
aria-allowed-roleStellen Sie sicher, dass das role-Attribut einen für das Element geeigneten Wert hat
aria-dialog-nameStellen Sie sicher, dass jeder ARIA-Dialog und -Alarmdialog-Knoten einen zugänglichen Namen hat
aria-textStellen Sie sicher, dass role="text" für Elemente ohne fokussierbare Nachkommen verwendet wird
aria-treeitem-nameStellen Sie sicher, dass jeder ARIA-treeitem-Knoten einen zugänglichen Namen hat
empty-headingStellen Sie sicher, dass Überschriften einen erkennbaren Text haben
empty-table-headerStellen Sie sicher, dass Tabellenüberschriften einen erkennbaren Text haben
frame-testedStellen Sie sicher, dass <iframe>- und <frame>-Elemente das axe-core-Skript enthalten
heading-orderStellen Sie sicher, dass die Reihenfolge der Überschriften semantisch korrekt ist
image-redundant-altStellen Sie sicher, dass der alternative Bildtext nicht als Text wiederholt wird
label-title-onlyStellen Sie sicher, dass jedes Formularelement ein sichtbares Label hat und nicht ausschließlich mit versteckten Labels oder den Attributen title oder aria-describedby beschriftet ist
landmark-banner-is-top-levelStellen Sie sicher, dass der Banner-Landmark auf der obersten Ebene liegt
landmark-complementary-is-top-levelStellen Sie sicher, dass der komplementäre Landmark oder aside auf der obersten Ebene liegt
landmark-contentinfo-is-top-levelStellen Sie sicher, dass der contentinfo-Landmark auf der obersten Ebene liegt
landmark-main-is-top-levelStellen Sie sicher, dass der main-Landmark auf der obersten Ebene liegt
landmark-no-duplicate-bannerStellen Sie sicher, dass das Dokument höchstens einen Banner-Landmark hat
landmark-no-duplicate-contentinfoStellen Sie sicher, dass das Dokument höchstens einen contentinfo-Landmark hat
landmark-no-duplicate-mainStellen Sie sicher, dass das Dokument höchstens einen main-Landmark hat
landmark-one-mainStellen Sie sicher, dass das Dokument einen main-Landmark hat
landmark-uniqueStellen Sie sicher, dass Landmarks eindeutig sind
meta-viewport-largeStellen Sie sicher, dass <meta name="viewport"> erheblich skaliert werden kann
page-has-heading-oneStellen Sie sicher, dass die Seite oder zumindest einer ihrer Frames eine Überschrift der Ebene eins enthält
presentation-role-conflictAls präsentationsbezogen markierte Elemente sollten kein globales ARIA oder tabindex haben, um sicherzustellen, dass alle Screenreader sie ignorieren
regionStellen Sie sicher, dass der gesamte Seiteninhalt von Landmarks umschlossen ist
scope-attr-validStellen Sie sicher, dass das scope-Attribut in Tabellen korrekt verwendet wird
skip-linkStellen Sie sicher, dass alle Skip-Links ein fokussierbares Ziel haben
tabindexStellen Sie sicher, dass die Attributwerte von tabindex nicht größer als 0 sind
table-duplicate-nameStellen Sie sicher, dass das <caption>-Element nicht denselben Text wie das summary-Attribut enthält
focus-order-semanticsStellen Sie sicher, dass Elemente in der Fokusreihenfolge eine für interaktive Inhalte geeignete Rolle haben
hidden-contentBenutzer über versteckte Inhalte informieren.