Deine umfangreiche Checkliste für barrierefreie Websites

Kategorie:
Web & Interaktion
Umfangreiche Checkliste für barrierefreie Websites

Wenn du dir diesen Blogbeitrag durchlesen möchtest, nehme ich an, dass du deine Website barrierefrei anbieten möchtest – das ist sehr gut! Vielleicht hilft dir diese ausführliche Checkliste. Ich habe sie nach den vier grundlegenden Prinzipien der Web-Zugänglichkeit angelegt: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Setz diese Checkliste um und du wirst eine barrierefreie und benutzerfreundliche Website haben, die kaum einen Nutzer ausschließt.

Mach deine Website ...

wahrnehmbar

Das Prinzip der Wahrnehmbarkeit stellt sicher, dass Inhalte und Informationen für alle Nutzer zugänglich sind, unabhängig von deren sensorischen Fähigkeiten. Dies erfordert eine sorgfältige Gestaltung, die visuelle, auditive und taktile Wege berücksichtigt, um Informationen zugänglich zu machen.

  • Website im Zwei-Sinne-Prinzip nutzbar (Auge und Ohr)
  • Website für Tablets und Smartphones optimieren
  • Inhalt als reine Textform (HTML), Text nicht als Bild
  • Überschriften (h1 bis h6) in hierarchisch korrekter Reihenfolge
  • Serifenlose Schriftart mit sehr guter Lesbarkeit wählen
  •  Standard-Schriftgröße grundsätzlich nicht zu klein
  • Technische Möglichkeit anbieten, Schriftgröße anzupassen
  • Check: keine Überlappungen des Inhaltes bei Änderung der Schriftgröße
  • Keine Farbe als Informationsmittel (muss in S/W funktionieren)
  • Ausreichend hoher Kontrast zwischen Text und Hintergrund
  • Technische Möglichkeit zu Kontrasteinstellungen anbieten
  • Texte bei Desktop-Ansicht nicht über die gesamte Bildschirmbreite
  • Texte linksbündig und im Flattersatz
  • Lesefreundliche Abstände zwischen Buchstaben, Wörtern und Zeilen
  • Verlinkungen innerhalb von Texten deutlich markieren
  • Alle Bilder mit hilfreichen Alt-Texten versehen 
  • (Hintergrund-) Videos nicht automatisch abspielen
  • Untertitel und / oder ein Transkript für jedes Video
  • Audioinhalte und Musik nicht automatisch abspielen
  • Untertitel und / oder ein Transkript für alle Audioinhalte
  • Keine animierten GIFs, die zu schnell oder zu aufgeregt sind

bedienbar

Das Prinzip der Bedienbarkeit gewährleistet, dass alle Nutzer die Navigation und Interaktion mit deiner Website problemlos durchführen können. Es berücksichtigt auch die ausschließliche Eingabemethode mit der Tastatur, mit Sprachbefehlen und anderen Assistenztechnologien.

  • Buttons auffällig gestaltet und (auch für Finger) gut klickbar machen
  • Navigation über Tastaturbefehle bedienbar machen
  • Fokus-Indikatoren für Tastaturnutzer sichtbar machen
  • Interaktive Elemente durch Tastaturbefehle bedienbar einbinden
  • Skip-Links (o.a. Ankerlinks, Sprungmarken) anbieten
  • Kein (oder ausreichend großes) Zeitlimit beim Ausfüllen von Formularfeldern
  • Keine Captchas, oder alternativ zusätzlich Hör-Captchas
  • Keine Pop-Ups

verständlich

Das Prinzip der Verständlichkeit zielt darauf ab, die Nutzung der Website so intuitiv und leicht nachvollziehbar wie möglich zu gestalten. Es geht darum, sicherzustellen, dass sowohl die Inhalte als auch die Bedienung der Website für Nutzer aller Fähigkeitsstufen klar und logisch sind.

  • Eine einfache, übersichtliche und intuitive Navigation
  • Breadcrumb-Navigation oder eine Sitemap einbinden
  • Suche mit Tolleranz gegenüber Rechtschreibfehlern anbieten
  • Filter- und Sortieroptionen für Suchergebnisse
  • Einfache Sprache verwenden und komplexe Satzstrukturen vermeiden
  • Kein übermäßiger Gebrauch von Fremdwörtern oder Fachjargon
  • abbr-Element bei Akronymen und Abkürzungen verwenden
  • Formularfelder klar beschriften
  • Formular-Korrekturanweisungen verständlich kommunizieren
  • Textuelle Rückmeldungen bei interaktiven Elementen

robust

Das Prinzip der Robustheit stellt sicher, dass deine Website mit verschiedenen Browsern kompatibel ist. Zudem ist sie  für alle Arten von Assistenztechnologien, wie Programme für Sprachbefehle oder die Umsetzung von Text in Braille-Informationen vollständig zugänglich.

  • Alle interaktiven Elemente für assistive Technologien nutzbar bereitstellen
  • Aktuelle Webstandards nutzen (z.B. HTML5, ARIA-Landmarks)
  • Cross-Browser-Kompatibilität sicherstellen (auch für ältere Browser)

Tools, die dir helfen

Hier ist eine Liste von Tools für dich, die speziell dafür entwickelt wurden, um dir eine detaillierte Einsicht zu geben, ob deine Website den Standards der Barrierefreiheit entspricht. Mit diesen hilfreichen Tools kannst du nicht nur die Zugänglichkeit deiner Webseite checken, sondern auch konkrete Maßnahmen identifizieren, die erforderlich sind, um eine inklusive Nutzererfahrung zu gewährleisten.

Ausführlicher Website-Check

WAVE ist eine richtig hilfreiche Browsererweiterung (geht auch direkt im Browser, ohne die Installation der Erweiterung) für jeden, der seine Webseite auf Barrierefreiheit prüfen möchte. Nach der Installation kannst du mit einem einfachen Klick auf das WAVE-Symbol in deinem Browser eine umfassende Analyse deiner Webseite starten. WAVE zeigt dir visuell, wo Probleme in Bezug auf Barrierefreiheit liegen, wie z.B. falsch eingesetzte Überschriften, fehlende Alt-Texte bei Bildern oder unzureichende Kontrastverhältnisse. Darüber hinaus bietet es praktische Tipps und Lösungen, um diese Barrieren zu beseitigen. Es ist ein hervorragendes Werkzeug, um einen ersten Eindruck von der Barrierefreiheit einer Seite zu bekommen und um spezifische Probleme schnell zu identifizieren.

Website-Report erstellen

Google Lighthouse ist ein Tool, das in den Google Chrome Developer Tools integriert ist. Mit dieser Erweiterung für den Browser Chrome, kannst du per Knopfdruck einen Report deiner Website erstellen lasen. Google Lighthouse führt eine Reihe von Tests durch, um die Einhaltung der Web Content Accessibility Guidelines (WCAG) zu überprüfen, einschließlich der Überprüfung von Kontrastverhältnissen, Schriftgrößen, interaktiven Elementen und mehr. Die Ergebnisse werden in einem übersichtlichen Report dargestellt, der nicht nur die Probleme aufzeigt, sondern auch konkrete Empfehlungen zur Verbesserung bietet.

Lesbarkeit prüfen

Der LIX-Rechner von Supertext ist ein spezialisiertes Tool, das darauf abzielt, die Lesbarkeit deiner Texte zu bewerten und zu verbessern. Es basiert auf dem LIX-Index, einer wissenschaftlichen Methode zur Bestimmung der Lesbarkeit, die sowohl die Länge der Wörter als auch die Länge der Sätze berücksichtigt, um zu ermitteln, wie leicht oder schwer dein Text zu verstehen ist.

Texte vereinfachen

Wenn du festgestellt hast, dass dein Text noch zu schwer zu lesen ist, dann ist LanguageTool dein perfekter Helfer. Dieses KI-basierte Tool schreibt deine Texte so, dass sie einfach zu lesen und zu verstehen sind. Es ersetzt lange Wörter, kürzt zu lange Sätze, formuliert einfache Texte und verzichtet auf Fachjargon. Die Qualität der Texte ist meiner Meinung nach richtig gut. Probier es einfach mal aus.

Screenreader-Check

Die Kompatibilität mit Screenreadern ist entscheidend für Nutzerinnen mit Sehbehinderungen. Tools wie Google TalkBack für Android und Apple VoiceOver für iOS ermöglichen es, deine Webseite aus der Perspektive eines Nutzers zu erleben, der auf einen Screenreader angewiesen ist. Diese Tools lesen den Bildschirminhalt laut vor, einschließlich Textinhalte und interaktive Elemente. Durch die Nutzung eines Screenreaders kannst du besser verstehen, wie zugänglich deine Webseite wirklich ist, und identifizieren, wo Verbesserungen notwendig sind, um eine nahtlose Navigation und Interaktion für alle Nutzerinnen zu gewährleisten.

Kontrast checken

Eine klare und leicht lesbare Darstellung von Texten ist ein wesentlicher Aspekt der Barrierefreiheit. Der Kontrast-Checker ist ein einfaches, aber wirkungsvolles Online-Tool, mit dem du das Kontrastverhältnis zwischen Text- und Hintergrundfarben auf deiner Webseite überprüfen kannst. Durch die Eingabe der Farbcodes kannst du sofort sehen, ob deine Texte den Richtlinien für Barrierefreiheit entsprechen. Dies ist besonders wichtig für Nutzerinnen mit eingeschränkter Sehkraft oder Farbenblindheit. Ein ausreichender Kontrast hilft allen Besucherinnen deiner Webseite, Inhalte leichter zu lesen und zu verstehen.

Dürfen wir dir helfen?

Unsere Agentur ist u.a. spezialisiert auf das Thema „Digitale Barrierefreiheit“. Wir haben nicht nur viel Wissen zu diesem Thema, sondern haben bereits große Websites barrierefrei überarbeitet und umgesetzt. Zudem beraten wir Unternehmen, Kommunen, Verwaltungs- und Bildungseinrichtungen zu allen Themen rund um barrierefreie Websites.

Gerne unterstützen wir auch dein / euer Projekt. Egal ob Websites-Check, Beratung oder Umsetzung. Melde dich einfach bei uns – kostenfrei und unverbindlich!

Website-Check

Du willst wissen, wie barrierefrei deine Website tatsächlich ist? Wir checken das!

Beratung

Du willst deine Website barrierefrei umsetzen und hast Fragen? Wir beraten dich gerne!

Umsetzung

Gerne setzen wir deine Website barrierefrei um. Wir erstellen dir ein unverbindliches Angebot!

Blogbeitrag teilen

Du hast Fragen oder brauchst Hilfe?

Wenn du Fragen zu diesem Thema hast, oder Hilfe brauchst, melde dich gerne unverbindlich bei uns.