Barrierefreiheitsregeln, erklärt

Die 70 automatischen Prüfungen, die Rampsight auf jeder Seite ausführt — jede davon dem WCAG-2.2-Erfolgskriterium zugeordnet, zu dem sie gehört. Jede ist ein Fehler, den ein Browser nachweisen kann, mit einer Lösung, die sich heute umsetzen lässt.

ARIA

ARIA-Attribute müssen zur Rolle passen — aria-allowed-attr
Braille-Beschriftungen brauchen ein Textäquivalent — aria-braille-equivalent
ARIA-Schaltflächen, -Links und -Menüeinträge brauchen einen Namen — aria-command-name
Manche ARIA-Attribute widersprechen dem nativen Element — aria-conditional-attr
Veraltete ARIA-Rollen funktionieren nicht mehr — aria-deprecated-role
Der Seitenrumpf darf nicht vor Hilfsmitteln verborgen werden — aria-hidden-body
ARIA-Eingabefelder brauchen einen Namen — aria-input-field-name
Messanzeigen brauchen einen Namen — aria-meter-name
Fortschrittsbalken brauchen einen Namen — aria-progressbar-name
Manche Elemente dürfen keinen ARIA-Namen tragen — aria-prohibited-attr
Manche Rollen setzen eigene Attribute voraus — aria-required-attr
Manche Rollen setzen bestimmte Kindelemente voraus — aria-required-children
Manche Rollen setzen ein bestimmtes Elternelement voraus — aria-required-parent
aria-roledescription braucht eine Rolle, die es beschreibt — aria-roledescription
ARIA-Rollen müssen existieren und richtig geschrieben sein — aria-roles
Tabs brauchen einen Namen — aria-tab-name
Schalter, Radiobuttons und Checkboxen brauchen einen Namen — aria-toggle-field-name
Tooltips brauchen Inhalt — aria-tooltip-name
Namen von ARIA-Attributen müssen gültig sein — aria-valid-attr
Werte von ARIA-Attributen müssen gültig sein — aria-valid-attr-value

Farbe und Kontrast

Text braucht genug Kontrast zum Hintergrund — color-contrast
Links im Fließtext brauchen mehr als Farbe — link-in-text-block

Formulare

autocomplete muss die Standardwerte verwenden — autocomplete-valid
Ein Feld, eine Beschriftung — form-field-multiple-labels
Formularfelder brauchen eine Beschriftung — label
Auswahllisten brauchen einen Namen — select-name

Tastatur

Einen Weg an der Navigation vorbei anbieten — bypass
Ein iframe mit Inhalt nicht aus der Tab-Reihenfolge nehmen — frame-focusable-content
Bedienelemente nicht ineinander verschachteln — nested-interactive
Scrollbare Bereiche müssen per Tastatur erreichbar sein — scrollable-region-focusable

Sprache der Seite

Die Seite braucht eine Sprachangabe — html-has-lang
Der Sprachcode muss gültig sein — html-lang-valid
lang und xml:lang müssen übereinstimmen — html-xml-lang-mismatch
Sprachcodes im Text müssen gültig sein — valid-lang

Namen und Rollen

Verborgene Elemente dürfen nicht per Tastatur erreichbar bleiben — aria-hidden-focus
Schaltflächen brauchen einen Namen — button-name
Input-Schaltflächen brauchen einen Wert — input-button-name
Links brauchen einen Namen — link-name
Aufklapp-Zusammenfassungen brauchen Text — summary-name

Markup

Von ARIA genutzte ids müssen eindeutig sein — duplicate-id-aria
<marquee> entfernen — marquee

Semantik

Der zugängliche Name muss den sichtbaren Text enthalten — label-content-name-mismatch
Gestaltete Absätze sind keine Überschriften — p-as-heading

Visuelle Hinweise

Zoom nicht blockieren — meta-viewport
Touch-Ziele müssen groß genug sein — target-size

Struktur

Textabstände dürfen nicht mit !important festgezurrt werden — avoid-inline-spacing
Die Seite nicht auf eine Ausrichtung festlegen — css-orientation-lock
Definitionslisten brauchen die richtigen Kindelemente — definition-list
<dt> und <dd> gehören in eine Definitionsliste — dlitem
Listen brauchen Listenelemente als Kinder — list
Listenelemente gehören in eine Liste — listitem

Tabellen

Eine echte Tabellenbeschriftung verwenden — table-fake-caption
Datenzellen brauchen Kopfzellen — td-has-header
headers muss auf Zellen derselben Tabelle zeigen — td-headers-attr
Kopfzellen brauchen Datenzellen — th-has-data-cells

Textalternativen

Bereiche einer Image-Map brauchen einen Alternativtext — area-alt
Jede Seite braucht einen Titel — document-title
iframes brauchen einen Titel — frame-title
Rahmentitel müssen sich unterscheiden — frame-title-unique
Bilder brauchen einen Alternativtext — image-alt
Bild-Schaltflächen brauchen einen Alternativtext — input-image-alt
<object> braucht eine Textalternative — object-alt
Elemente mit role="img" brauchen einen Namen — role-img-alt
Serverseitige Image-Maps ersetzen — server-side-image-map
SVG-Grafiken brauchen einen Namen — svg-img-alt
Videos brauchen Untertitel — video-caption

Audio und Video

Audio braucht Untertitel oder ein Transkript — audio-caption
<blink> entfernen — blink
Die Seite nicht zeitgesteuert neu laden oder weiterleiten — meta-refresh
Ton nicht automatisch abspielen — no-autoplay-audio

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.