Kolton Design - Webdesign Grafikdesign Logodesign

WCAG-Checkliste (basierend auf WCAG 2.1, Level AA) für Barrierefreiheit von Webseiten

1. Wahrnehmbarkeit

1.1. Textalternativen:

  • Alle nicht-textuellen Inhalte (Bilder, Icons, Grafiken) haben alt-Attribute oder äquivalente Beschreibungen.
  • Dekorative Elemente sind mit leerem alt=““ markiert oder per CSS ausgeblendet.

1.2. Zeitbasierte Medien:

  • Videos haben Untertitel (für Live-Inhalte: Transkripte).
  • Audiodateien bieten Transkripte oder Beschreibungen.

1.3. Anpassbare Darstellung:

  • Inhalte sind semantisch strukturiert (z. B. <h1>-<h6>, <nav>, <button>).
  • Tabellen nutzen <th> mit scope-Attribut für Header.
  • Formulare haben verknüpfte <label>-Elemente.

1.4. Unterscheidbarkeit:

  • Text hat ausreichenden Kontrast (mind. 4.5:1 für normalen Text, 3:1 für große Texte).
  • Inhalte sind bei 200% Zoom nutzbar (ohne horizontales Scrollen).
  • Text ist nicht allein durch Farbe erkennbar (z. B. Links mit Unterstreichung).

2. Bedienbarkeit

2.1. Tastaturbedienbarkeit:

  • Alle Funktionen sind per Tastatur erreichbar (Tab-Reihenfolge logisch).
  • Keine „Tastaturfallen“ (z. B. in Modalen).

2.2. Ausreichend Zeit:

  • Bewegliche/autoplay-Inhalte können pausiert werden.
  • Zeitlimits sind deaktivierbar/anpassbar.

2.3. Anfälle vermeiden:

  • Keine blinkenden Inhalte (>3x/Sekunde).

2.4. Navigation & Orientierung:

  • Übersichtliche Seitentitel (<title>), klare Breadcrumbs.
  • Fokus-Indikatoren sichtbar (z. B. bei :focus).
  • „Skip-Links“ für direkten Zugriff auf Hauptinhalte.

3. Verständlichkeit

3.1. Lesbarkeit:

  • Sprache der Seite ist via <html lang=“…“> definiert.
  • Ungewöhnliche Begriffe/Abkürzungen werden erklärt.

3.2. Vorhersehbarkeit:

  • Navigation konsistent strukturiert.
  • Änderungen des Kontexts (z. B. Pop-ups) werden vorher angekündigt.

3.3. Eingabeunterstützung:

  • Formularfehler sind beschreibend und leicht korrigierbar.
  • Sensible Aktionen (z. B. Löschen) bestätigen lassen.

4. Robustheit

4.1. Kompatibilität:

  • Markup ist valide (z. B. via W3C-Validator).
  • ARIA-Attribute korrekt implementiert (falls genutzt).
  • Dynamische Inhalte für Screenreader aktualisierbar (aria-live).
Kosten Webseite

Barrierefrei