Zum Seiteninhalt springen
10. Juli 2024

Barrierefreie Website: Die Basics

Wir geben Ihnen praktische Tipps und Leitlinien mit auf den Weg, die Ihnen helfen Ihre Websites zugänglicher zu gestalten.

Barrierefreiheit Checklist

Steigender Bedarf an Barrierefreiheit

Laut der Weltgesundheitsorganisation leben weltweit etwa eine Milliarde Menschen mit einer Behinderung. Allein in der Europäischen Union sind es 80 Millionen Menschen. Neben körperlichen, kognitiven und Entwicklungsbehinderungen zählen auch Sinnesbehinderungen wie Seh- und Hörbehinderungen dazu. Im Jahr 2015 litten rund 217 Millionen Menschen weltweit unter einer moderaten bis schweren Sehbehinderung und es wird erwartet, dass sich diese Zahl bis 2050 mehr als verdoppeln wird. Der Bedarf an verbesserter Barrierefreiheit und verbessertem Zugang für alle Menschen ist bereits jetzt enorm hoch und wird in Zukunft stetig weiter wachsen. 

Mit dem Barrierefreiheitsstärkungsgesetz (BFSG) setzt Deutschland die europäische Barrierefreiheitsrichtlinie (Richtlinie (EU) 2019/882) um. Während bisher nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) nur öffentliche Stellen verpflichtet waren, die Web Content Accessibility Guidelines (WCAG 2.1) umzusetzen und ihre digitalen Auftritte barrierefrei zu gestalten, weitet das BFSG diese Pflicht ab seinem Inkrafttreten auch auf private Unternehmen aus.

Das stellt einen bedeutenden Fortschritt zur Sicherstellung der Zugänglichkeit für alle dar. Das BFSG tritt am 28. Juni 2025 in Kraft, doch es lohnt sich bereits heute, in einen verbesserten Zugang zu investieren. Denn von Barrierefreiheit profitieren alle – nicht nur Menschen mit Behinderungen oder funktionellen Einschränkungen.Unsere Gesellschaft wird immer älter, sodass die Notwendigkeit von Barrierefreiheit immer größer wird. Unternehmen, die barrierefreie Dienstleistungen anbieten, erschließen sich nicht nur größere Absatzmärkte und Wettbewerbsvorteile. Sie sind auch gut für die Zukunft aufgestellt. Denn sie werden künftig auch mit zur Barrierefreiheit verpflichteten Unternehmen konkurrieren, die mit innovativen barrierefreien Dienstleistungen am Markt sein werden. 

Im Folgenden möchten wir Ihnen mit unseren Leitlinien und praktischen Tipps helfen, Ihren Webauftritt für alle Menschen zugänglicher zu gestalten. Keine Sorge, Sie können das meistern. Es gibt mittlerweile gute und unkomplizierte Instrumente, mit denen Sie die Barrierefreiheit auf Ihrer Website erhöhen können.

Leitlinien bei der Umsetzung von Barrierefreiheit im Web

Barrierefreiheit kann äußerst komplex sein, insbesondere wenn das Ziel darin besteht, stets vollständige Inklusion zu gewährleisten. Bevor Sie sich an die Umsetzung wagen, möchten wir Ihnen fünf Leitlinien mit auf den Weg geben.

  1. Barrierefreiheit im Web wird idealerweise umgesetzt, bevor die jeweilige Website entwickelt wird.
  2. Barrierefreiheit ist kein Sprint, sondern ein Marathon. Setzen Sie sich in Ihrem Team oder Unternehmen für ein Bewusstsein für Barrierefreiheit ein, um eine gemeinsame Grundlage zu schaffen.
  3. Legen Sie Ihre Ziele fest und weisen Sie Verantwortlichkeiten für die Förderung von Barrierefreiheit in Ihrem Unternehmen zu.
  4. Konsultieren Sie betroffene Personen, um zu erfahren, wie diese Ihre Dienstleistung aktuell nutzen oder welche Verbesserungen sie sich wünschen würden.
  5. Informieren Sie sich, welche Art von Einschränkung von bestimmten Lösungen profitieren kann.

Wenn Sie bereit sind, mit der Umsetzung zu beginnen, hilft es oft, den ersten Schritt zu wagen und dann kontinuierlich am Ball zu bleiben.

Die vier Grundprinzipien der Barrierefreiheit

Einen guten ersten Anhaltspunkt bieten die Web Content Accessibility Guidelines (WCAG 2.1), diese Regeln legen fest, wie Websites barrierefrei gestaltet werden können, so dass sie von allen Menschen genutzt werden können, auch von denen mit Behinderungen. Sie geben Anleitungen zur Gestaltung von Texten, Bildern, Videos und mehr, damit sie für alle verständlich und bedienbar sind. Es gibt drei Konformitätsstufen innerhalb der WCAG: Level A, das grundlegende Barrierefreiheitsanforderungen abdeckt, Level AA, das als Standard für gesetzliche Vorgaben gilt und eine höhere Nutzerfreundlichkeit sicherstellt, sowie Level AAA, das die strengsten Kriterien für maximale Barrierefreiheit erfüllt. 

Nach den WCAG basieren barrierefreie Websites auf vier Prinzipien. Mit den folgenden Tipps setzen Sie diese gezielt um und machen Ihre Website inklusiver und zugänglicher.

Icon Barrierefreiheit Auge

Wahrnehmbarkeit

Alle Inhalte auf einer Website müssen für jeden erkennbar sein, unabhängig von ihren Fähigkeiten oder Einschränkungen. Achten Sie daher darauf, die folgenden Elemente zu integrieren:

  • Alt-Text und Untertitel
    Alle Bilder haben einen beschreibenden alternativen Text und es werden Untertitel für Videos und Transkripte für Audio angeboten.
  • Kontrast
    Es herrscht mindestens ein Kontrastverhältnis von 4,5:1 für Text.
  • Überschriften
    Es gibt eine logische Überschriftenstruktur für den Screenreader.
  • Formulare
    Es sind klare Beschriftungen und Anweisungen verfügbar.
  • Animationen
    Benutzer können Animationen deaktivieren.
Icon Barrierefreiheit Bulb

Verständlichkeit

Die Inhalte einer Website oder Anwendung sind für alle Nutzer leicht verständlich, unabhängig von ihren Fähigkeiten oder Einschränkungen. Achten Sie daher darauf, die folgenden Elemente zu integrieren:

  • Sprache
    Es wird einfache Sprache verwendet und Fachjargon vermieden.
  • Fehlervorschläge
    Es werden Vorschläge zur Korrektur von Eingabefehlern angeboten.
  • Konsistente Navigation
    Es wird eine einheitliche Navigation auf allen Seiten verwendet.
Icon Barrierefreiheit Tap

Bedienbarkeit

Die Website ist für alle Nutzer leicht bedienbar, unabhängig von ihren Fähigkeiten oder Einschränkungen. Achten Sie daher darauf, die folgenden Elemente zu integrieren:

  • Tastatur-Navigation
    Alle Funktionen sind über die Tastatur zugänglich.
  • Fokus-Indikator
    Es gibt einen sichtbaren Fokusindikator (visuelle Anzeige, welches Element gerade ausgewählt ist) für interaktive Elemente.
  • Zeitlimits
    Es gibt Optionen zur Anpassung oder Deaktivierung von Zeitlimits.
Icon Barrierefreiheit Muscle

Robustheit

Die Inhalte müssen so robust sein, dass sie von einer Vielzahl von Browsern, einschließlich assistiver Technologien, interpretiert werden können. Achten Sie daher darauf, die folgenden Elemente zu integrieren:

  • Responsive Design
    Die Website passt sich an verschiedene Geräte an. 
  • ARIA-Landmarks
    Es werden ARIA-Landmarks und Rollen für eine bessere Navigation verwendet. Darunter versteht man spezielle HTML-Elemente, die nach dem Accessible Rich Internet Applications (ARIA)-Standard definiert sind. Sie helfen dabei, die Struktur von Webseiten für Bildschirmleser und andere assistive Technologien deutlich zu kennzeichnen.

Abschließend möchten wir Sie noch erinnern, eine Erklärung zur Barrierefreiheit und Kontaktinformationen für Feedback auf Ihrer Website zur Verfügung stellen.

Unser Angebot im Bereich Barrierefreiheit im Web

Ob Schulung oder Analyse – wir unterstützen Sie auf dem Weg zur barrierefreien Website.

Unser Training in der makandra academy vermittelt Ihrem Team praxisnahes Wissen, um Barrierefreiheit nachhaltig in digitale Prozesse zu integrieren. Die Teilnehmenden lernen gesetzliche Anforderungen kennen, identifizieren Barrieren und arbeiten mit relevanten Standards, Best Practices und Tools. Durch praktische Übungen wenden sie das Gelernte direkt an und gewinnen Sicherheit in der Umsetzung barrierefreier Lösungen.

Mit unserem Accessibility- & Usability-Test analysieren wir Ihre Website auf Barrieren und prüfen, ob sie den gesetzlichen Vorgaben entspricht. Sie erhalten eine fundierte Bewertung und gezielte Handlungsempfehlungen, um Ihre digitale Präsenz barrierefrei und rechtskonform zu gestalten.

Wir glauben fest daran, dass die Schaffung einer inklusiven Umgebung nicht nur ethisch richtig ist, sondern auch langfristig zu einem Wettbewerbsvorteil führen kann.