Mit dieser Checkliste kannst Du sicherstellen, dass Deine Website barrierefrei und für alle Benutzer zugänglich ist.
Seitenstruktur für deine barrierefreie website
- Bemühe dich um eine klare und logische Struktur:
Verwende HTML-Überschriften (`<h1>`, `<h2>`, etc.) in hierarchischer Reihenfolge. Beginne mit H1. Verwende Überschriften nicht durcheinander, nur weil es hübsch aussieht und die H1 nur einmal, nämlich ganz oben auf deiner Seite. - Navigationshilfen:
Stelle sicher, dass die Hauptnavigation konsistent auf allen Seiten ist und Sprunglinks, auch Anker genant
(`<a href=“#content“>`)
zu den Hauptinhalten vorhanden sind.
Texte und Inhalte
- Bemühe dich um eine leicht verständliche Sprache:
Vermeide Fachjargon und verwende klare, verständliche Ausdrücke - Alternativtexte für Bilder: Alle Bilder sollten beschreibende Alternativtexte (`alt`-Attribute) haben, damit sehbeeinträchtigten Personen beim Vorlesen das Bild genau beschrieben werden kann
- Multimedia-Inhalte:
Biete aus demselben Grund wie zuvor Untertitel und Transkripte für Videos und Audioinhalte an.
Formulare auf barrierefreien Webseiten
- Felder:
Stelle sicher, dass alle Formularfelder korrekt beschriftet sind (`<label>`-Elemente) - Fehlermeldungen:
Biete klare und hilfreiche Fehlermeldungen an und erkläre, wie Fehler korrigiert werden können.
Farben und Kontraste
- Farbkontrast:
Stelle sicher, dass der Kontrast zwischen Text und Hintergrund ausreichend ist (mindestens 4,5:1 für normalen Text und 3:1 für großen Text) - Farbenblindheit:
Vermeide die ausschließliche Verwendung von Farben zur Vermittlung von Informationen
Tastatur Zugänglichkeit
- Navigierbarkeit:
Stelle sicher, dass alle interaktiven Elemente (Links, Schaltflächen, Formulare) per Tastatur erreichbar sind. - Fokus-Indikatoren: Sichtbare Fokus-Indikatoren (`outline` oder ähnliches) für interaktive Elemente bereitstellen.
Interaktive Elemente
- Links und Schaltflächen:
Stelle sicher, dass alle Links und Schaltflächen klar als solche erkennbar sind und eindeutige Beschreibungen haben. - WYSIWYG-Editoren:
Wenn ein WYSIWYG-Editor verwendet wird, stelle sicher, dass die generierten Inhalte semantisch korrekt sind.
Dynamische Inhalte
- ARIA-Rollen und -Eigenschaften:
Verwende ARIA-Rollen und -Eigenschaften, um dynamische Inhalte und Widgets zugänglich zu machen. - Live-Regionen:
Nutze ARIA-Live-Regionen, um wichtige Änderungen im Inhalt anzuzeigen, ohne dass der Benutzer manuell eingreifen muss.
nutze zur 'Checkliste barrierefreie website' zusätzliche Ressourcen
- Barrierefreiheits-Validatoren:
Nutze Online-Tools wie das WAVE Web Accessibility Evaluation Tool oder den Axe Accessibility Checker, um Deine Website auf Barrierefreiheit zu überprüfen. - WCAG-Richtlinien:
Orientiere Dich an den Richtlinien der Web Content Accessibility Guidelines (WCAG), um sicherzustellen, dass Deine Website den internationalen Standards entspricht.
Du kommst nicht weiter?
Hirnentknoter Workshop
Gemeinsam schauen wir uns dein Problem an, lösen es und du kannst hinterher wieder allein weiter machen.
