Diese Checkliste wird von unseren Entwicklern genutzt, um eine gewisse Barriere-Freiheit für unsere Endkunden zu gewährleisten. Jede Komponente/Seite sollte gegen diese Checkliste geprüft werden.
Stand 06.2024
Axe Chrome Extension
Wave Chrome Extension
Lighthouse (Accessibility)
Capo Chrome Extension (Get your <head> sorted)
<head>
<html>-Tag hat korrektes lang-Attribut
<html>-Tag
Es gibt bei tabindex nur 0 oder -1
<a>-Tag wird für alle Links verwendet -> Seitenwechseln
<a>-Tag
<button>-Tag wird für alle Buttons, Klick- und Action-Flächen genutzt (kein div mit onclick etc.)
<button>-Tag
Wenn ein <ol>- oder <ul>-Element vorhanden ist, sollte es mindestens ein <li>-Element enthalten. Wenn ein <dl>-Element vorhanden ist, sollte es mindestens ein <dt>-Element enthalten.
<ol>
<ul>-Element
<li>-Element
<dl>-Element
<dt>-Element
<button>, <a> und <label> sind eindeutig und selbsterklärend
<button>
<a>
<label>
Es gibt nur eine <h1> pro Seite
<h1>
Alle <img>-Elemente haben ein Alt-Attribut
<img>-Elemente
rein dekorative SVGs haben aria-hidden="true"
aria-hidden="true"
<img>-Elemente mit source SVG haben das role-Attribut role="img"
role="img"
Die automatische Wiedergabefunktion für Video (sowie für Audio oder andere Multimedia) ist entfernt. Benutzer können die Wiedergabe starten, anhalten und stoppen.
Alle Inputs sind mit einem entsprechenden Label verbunden
Form-Inputs unterstützen grundsätzlich Autovervollständigung
Eingabefehler werden direkt mit den entsprechenden Feldern assoziiert
Die Seite kann nicht horizontal gescrollt werden
Viewport Zoom ist deaktiviert
Alle Klick-Flächen mind. 44x44px, außer bei Inline-Elementen wie Links
44x44px
Tastatursteuerung muss komplett möglich sein
Alle interaktiven Elemente müssen einen sichtbaren focustyle haben
Keyboard-Focus-Reihenfolge gleicht der des visuellen Layouts
Es gibt keine unsichtbaren fokusierbaren Elemente
Buttons können über Leertaste und Eingabetaste betätigt werden
Menüs und Overlays können via ESC-Taste wieder geschlossen werden
<html /> hat korrektes lang-attribut
<html />
Es gibt nur eine <h1 /> pro Seite
<h1 />
Alle <img />-Elemente haben ein Alt-Attribut
<img />-Elemente
Alle Inputs sind mit entsprechenden Label verbunden