Barrierefreie Website erstellen (mit Checkliste)

Eine barrierefreie Website zu erstellen scheint unter vielen Webdesignern und Agenturen immer noch unbeliebt zu sein, weil oft nicht ganz klar ist, was es alles zu beachten gibt.

Allerdings sprechen viele triftige Gründe dafür, seinen Internetauftritt für alle Menschen gleichermaßen zugänglich zu machen.

Damit du beim Gestalten deiner barrierefreien Website allen Anforderungen gerecht wirst und keinen wichtigen Punkt vergisst, haben wir diesen Artikel für dich verfasst.

Was ist überhaupt eine barrierefreie Website?

Ähnlich einer barrierefreien Wohnung soll eine barrierefreie Website Menschen mit Einschränkungen den Zugang bzw. die Nutzung erleichtern. Man spricht in diesem Kontext daher oft von der Accessibility (Zugänglichkeit) einer Website.

Allein in Deutschland gibt es etwa 7,5 Millionen schwerbehinderte Menschen und weitere 2,7 Millionen Menschen mit leichtem Behinderungsgrad. Für sie ist der Zugang zu einfach bedienbaren Websites umso wichtiger.

Für das Erstellen einer barrierefreien Website spricht eindeutig, dass sie von allen Nutzern gleichermaßen genutzt werden kann. Darüber hinaus zeigst du als Unternehmen, dass dir die soziale Komponente wichtig ist und vergrößert deinen Markt, weil auch Menschen mit Seh- oder Hörbehinderung so zu Kunden werden können.

Auch Suchmaschinen habe das Thema Accessibility immer mehr auf dem Schirm. Mit anderen Worten kann mehr Barrierefreiheit zu besseren Rankings in Google führen.

Ist barrierefreies Webdesign gesetzlich verpflichtend?

Ja, so oder so wenn es sich bei deiner Website um die Internetseite oder mobile App einer öffentlichen Stelle handelt – dann musst du den Nutzern einen barrierefreien Zugang ermöglichen. Und …

Ab Juni 2025 wird Der Europäische Barrierefreiheitsakt (EAA) verbindlich.

Ab Juni 2025 wird der Europäische Rechtsakt über die Barrierefreiheit (European Accessibility Act – EAA) verbindlich. Dann beginnt eine neue Ära der Zugänglichkeit.

Diese Anforderung hat ihren Ursprung in der europäischen Richtlinie 2016/2102, die in Deutschland auf Bundesebene durch das Behindertengleichstellungsgesetz (BGG) und die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) in nationales Recht umgesetzt wurde. Daher sind viele Webseiten von Gemeinden oder Städten schon heute barrierefrei gestaltet. Ein Beispiel dafür findest du weiter unten im Artikel.

Das heisst, dass deine Firmenhomepage Barrierefreiheit nicht mehr vernachlässigen kann! Mit dem EAA wird Barrierefreiheit über den öffentlichen Sektor hinaus zur verpflichtenden Norm für eine Vielzahl von Dienstleistungen und Produkten. Verstöße gegen diese Vorschriften werden ab Juni 2025 nicht nur mit Sanktionen belegt sein – Barrierefreiheit wird dann für alle eine gesetzliche Verpflichtung sein.

Anforderungen für barrierefreie Webinhalte

Es gibt mehrere Wege, um die Inhalte deiner Website barrierefreier zu gestalten.

Von Text und Bildern, bis hin zu den Kontaktformularen gibt es im Sinne der Barrierefreiheit einiges zu beachten.

Barrierefreie Texte

Damit deine Texte für alle Nutzer leicht zu verarbeiten sind, ist ein hoher Kontrast wichtig. Schwarzer Text auf weißem Hintergrund hat sich so eingebürgert, weil es für alle Beteiligten am angenehmsten zu lesen ist.

Um sicherzustellen, dass dein Text für alle Nutzerinnen und Nutzer gut lesbar ist, ist ein angemessener Kontrast entscheidend. Er sollte weder zu gering noch zu hoch sein. Schwarzer Text auf weißem Hintergrund ist ein Standard, weil er für die meisten Menschen angenehm zu lesen ist. Dieser Kontrast ist technisch einwandfrei, aber manche finden, dass dunkelgrauer Text auf weißem Hintergrund oder weißer Text auf dunkelgrauem Hintergrund für das Auge angenehmer ist.

Es mag schon sein, dass du als professioneller Webdesigner gerne deine Kreativität ausleben und mit verschiedensten grellen Farben arbeiten möchtest. Sei dir dabei aber bitte bewusst, dass es zu Lasten einer eingeschränkten Minderheit geht.

Die Schriftgröße und Schriftart der Website Texte sollte ebenfalls nicht ignoriert werden. Menschen mit einer Sehbehinderung fällt es schwer, deine Texte zu lesen, wenn die Schrift zu klein und in einer schnörkeligen Schriftart verfasst ist.

Unsere Empfehlung: Wähle eine Schriftgröße von mindestens 16px (1 rem) auf deiner Website. Außerdem sind Sans-Serif Schriftarten (z.B. Arial oder Verdana) im digitalen Bereich zu bevorzugen.

Verschiedene Webdesign Trends zeigen zwar, dass Schriftarten mit Serifen im Web immer mehr im Kommen sind, aber dann bitte nur für Überschriften, die von Haus aus größer geschrieben sind.

Ein weiterer wichtiger Punkt beim Verfassen von Texten für barrierefreie Websites ist die Verständlichkeit der Sprache.
Nicht jeder Besucher deiner Website ist ein studierter Germanist mit einem gewaltigem Wortschatz der deutschen Sprache.

Ganz im Gegenteil.

Wenn man bedenkt, dass etwa jeder 6. deutsche Erwachsene liest wie ein Zehnjähriger, dann ist es mehr als ratsam, deine Texte leicht verständlich zu verfassen.

Kurze Sätze mit kurzen Wörtern sind ein guter Anfang.

Mit dem sogenannten Fleschindex kannst du die Lesbarkeit deiner Texte berechnen. Dieser analysiert die Länge der Sätze und ob es sich um Wörter mit wenigen Silben handelt. Je höher dein Ergebnis beim Fleschindex, desto besser die Lesbarkeit und desto barrierefreier deine Texte.

Am besten, du gehst immer davon aus, dass du deine Texte für Kinder verfasst, die noch nicht so gut lesen können. Dann bist du auf der sicheren Seite.

Bilder

Selbst die Bilder einer Website können barrierefrei zur Verfügung gestellt werden. Das funktioniert mithilfe der sogenannten Alternativtexte – oft als “Alt-Texte” abgekürzt.

Alternativtexte sind dir vielleicht ein Begriff, falls du dich schon mal mit der Suchmaschinenoptimierung auseinandergesetzt hast. Da kommen sie ins Spiel, wenn relevante Suchbegriffe in den Alternativtexten der Bilder platziert werden sollen.

Im Kontext einer barrierefreien Website soll ein Alt-Text allerdings die Nutzung erleichtern, indem er das jeweilige Bild beschreibt. Das soll blinden Menschen ein Verständnis dafür geben, was auf einer bestimmten Website angezeigt wird.

Der Alternativtext muss dabei gar nicht extrem lang sein. Es reicht schon, wenn du in einer kurzen Phrase erklärst, was auf dem jeweiligen Bild zu sehen ist.

Videos

Videos sind für Menschen mit Sehbehinderung durch den Ton im Video etwas leichter zu verarbeiten. Für taube Nutzer oder hörbehinderte Menschen sieht die Sache ein wenig anders aus.

Achte daher bei sämtlichen Videos darauf, dass Untertitel (Closed Captions) vorhanden sind. Bei automatisch erzeugten Untertiteln, wie es zum Beispiel beim Hochladen von Videos auf YouTube der Fall ist, musst du ziemlich sicher im Nachgang etwas korrigieren.

Die künstliche Intelligenz ist zwar schon ganz gut, aber eben noch nicht perfekt.

Struktur

Die Struktur bzw. der Aufbau einer Website knüpft beim barrierefreien Text an. Wenn deine Besucher von einer Textwand begrüßt werden, springen sie schnell wieder ab.

Um das zu vermeiden arbeite bitte mit Absätzen, die nicht länger als 4 Zeilen lang sind und brich den Text mit anderen Elementen in kleinere Einheiten auf.

Dafür eignen sich besonders gut…

• Bullet Points
• Tabellen
• Bilder
• Videos
• Links gestaltet als Buttons
• Formulare

Zwischen diesen Elementen kannst du dann noch ein wenig Whitespace einfügen, um den Inhalten mehr Luft zu lassen und die Barrierefreiheit zu fördern.

Bei Formularen kann es tricky werden. Sie können für Nutzer mit Einschränkungen zur echten Hürde werden und deinem Unternehmen entgehen wertvolle Anfragen. Schau dir dafür die Kontaktformulare auf deiner Website im Detail an und prüfe, ob sie für alle Nutzer leicht verwendet werden können.

Übrigens:
Der Dark-Mode wird bei vielen Usern immer beliebter, weil er die Augen schont. Für Menschen mit einer Sehbehinderung wirkt er hingegen kontraproduktiv. Biete auf deiner Website den Dark-Mode daher nicht zwingend an, sondern maximal zum selbst Aktivieren.

Checkliste für barrierefreie Websites

Damit du den ein oder anderen Punkt bei der Umsetzung des barrierefreien Webdesigns nicht vergisst, gibt es hier noch eine praktische Checkliste:

• Schrift ist mindestens 16px groß (1 REM!)

• Sans-Serif Schriftarten benutzen

• Hoher Kontrast zwischen Text und Hintergrund

• Kurze und leicht verständliche Sätze

• Die richtige Struktur der Überschriften

• Bilder mit Alternativtext hinterlegen

• Untertitel bei Videos hinzufügen

• Absätze mit maximal 4 Zeilen

• Verschiedene Elemente im Aufbau nutzen

Wenn du dir nicht ganz sicher bist, inwieweit deine bestehende Website bereits die Anforderungen auf Barrierefreiheit erfüllt, dann kannst sie darauf testen.

Anbieter wie zum Beispiel Siteimprove helfen dir dabei eine Website auf Barrierefreiheit zu testen. Auch der Lighthouse Report von Chrome analysiert die jeweiligen Seite auf ihre Zugänglichkeit und zeigt mögliche Fehler an.

Wie funktioniert barrierefreies Lesen einer Website?

Damit blinde und sehbehinderte Menschen eine barrierefreie Website lesen können, bedienen sich sich eines Screenreaders.

Ein Beispiel dafür wäre der Nonvisual Desktop Access (NVDA). Die Software steht kostenlos zum Download zur Verfügung und wandelt alle Inhalte einer Website so um, dass sie für blinde Nutzer zugänglich sind.

Dies geht über das bloße Vorlesen der Website hinaus – was beim Begriff “Screenreader” ein wenig irreführend ist – weil NVDA Menüs einfach bedienbar macht und die komplette Interaktion mit der Website für sehbehindert Menschen verändert.

Eine barrierefreie Website muss im Endeffekt ausschließlich mit der Tastatur bedienbar sein.

Beispiele für barrierefreie Websites

Um dir zu zeigen, wie das alles in der Praxis funktioniert, haben wir hier noch ein paar Beispiele von barrierefreien Websites für dich zusammengefasst.

nachrichtenleicht

Die Seite von nachrichtenleicht.de ist ein perfektes Beispiel dafür, wie leicht verständliche Sprache auf einer Website aussehen. Solltest du schwerere Kost bei Texten gewohnt sein, dann wirken die Sätze von nachrichtenleicht.de etwas kindisch.

Für Menschen, deren Muttersprache nicht deutsch ist oder die Probleme mit komplizierten Formulierungen haben, ist die Seite jedoch perfekt.

Möchtest du deine Texte ebenfalls barrierefrei gestalten kannst du dich an diesem Best Practice orientieren.

iBoB

Bei iBoB handelt es sich um eine Plattform zur beruflichen Weiterbildung für blinde und sehbehinderte Menschen. In diesem Sinne ist schon irgendwie klar, dass die Website für diese Zielgruppe barrierefrei sein MUSS.

Das wird mit Blick auf die sehr große Schrift, den guten Kontrast und Farben, die für Menschen mit Rot-Grün-Schwäche geeignet sind, schnell deutlich.

Bei jedem Link, über den man mit dem Mauscursor fährt, wird sofort ersichtlich, dass es sich um ein klickbares Element handelt. Generell ist die gesamte Bedienung der Website sehr einfach und damit für alle Menschen zugänglich.

Stadt Bonn

Die Website der Stadt Bonn ist nur ein Beispiel von vielen Gemeinden, die ihre Internetseite bereits weitestgehend barrierefrei gestalten. Auf der Website gibt es sogar einen eigenen Bereich für Menschen mit Behinderung, die auf barrierefreie Informationen angewiesen sind.

Am modernen responsive Webdesign (wenn sich die Website automatisch an kleinere Bildschirme anpasst) ist schön zu sehen, wie Barrierefreiheit im Internet funktioniert.

Die einfache Navigation über das Menü hilft den Nutzern zudem, sich reibungslos durch die Website zu bewegen.

Barrierefreie Websites mit WordPress gestalten

Ist barrierefreies Webdesign mit WordPress überhaupt möglich?

Selbstverständlich!

Schließlich wird ein barrierefreier Internetauftritt hauptsächlich über das Design und die Darstellung der Inhalte definiert. All diese Punkte sind mit WordPress leicht umsetzbar.

Wichtig ist nur, dass du mit einem WordPress Theme arbeitest, mit dem du die wichtigsten barrierefreien Einstellungen leicht umsetzen kannst.

• Sind die Farbkombinationen leicht erkennbar?
• Ist die Schrift groß genug und die Schriftart nutzerfreundlich?
• Kannst du verschiedene Elemente leicht einbauen?
• Kann ich die Website auch mit meiner Tastatur bedienen?
• Haben alle Bilder einen Alternativtext?
• Gibt es einen starken Kontrast zwischen Text und Hintergrund?

All diese Fragen solltest du dir beim Erstellen einer barrierefreien Website mit WordPress stellen.

Vor allem bei den technischen Aspekten, die großen Einfluss auf die Barrierefreiheit einer Website haben, wird es schnell komplex.

Hier ist es unerlässlich, dass du von Anfang an auf ein passendes WordPress Theme setzt, welches allen technischen Anforderungen (z.B. richtig angelegten Menüs oder wie Formularfelder attribuiert sind) gerecht wird.

Fazit

Barrierefreie Websites sind für alle Unternehmen relevant.

Sie ermöglichen es, allen Menschen einen einfachen Zugang zu deinem Angebot zu machen. Dieser Artikel und die Checkliste helfen dir dabei deine eigene Internetseite barrierefrei zu gestalten.

Im Zweifelsfall kannst du eine Agentur für barrierefreie Websites beauftragen. Professionelle Webdesigner können dir dabei helfen, deine Website für alle Menschen besser zugänglich zu machen.