hydroimperium/accessibility

Barrierefreiheit (Accessibility)

Machen Sie die Oberfläche ohne Maus, ohne perfekte Sehkraft und ohne Toleranz für Mehrdeutigkeiten nutzbar.

Verwendung

Verwenden Sie dies, wenn der Benutzer:

• eine Überprüfung der Barrierefreiheit wünscht;
• Formulare, Navigationen, Modale oder interaktive Komponenten entwickelt;
• WCAG-Richtlinien benötigt;
• Tastatur- oder Screenreader-Unterstützung wünscht;
• nach Kontrast oder Fokus-Zuständen fragt.

1. Umfang definieren

• Welche Seiten oder Komponenten?
• Welche Benutzergruppen und assistiven Technologien sind relevant?
• Welche Norm gilt: WCAG 2.2 AA, interne Richtlinie, gesetzliche Anforderung?
• Was ist nicht im Umfang enthalten?

2. Grundlagen prüfen

Semantik

• Verwenden Sie native Elemente: button, a, input, label, nav, main.
• Verwenden Sie kein div als Button.
• Verwenden Sie Überschriften in der richtigen Reihenfolge.
• Geben Sie Orientierungspunkten und Abschnitten zugängliche Namen.

Tastatur

• Jedes interaktive Element ist per Tab erreichbar.
• Die Fokus-Reihenfolge entspricht der visuellen Reihenfolge.
• Der Fokus ist sichtbar.
• Es gibt keine Tastaturfalle.
• Escape schließt Modale.
• Pfeiltasten funktionieren in Menüs, Tabs und Rastern wie erwartet.

Formulare

• Jedes Eingabefeld hat ein Label.
• Fehler werden angesagt und mit dem Feld verknüpft.
• Pflichtfelder sind im Text gekennzeichnet, nicht nur durch Farbe.
• Autovervollständigung wird verwendet, wo angemessen.
• Anweisungen stehen vor dem Feld.

Bilder und Medien

• Sinnvolle Bilder haben Alternativtexte.
• Dekorative Bilder haben leere Alternativtexte.
• Videos haben Untertitel.
• Audios haben ein Transkript.
• Keine Information wird nur durch Farbe vermittelt.

Kontrast und Text

• Textkontrast erfüllt WCAG AA.
• Text kann auf 200% vergrößert werden, ohne dass Inhalt verloren geht.
• Zeilenlänge und Abstände sind lesbar.
• Inhalt fließt bei 320 px um.

Dynamische Inhalte

• Ladezustände werden angesagt.
• Toasts und Benachrichtigungen verwenden passende Live-Regionen.
• Modale verwalten den Fokus.
• Client-seitige Routenwechsel aktualisieren Titel und Fokus.

3. Testen

• Nur-Tastatur-Durchlauf.
• Screenreader-Smoketest, falls verfügbar.
• Auf 200% zoomen.
• Hochkontrastmodus.
• Reduzierte Bewegung.
• Automatisierte Prüfungen, mit dem Verständnis, dass sie nur einen Teil des Problems erfassen.

Ausgabeformat

## Umfang

## Ergebnisse

### <Schweregrad>: <Problem>

- **Ort:** `<Pfad oder Komponente>`
- **WCAG:** <Kriterium>
- **Auswirkung:** <wer wird blockiert und wie>
- **Behebung:** <spezifische Änderung>
- **Verifikation:** <wie zu testen>

## Was funktioniert

## Nicht getestet

## Priorität

1. ...

Regeln

• Behaupten Sie keine vollständige WCAG-Konformität aufgrund eines automatisierten Scans.
• Verwenden Sie kein aria-*, um schlechte Semantik zu korrigieren.
• Entfernen Sie keine Fokus-Umrandungen ohne sichtbaren Ersatz.
• Verlassen Sie sich nicht ausschließlich auf Farbe.
• Fügen Sie keine Screenreader-only-Klasse als Ersatz für ein Label hinzu.
• Wenn die Überprüfung unvollständig ist, geben Sie an, was nicht getestet wurde.

Qualitätsprüfungen

• Native Semantik wird verwendet.
• Tastaturzugriff funktioniert.
• Fokus ist sichtbar.
• Formulare haben Labels und Fehler.
• Kontrast ist ausreichend.
• Dynamische Inhalte werden angesagt.
• Die Überprüfung gibt an, was nicht getestet wurde.