Machen Sie den Selbst-Check für Ihre Webseite

Der Stichtag am 28. Juni 2025 rückt näher. Mit dieser Checkliste können Sie erste wichtige Prüfungen an Ihrer Webseite selbst vornehmen. Sie ersetzt keine vollständige, professionelle Analyse, gibt Ihnen aber einen guten Überblick über Ihren aktuellen Stand und hilft, die häufigsten Barrieren zu identifizieren. Für ein grundlegendes Verständnis empfehlen wir unseren Artikel "Was ist das BFSG?".

1. Technische und Strukturelle Grundlagen

• Tastaturbedienbarkeit: Können Sie durch die gesamte Seite nur mit der Tab-Taste navigieren? Sind alle interaktiven Elemente (Links, Buttons, Formularfelder, Menüs) erreichbar und bedienbar? Ist die Reihenfolge logisch? Verschwindet der Fokus nie an einer unsichtbaren Stelle?
• Semantischer HTML-Code: Ist der Code sauber und logisch strukturiert? Werden HTML5-Tags wie <header>, <nav>, <main>, und <footer> korrekt eingesetzt, um die Seitenstruktur für assistive Technologien verständlich zu machen? Für komplexe Komponenten sollten Sie zudem ARIA-Attribute korrekt einsetzen.
• Responsives Design: Passt sich die Seite allen Bildschirmgrößen (Desktop, Tablet, Smartphone) an, ohne dass Inhalte verloren gehen oder horizontales Scrollen nötig wird? Funktioniert der Zoom bis 200% ohne Informationsverlust?
• Sinnvolle Seitentitel: Hat jede Unterseite einen einzigartigen und aussagekräftigen <title>-Tag, der den Inhalt der Seite beschreibt?

2. Inhalte, Wahrnehmbarkeit & Verständlichkeit

• Überschriftenhierarchie: Gibt es genau eine <h1> pro Seite, die das Hauptthema beschreibt? Werden Ebenen übersprungen (z.B. von H2 zu H4)? Eine logische Hierarchie ist das Inhaltsverzeichnis für Screenreader-Nutzer. Mehr dazu in unserem Artikel über Überschriften.
• Alternativtexte (Alt-Texte): Hat jedes informative Bild einen prägnanten, beschreibenden Alt-Text? Sind rein dekorative Bilder korrekt mit einem leeren Attribut (alt="") gekennzeichnet? Details finden Sie im Ratgeber zu Alt-Texten.
• Farbkontraste: Ist der Kontrast zwischen Text und Hintergrund hoch genug? Das WCAG-Mindestverhältnis ist 4.5:1 für normalen Text und 3:1 für großen Text. Nutzen Sie ein Kontrast-Prüftool.
• Farbe als einziges Merkmal: Werden Informationen ausschließlich über Farbe vermittelt (z.B. ein roter Rahmen für ein fehlerhaftes Feld)? Es muss immer eine zusätzliche Kennzeichnung (Text, Icon) geben.
• Verständliche Sprache: Werden komplexe Sachverhalte klar erklärt? Ist die Sprache an die Zielgruppe angepasst? Vermeiden Sie übermäßigen Jargon. Unser Leitfaden zu einfacher Sprache hilft dabei.
• Multimedia-Inhalte: Sind Videos mit Untertiteln und/oder Transkripten versehen? Mehr dazu unter Barrierefreiheit bei Videos und Multimedia.

3. Formulare, Links & Interaktion

• Klare Beschriftungen (Labels): Ist jedes Formularfeld eindeutig und sichtbar mit dem <label>-Tag beschriftet? Platzhalter sind kein Ersatz! Wie es richtig geht, lesen Sie im Artikel über barrierefreie Formulare.
• Aussagekräftige Fehlermeldungen: Sind Fehlermeldungen verständlich und wird das fehlerhafte Feld klar gekennzeichnet und programmatisch damit verknüpft (z.B. via aria-describedby)?
• Eindeutige Linktexte: Sind Linktexte aussagekräftig, auch ohne den Kontext des umgebenden Textes? Statt "hier klicken" besser "Mehr zum BFSG erfahren".
• Interaktive Elemente: Sind alle klickbaren Bereiche (wie Buttons oder Akkordeons) groß genug für eine einfache Bedienung auf Touch-Geräten?

4. Dokumente

• Barrierefreie PDFs: Sind zum Download angebotene PDF-Dokumente getaggt und somit barrierefrei? Erfahren Sie mehr über die Anforderungen an barrierefreie PDFs.

Unser kostenloses Analysetool auf der Startseite kann Ihnen helfen, viele dieser Punkte – insbesondere die textliche Verständlichkeit und die Überschriftenstruktur – schnell und einfach zu überprüfen. Für eine tiefere technische Analyse sind Browser-Erweiterungen (z.B. WAVE, axe DevTools) oder eine professionelle Beratung empfehlenswert.