Website-Barrierefreiheits-Checkliste für kleine Unternehmen (WCAG-basiert)

Praktische Website-Barrierefreiheits-Checkliste auf Basis von WCAG 2.2: Tastatur- und Fokus-Durchgang, Text, Kontrast, Formular-Labels und Fehler, Bild-Textalternativen, was automatische Prüfungen erkennen im Vergleich zu menschlichem Testen.

Diese Checkliste umfasst die Prüfungen, die ein Kleinunternehmer in etwa einer Stunde ohne Spezialsoftware durchführen kann: die Website nur mit der Tastatur bedienen, Textgröße und Kontrast prüfen, sicherstellen dass jedes Formularfeld ein Label und klare Fehlermeldungen hat, und prüfen ob Bilder sinnvolle Textalternativen haben. Sie basiert auf WCAG 2.2, dem Standard auf den sich die meisten Gesetze und Richtlinien beziehen. Das Bestehen macht eine Website nicht gesetzlich konform; es findet die häufigsten Barrieren.

1. Tastatur- und Fokus-Durchgang

Maus weglegen. Tab von oben auf der Seite nach unten drücken, dann Shift+Tab zurück.

[ ] Ein „Zum Inhalt springen“-Link erscheint beim ersten Tab (hilfreich bei langen Menüs)
[ ] Jeder Link, Button und jedes Formularfeld ist mit Tab erreichbar
[ ] Der Fokus ist immer sichtbar (ein Umriss oder eine Hervorhebung)
[ ] Fokus bewegt sich in sinnvoller Reihenfolge, von oben nach unten, links nach rechts
[ ] Das Menü öffnet sich mit Enter oder Leertaste und schließt mit Escape
[ ] Pop-ups lassen sich mit der Tastatur schließen, und Fokus kehrt zur Seite zurück
[ ] Nichts fängt den Fokus (man kann immer weiter tabben)
[ ] Sticky Header überdecken das fokussierte Element nicht

2. Text, Kontrast, Formular-Labels und Fehler

[ ] Fließtext ist bei normalem Zoom lesbar (ca. 16px oder größer)
[ ] Auf 200% zoomen: nichts überlappt oder wird abgeschnitten; kein seitliches Scrollen
[ ] Text-Kontrast mindestens 4,5:1 (3:1 für großen Text) – mit Tool prüfen
[ ] Links unterscheiden sich vom Text durch mehr als nur Farbe
[ ] Jedes Formularfeld hat ein sichtbares Label (Platzhaltertext ist kein Label)
[ ] Pflichtfelder sind mit Text markiert, nicht nur mit Farbe
[ ] Fehler nennen was falsch war und wie man es behebt, neben dem Feld
[ ] Buttons sagen was sie tun („Anfrage senden“, nicht „Abschicken“ oder nur ein Symbol)
[ ] Die Seitensprache ist eingestellt, und Überschriften folgen der Reihenfolge (H1, H2, H3)

Farbpaare mit dem Farbkontrast-Prüfer prüfen.

3. Bildzweck und Textalternativen

Der Alt-Text-Entscheidungsbaum des W3C behandelt Grenzfälle.

4. Automatische Prüfungen vs. menschliches Testen

Automatische Prüfungen findenNur eine Person kann beurteilen
Fehlende Alt-AttributeOb der Alt-Text tatsächlich nützlich ist
Niedriger Kontrast auf einfachen HintergründenKontrast von Text über Fotos und Videos
Formularfelder ohne LabelOb Labels und Fehler Sinn ergeben
Fehlende Seitensprache, leere LinksTastatur-Reihenfolge, Fokussichtbarkeit, Fallen
Übersprungene Überschriften-EbenenOb Überschriften den Inhalt beschreiben

Zuerst eine automatische Prüfung ausführen (der Website-Grader enthält grundlegende Barrierefreiheits-Prüfungen), dann den manuellen Durchgang oben durchführen.

Ausgefülltes Befund-Protokoll (beschriftete Demonstration)

Ein fiktives Unternehmen, „Harbour Line Plumbing“. Kein echtes Unternehmen; dies zeigt das Format, keine echten Ergebnisse.

Prüfdatum: [Datum]   Geprüft von: Eigentümer   Seiten: Startseite, Dienste, Kontakt
Browser/Geräte: Laptop nur Tastatur; Handy mit Screenreader
#  Seite     Problem                                       WCAG-Ref   Behoben?
1  Start     Anruf-Symbol hat kein Label ("Button")         4.1.2       ja
2  Start     Weißer Text über Hero-Foto schwer lesbar       1.4.3       ja, dunklere Überlagerung
3  Kontakt   Postleitzahl-Label ist nur Platzhalter          3.3.2       ja
4  Kontakt   Fehler sagt nur „Ungültig“                      3.3.1       ja, „Telefonnummer eingeben“
5  Dienste   Galerie-Fotos alt = Dateinamen                  1.1.1       ja
6  Alle      Kein sichtbarer Fokus auf Menülinks             2.4.7       offen – beim Builder gemeldet
Nicht getestet: Video-Untertitel (kein Video auf der Website)
LEER
Datum / Geprüft von / Seiten / Browser und Geräte:
#  Seite  Problem  WCAG-Ref  Behoben? (ja / offen + Notiz)
Nicht getestet:

5. Befunde dokumentieren ohne rechtliche Konformität zu behaupten

Klickbearbeitung im We.Inc-Builder zum Korrigieren von Beschriftungen und Seitentext
Labels und Text direkt im We.Inc-Builder beheben.

Nächster Schritt

Von einem Business-Template im We.Inc Website-Builder starten, dann diese Checkliste und den Website-Grader ausführen, bevor veröffentlicht wird. Free gibt bis zu 3 Template-Websites auf einer we.inc-Adresse (keine KI-Credits, keine eigene Domain); Starter für $20/Monat fügt KI-Building und eigene Domains hinzu (Preise).

Business-Website erstellen

Häufige Fragen

Welchem Standard sollte eine Website-Barrierefreiheits-Checkliste folgen?

WCAG 2.2 auf Stufe AA ist der Standard, auf den sich die meisten Gesetze und Richtlinien beziehen. Diese Checkliste deckt die häufigsten Kleinunternehmen-Probleme ab, nicht jedes Kriterium.

Kann ein automatischer Prüfer meine Website barrierefrei machen?

Nein. Automatische Tools erkennen fehlende Attribute und einige Kontrastprobleme, aber eine Person muss Tastaturnutzung, Fokus und ob Labels und Alt-Text Sinn ergeben prüfen.

Macht das Bestehen dieser Checkliste meine Website gesetzlich konform?

Keine Checkliste kann rechtliche Konformität garantieren. Ein datiertes Protokoll führen, eine ehrliche Barrierefreiheitserklärung veröffentlichen und einen Anwalt zu den eigenen Pflichten befragen.

Kostenlos starten · Keine Kreditkarte nötig

Product

Who It's For

Features

Resources

Company

View Sitemap