xperients logo
Menu
close
Beitrag teilen:
webdesign-insights

Checkliste für barrierefreies Webdesign

xperients digitalagentur serhat
Serhat Kaya
Zuletzt aktuallisiert: 11. Oktober 2024
Diese Checkliste hilft Ihnen dabei, Ihre Webseite oder Ihren Onlineshop so zu gestalten, dass sie die Konformitätsstufen A und AA der WCAG 2.1 erfüllt. Sie basiert auf den internationalen Web Content Accessibility Guidelines und bietet Ihnen klare Richtlinien, um Barrieren für alle Nutzer zu reduzieren.

Unsere Empfehlungen sind stets auf dem neuesten Stand und werden regelmäßig aktualisiert, um den aktuellen Standards zu entsprechen. Nutzen Sie die interaktive Checkliste, um Ihre Fortschritte direkt in Ihrem Browser zu speichern und die Barrierefreiheit Ihrer Webseite kontinuierlich zu verbessern.

Als spezialisierte Agentur für barrierefreies Webdesign unterstützen wir Sie gerne bei der Umsetzung. Entdecken Sie unsere Leistungen im barrierefreien Webdesign.

1. Seitenstruktur und Layout (0/5)

  • WCAG 2.1 Erfolgskriterium 1.3.1, A-Konformität
  • Überschriften helfen, den Inhalt zu gliedern und die Navigation zu erleichtern, besonders für Screenreader-Benutzer. Verwenden Sie <h1> für den Haupttitel, <h2> für Hauptabschnitte und <h3> für Unterabschnitte.
  • Beispiel: Auf einer Rezeptseite könnte <h1> "Rezept für Schokoladenkuchen", <h2> "Zutaten" und <h3> "Backanleitung" sein.
  • WCAG 2.1 Erfolgskriterium 1.3.2, A-Konformität
  • Der Inhalt sollte in einer sinnvollen Reihenfolge präsentiert werden, auch wenn das Stylesheet deaktiviert ist. Dies stellt sicher, dass alle Benutzer, einschließlich derjenigen, die Screenreader verwenden, die Informationen in der richtigen Reihenfolge erhalten.
  • Beispiel: In einem Artikel erscheinen Überschrift, Einleitung, Hauptinhalt und Schlussabsatz in einer logischen Reihenfolge, auch wenn das CSS deaktiviert ist.
  • WCAG 2.1 Erfolgskriterium 2.4.2, A-Konformität
  • Jede Seite sollte einen klaren und eindeutigen Titel haben, der den Inhalt der Seite beschreibt. Dies hilft nicht nur den Nutzern, sich zu orientieren, sondern ist auch für die Suchmaschinenoptimierung (SEO) wichtig.
  • Beispiel: Anstelle von "Startseite" sollte der Titel spezifischer sein, wie "Online-Shop für Herren-Sneakers - Startseite".
  • WCAG 2.1 Erfolgskriterium 1.3.1, A-Konformität
  • Verschiedene Inhaltstypen sollten mit den passenden HTML-Elementen ausgezeichnet werden, um die Struktur und Bedeutung klar zu machen. Listen sollten als <ul>, <ol> oder <dl> formatiert sein, Zitate sollten mit <blockquote> und <cite> ausgezeichnet werden, und Datentabellen sollten mit <table> inklusive <th> für Kopfzeilen und <caption> für Beschreibungen versehen sein.
  • Beispiel: Zutatenlisten in einem Rezept werden als <ul> ausgezeichnet, während ein Kundenfeedback als <blockquote> zitiert wird.
  • WCAG 2.1 Erfolgskriterium 4.1.1, A-Konformität
  • Der HTML-Quelltext sollte standardkonform und fehlerfrei sein, um die Barrierefreiheit zu unterstützen und sicherzustellen, dass alle Inhalte korrekt interpretiert werden können.
  • Beispiel: Validieren Sie den HTML-Code, um sicherzustellen, dass alle Tags korrekt geschlossen sind und keine Syntaxfehler vorliegen.

2. Navigation (0/7)

  • WCAG 2.1 Erfolgskriterium 2.1.1, A-Konformität
  • Alle Funktionen sollten ohne Maus nutzbar sein, z.B. über die Tab-Taste, um auch Besuchern mit motorischen Einschränkungen die Navigation zu ermöglichen.
  • Beispiel: Alle interaktiven Elemente sind mit der Tab-Taste erreichbar und bedienbar.
  • WCAG 2.1 Erfolgskriterium 2.4.11, AA-Konformität
  • Interaktive Elemente wie Links, Schaltflächen und Formularelemente müssen eine klare visuelle Indikation (z.B. eine Umrandung oder Farbänderung) haben, wenn sie fokussiert sind. Dies ist besonders wichtig für Benutzer, die auf Tastaturnavigation angewiesen sind.
  • Beispiel: Bei der Navigation durch die Webseite sollte beim Fokussieren auf einen Link eine deutlich sichtbare Umrandung erscheinen.
  • WCAG 2.1 Erfolgskriterium 3.2.3, AA-Konformität
  • Einheitliche Navigationselemente erleichtern die Nutzung der Webseite, da sie die Konsistenz und Vorhersehbarkeit fördern.
  • Beispiel: Das Hauptmenü bleibt auf allen Seiten gleich und an derselben Stelle.
  • WCAG 2.1 Erfolgskriterium 2.4.5, AA-Konformität
  • Eine zusätzliche Navigationsmethode wie eine Suchfunktion oder ein Inhaltsverzeichnis kann die Benutzerfreundlichkeit erheblich verbessern.
  • Beispiel: Neben dem Hauptmenü eine Suchleiste bereitstellen oder eine Sitemap verlinken.
  • WCAG 2.1 Erfolgskriterium 2.4.4, A-Konformität
  • Linktexte sollten klar und präzise den Zweck des Links beschreiben, um den Webseiten-Besuchern zu helfen, den Kontext zu verstehen.
  • Beispiel: "Mehr erfahren über unsere Dienstleistungen" anstelle von "Hier klicken".
  • WCAG 2.1 Erfolgskriterium 2.4.1, A-Konformität
  • Ein "Zum Inhalt springen"-Link ermöglicht es den Webseiten-Besuchern, direkt zum Hauptinhalt zu gelangen, was besonders für Screenreader-Nutzer nützlich ist.
  • Beispiel: Ein Link "Zum Inhalt springen" ist am Anfang der Seite sichtbar.
  • WCAG 2.1 Erfolgskriterium 2.4.8, AA-Konformität
  • Besucher sollten stets wissen, wo sie sich befinden, z.B. durch hervorgehobene Menüpunkte oder Breadcrumbs.
  • Beispiel: Der aktive Menüpunkt ist im Menü hervorgehoben.

3. Design (0/8)

  • WCAG 2.1 Erfolgskriterium 1.4.3 und 1.4.11, AA-Konformität
  • Texte und interaktive Elemente (wie Links und Schaltflächen) sollten einen ausreichenden Kontrast zu ihrem Hintergrund haben, um für alle Benutzer gut sichtbar zu sein. Interaktive Elemente benötigen mindestens einen Kontrast von 3:1 zu angrenzenden Farben.
  • Beispiel: Ein dunkelgrauer Text auf weißem Hintergrund erfüllt die Anforderungen, ebenso wie eine Schaltfläche mit einem deutlich erkennbaren Kontrast zum Hintergrund.
  • WCAG 2.1 Erfolgskriterium 1.4.4, AA-Konformität
  • Texte sollten mit den Browser-Einstellungen skaliert werden können, damit alle Besucher die Inhalte bequem lesen können.
  • Beispiel: Verwendung von relativen Maßeinheiten wie em oder % für Schriftgrößen.
  • WCAG 2.1 Erfolgskriterium 1.4.4, AA-Konformität
  • Inhalte sollten lesbar und funktionsfähig bleiben, wenn sie um bis zu 200 % vergrößert werden, um Besuchern mit Sehbehinderungen das Lesen zu erleichtern.
  • Beispiel: Ein responsives Design, das sich an unterschiedliche Bildschirmgrößen und Zoomstufen anpasst.
  • WCAG 2.1 Erfolgskriterium 1.4.10, AA-Konformität
  • Der Inhalt sollte auf einer Bildschirmbreite von 320 Pixeln ohne Verlust von Informationen oder Funktionalität zugänglich sein. Dies erfordert ein responsives Design.
  • Beispiel: Die Webseite verwendet flexible Layouts und Bilder, um sich an unterschiedliche Bildschirmgrößen anzupassen.
  • WCAG 2.1 Erfolgskriterium 1.4.1, A-Konformität
  • Farben sollten nicht allein zur Informationsvermittlung dienen, um auch farbenblinden Besuchern alle Informationen zugänglich zu machen.
  • Beispiel: Ein roter Rahmen und der Text "Pflichtfeld" zur Kennzeichnung eines obligatorischen Formularfeldes.
  • WCAG 2.1 Erfolgskriterium 1.4.12, AA-Konformität
  • Die Inhalte sollten auch bei Anpassung des Textabstands durch den Benutzer lesbar und funktional bleiben. Dies beinhaltet Zeilenhöhe, Absatzabstand, Wortabstand und Buchstabenabstand.
  • Beispiel: Der Text bleibt gut lesbar, wenn der Benutzer den Zeilenabstand auf das 1,5-fache der Schriftgröße erhöht.
  • WCAG 2.1 Erfolgskriterium 2.3.1, A-Konformität
  • Inhalte sollten keine intensiven Blitz- oder Flackereffekte haben, um epileptische Anfälle bei empfindlichen Besuchern zu vermeiden.
  • Beispiel: Verzicht auf blinkende Banner oder Animationen.
  • Nicht direkt WCAG, aber relevant für Barrierefreiheit
  • Optimierungen wie die Komprimierung von Bildern, die Minimierung von JavaScript und die Verwendung von Caching tragen zur Reduzierung der Ladezeit bei, was insbesondere für Benutzer mit langsamen Internetverbindungen wichtig ist. Schnelle Ladezeiten verbessern die Zugänglichkeit insgesamt.
  • Beispiel: Implementierung von WebP-Bildern und Lazy-Loading-Techniken, um die Seitengeschwindigkeit zu erhöhen.

4. Sprache (0/3)

  • WCAG 2.1 Erfolgskriterium 3.1.1, A-Konformität
  • Die Standardsprache einer Webseite sollte im HTML-Tag durch das lang-Attribut angegeben werden. Dies hilft Screenreadern, den Text korrekt auszusprechen und die richtige Sprachsynthetisierungsstimme zu verwenden.
  • Beispiel: Eine Webseite, die auf Deutsch verfasst ist, sollte <html lang="de"> im HTML-Tag enthalten.
  • WCAG 2.1 Erfolgskriterium 3.1.2, AA-Konformität
  • Wenn innerhalb einer Seite verschiedene Sprachen verwendet werden, sollten diese Abschnitte entsprechend markiert werden, um die korrekte Aussprache und Interpretation durch Screenreader zu gewährleisten. Dies kann durch das lang-Attribut auf den entsprechenden HTML-Elementen erfolgen.
  • Beispiel: Ein Abschnitt auf einer englischen Webseite, der ein deutsches Zitat enthält, sollte wie folgt ausgezeichnet sein: <p lang="de">„Dies ist ein deutsches Zitat.“</p>.
  • WCAG 2.1 Erfolgskriterium 3.1.1, A-Konformität
  • Unklare Begriffe und Abkürzungen sollten erklärt werden, um Missverständnisse zu vermeiden und die Verständlichkeit zu erhöhen.
  • Beispiel: "API" wird als "Application Programming Interface, eine Schnittstelle zur Interaktion zwischen Programmen" erklärt.

5. Benutzerinteraktion (0/7)

  • WCAG 2.1 Erfolgskriterium 3.3.2, AA-Konformität
  • Formularfelder sollten klar beschriftet und mit Erklärungen versehen sein, damit Besucher die richtigen Informationen eingeben können.
  • Beispiel: "E-Mail-Adresse (z.B. name@domain.com)" als Beschriftung.
  • WCAG 2.1 Erfolgskriterium 3.3.1, A-Konformität
  • Fehlermeldungen sollten klar und hilfreich sein, um Besucher zur Korrektur zu leiten.
  • Beispiel: "Bitte geben Sie eine gültige E-Mail-Adresse ein".
  • WCAG 2.1 Erfolgskriterium 3.3.4, AA-Konformität
  • Vor endgültigen Aktionen sollten Besucher gewarnt und um Bestätigung gebeten werden, um ungewollte Änderungen zu vermeiden.
  • Beispiel: "Sind Sie sicher, dass Sie dieses Konto löschen möchten?".
  • WCAG 2.1 Erfolgskriterium 2.2.1, A-Konformität
  • Besucher sollten mehr Zeit erhalten können, wenn sie diese benötigen, um Aufgaben zu beenden.
  • Beispiel: Ein Pop-up informiert über den baldigen Ablauf der Sitzung und bietet eine Schaltfläche "Sitzung verlängern".
  • WCAG 2.1 Erfolgskriterium 4.1.3, AA-Konformität
  • Nach Eingaben und Aktionen sollten Bestätigungen angezeigt werden, um den Besuchern Rückmeldung über den Erfolg der Aktion zu geben.
  • Beispiel: Nach dem Absenden eines Formulars erscheint die Nachricht "Ihre Anfrage wurde erfolgreich übermittelt."
  • WCAG 2.1 Erfolgskriterium 2.1.2, A-Konformität
  • Besucher sollten nicht in Situationen geraten, in denen sie ohne Maus nicht weiterkommen, um die Webseite weiterhin vollständig nutzen zu können.
  • Beispiel: Alle interaktiven Elemente sind mit der Tab-Taste erreichbar, ohne dass man "stecken bleibt".
  • WCAG 2.1 Erfolgskriterium 3.3.3, AA-Konformität
  • Vorschläge zur Fehlerkorrektur sollten gegeben werden, um Besuchern zu helfen, Eingabefehler zu vermeiden.
  • Beispiel: "Haben Sie eine falsche E-Mail-Adresse eingegeben?"

6. Multimedia (0/5)

  • WCAG 2.1 Erfolgskriterium 1.1.1, A-Konformität
  • Alternativtexte beschreiben den Inhalt von Bildern und sind besonders für sehbehinderte Besucher wichtig. Dekorative Bilder sollten nicht beschrieben werden, um Verwirrung zu vermeiden.
  • Beispiel: Ein Bild eines Produkts hat den Alternativtext "Smartphone mit 6-Zoll-Display". Ein reines Design-Element bleibt ohne Alt-Text.
  • WCAG 2.1 Erfolgskriterium 1.2.2, A-Konformität
  • Untertitel ermöglichen es gehörlosen oder schwerhörigen Besuchern, den Inhalt von Videos zu verstehen. Sie sollten gesprochenen Text und relevante Geräusche umfassen.
  • Beispiel: Ein Lehrvideo enthält Untertitel für gesprochene Anweisungen und Hintergrundgeräusche.
  • WCAG 2.1 Erfolgskriterium 1.2.5, AA-Konformität
  • Für Videos, die visuelle Informationen enthalten, sollten Audiodeskriptionen bereitgestellt werden, damit auch sehbehinderte Benutzer die Inhalte verstehen können.
  • Beispiel: Ein Video, das Grafiken und Diagramme zeigt, sollte eine Audiodeskription haben, die diese visuellen Inhalte beschreibt.
  • WCAG 2.1 Erfolgskriterium 2.2.2, A-Konformität
  • Automatisch startende Inhalte wie Videos oder Animationen sollten eine Möglichkeit zur Steuerung (Pausieren, Stoppen, Lautstärkeregelung) bieten. Dies verhindert, dass Benutzer durch ungewollte Inhalte gestört werden.
  • Beispiel: Ein Video, das automatisch abspielt, sollte eine sichtbare Steuerleiste mit einer Pausentaste enthalten.
  • WCAG 2.1 Erfolgskriterium 1.4.2, A-Konformität
  • Nutzer sollten die Lautstärke von Audioinhalten regeln oder diese stumm schalten können, um eine angenehme Benutzererfahrung zu gewährleisten.
  • Beispiel: Ein Lautstärkeregler oder Mute-Button für eingebettete Videos.
Vielen Dank, dass Sie unsere Checkliste für barrierefreies Webdesign genutzt haben! Wir freuen uns über Ihr Feedback und Anregungen, um unsere Checkliste weiter zu verbessern. Schreiben Sie uns gerne eine Mail an redaktion@xperients.de.

Bitte beachten Sie, dass diese Checkliste keinen Vollständigkeitsanspruch erhebt. Sie dient dazu, Webseiten- und Onlineshop-Betreiber bei der Herausforderung zu unterstützen, ihre Webseite barrierefrei zu gestalten und die Konformitätsstufen A und AA der WCAG 2.1 zu erreichen. Die WCAG stellt ebenfalls eine Checkliste in Englisch zur Verfügung.

Ab 2025 treten mit dem Barrierefreiheitsstärkungsgesetz (BFSG) neue Anforderungen in Kraft, die Unternehmen zur Barrierefreiheit ihrer digitalen Angebote verpflichten. Wir stehen Ihnen zur Seite, um diese neuen Standards zu erfüllen und Ihre Webseite zukunftssicher zu gestalten. Kontaktieren Sie uns für eine individuelle Beratung!
Erreichen Sie alle Ihre Kunden mit einer inklusiven und benutzerfreundlichen Webseite.
Kontaktieren Sie uns gerne für ein unverbindliches Erstgespräch!
Jetzt starten

Über den Author

xperients digitalagentur serhat
Serhat Kaya
Serhat Kaya ist Managing Partner der Digitalagentur XPERIENTS. Im XPERIENTS Team ist er Spezialist für SEO & Webdesign. Serhat’s Leidenschaft ist es, Unternehmer dabei zu unterstützen, die Welt zu verändern.

Insights

Weitere Artikel
1 2 3 … 5

Checkliste: Ist meine Webseite veraltet?

Webseiten sind wie Büros. Hin und wieder brauchen sie einen frischen Anstrich. Prüfen Sie mit unserer Checkliste, ob Sie einen Relaunch Ihrer Webseite benötigen.
weiterlesen

53 SEO Tools für Ihr Online Marketing in 2022

Wir haben rund 194 SEO Tools getestet. Hier finden Sie die besten 53 kostenlosen und kostenpflichtigen Tools für Ihr Online Marketing in 2022.
weiterlesen

Die besten kostenlosen Alternativen zu Linktree

Linktree ist mittlerweile weit verbreitet. Vor allem auf Social Media Plattformen. Das Ziel:
weiterlesen
1 2 3 … 5
prev arrow orangenext arrow orange
chevron-downchevron-right