Ab dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) in Deutschland. Von da an sind viele Unternehmen verpflichtet, ihre Website barrierefrei zu gestalten.
Grund dafür ist, dass Menschen mit unterschiedlichen Fähigkeiten und Bedürfnissen problemlos und ohne Einschränkungen auf deine Inhalte zugreifen können.
Doch wie gestaltest du deine Website schon jetzt barrierefrei. Dazu habe ich dir 7 Tipps zusammengestellt.
1. Klare uns konsistente Navigation
1.1 Menü
Achte darauf, dass deine Website gut strukturiert ist und die Nutzer intuitiv durch deine Haupt- und Unterseiten navigieren können. Dazu sollte unter anderem dein Menü verständlich formuliert sein, das heißt, es muss klar sein, was sich hinter den Menüpunkten verbirgt und wohin die Besucher gelangen. Mit Unterstreichungen oder Farben kannst du dein Menü oder die Menüpunkte, in denen du dich gerade befindest, optisch hervorheben.
Eine erkennbare Struktur hilft auch dabei, dass die Nutzer*innen mit wenigen Klicks an ihr Ziel kommen.
1.2 Links
Eine gute Struktur zeichnet sich durch deutlich erkennbare Links aus, etwa durch farbliche Kennzeichnung, Unterstreichung oder dickere Schrift. In einem Text, wo viele Links nah beieinanderstehen, sollten sie durch ausreichenden Zeilenabstand und Schriftgröße leicht klickbar sein.
Außerdem ist es hilfreich, Links eindeutig mit dem Ziel zu beschreiben, wohin sie führen, damit Screenreader sie besser auslesen können.
Ein Beispiel:
Anstatt im Text zu schreiben „Weitere Informationen findest du hier“, wobei das Wort „hier“ den Link enthält, könntest du konkreter formulieren „Hier findest du weitere Informationen zu meinem Kurs ‚Yoga für Schwangere‘“, wobei „Kurs Yoga für Schwangere“ verlinkt ist. Es wäre gut, wenn der Hyperlinklink den Suchbegriff und das Link-Ziel vollständig enthält.
Das dient nämlich nicht nur der Barrierefreiheit, sondern zahlt auch direkt auf die Suchmaschinen-Optimierung ein, weil der Link ausgezeichnet ist und obendrein das Keyword enthält. Und am besten markierst du deine Links farblich und unterstreichst sie.
Wenn du URL Shortener (Kurz-URL-Dienste) wie zum Beispiel Bitly oder TinyURL nutzt, achte auch darauf, dass die Links im Text deutlich benannt werden, mit Titel und dem Verweis.
1.3 Buttons
Achte darauf, dass die Buttons auf deiner Website größer und deutlich erkennbar sind, damit sie gut gelesen und geklickt werden. Zudem schaffe genügend Abstand zwischen den Buttons, damit sie unterschieden werden können und nicht versehentlich der falsche Button angeklickt wird. Für Menschen mit visuellen oder motorischen Einschränkungen ist das hilfreich.
Was für den Text gilt, gilt auch für die Buttons. Formuliere klar und lieber länger, aber dafür zielführend: Statt „Mehr“ schreibe lieber das Keyword bzw. Link-Ziel „Yoga-Kurs für Schwangere“.
1.4 Hierarchie
Empfehlenswert für eine barrierefreie Website ist eine klare Seitenstruktur, eine nachvollziehbare Hierarchie mit Auszeichnung der Überschriften von Headline 1 bis maximal Headline 4. Wichtig dabei ist, dass jede Unterseite nur eine Überschrift 1 (H 1) hat, in der im besten Fall das Haupt-Keyword der Seite genannt wird.
Damit die Texte lesbar bzw. scanbar sind, nutze Absätze, ausreichend Zeilenabstand und verwende Aufzählungszeichen. Du kannst auch mit Kennzeichnungen wie Fetten arbeiten, wenn du Teile deines Textes hervorheben möchtest. Dazu gehören auch Zitate, wenn sie beispielsweise eingerückt oder farblich hinterlegt werden.
2. Schrift
Bei der Wahl einer Schrift kann man sich schnell verlieren oder auch darin verlieben. Es gibt unzählige und vor allem unfassbar schöne Schriften. Und oft sind es genau die schönen geschwungenen oder verschnörkelten Handschriften, die ausgesucht werden. Für eine barrierearme Website ist es jedoch entscheidend, dass sie auch für Menschen mit Sehbehinderungen, Lese- und Lernschwierigkeiten (wie Legasthenie) oder auch kognitiven Einschränkungen gut lesbar sind.
Moderne Webschriften wie zum Beispiel Arial, Verdana, Roboto Slab, Lato, Noto Sans, Nunito oder Open Sans sind klar und gut leserlich. Insbesondere die drei letztgenannten verwende ich gerne für Websites.
Eine weitere empfehlenswerte Schrift ist die Atkinson Hyperlegible. Sie ist ebenfalls eine kostenlose Google-Font und zeichnet sich dadurch aus, dass sie unter anderem die Zahl Null durch einen Querstrich deutlich vom Buchstaben O unterscheidet. Solche Schriftarten, bei denen sich Buchstaben und Zahlen deutlich voneinander abheben, helfen besonders Menschen mit Sehschwierigkeiten oder Legasthenie Buchstaben und Zahlen besser zu erkennen und voneinander zu unterscheiden.
Beim Einsatz von Schriften solltest du darauf achten, dass du nicht nur Großbuchstaben verwendest. Ein bis drei Wörter in Großbuchstaben auf einem Button sind in Ordnung, bei langen Überschriften, mit noch längeren Wörtern, wird es immer schwieriger zu lesen. Zudem sind der Buchstaben- und Zeilenabstand wichtig, damit die Buchstaben und Zeilen nicht zu dicht beieinanderstehen.
Text, der linksbündig ausgerichtet ist und im Flattersatz steht, ist am einfachsten lesbar. Texte im Blocksatz sind nicht zu empfehlen. Zentriert ausgerichteten Text kannst du dosiert einsetzen, aber nur für kurze Textabschnitte.
Auch die Schriftgröße spielt eine Rolle. Auf vielen Websites sind die Schriften viel zu klein und daher schwer les- und scanbar. Achte bitte daher auf eine entsprechende Schriftgröße, insbesondere bei mobilen Endgeräten. Wenn die Lichtverhältnisse draußen im Sonnenlicht nicht optimal sind und dann noch eine zu kleine Schrift dazu kommt (was mir übrigens auch bei vielen Newslettern auffällt), springen die Leser ab.
Was mich gleich zum Thema Kontraste bringt.
3. Farbkontraste
Die Texte sollten auf deiner Website lesbar sein. Achte auf einen ausreichenden Farbkontrast zwischen Text und Hintergrund, damit die Inhalte für Menschen – ob mit oder ohne eine Sehbeeinträchtigung – gut erkennbar sind. Die eingesetzten Farben sollten also nicht zu nah beieinanderliegen. Beispiele sind die Farben Orange und Rot oder hellgraue Schrift auf weißem Hintergrund. Und hierbei geht es nicht immer um Schwarz auf weißen Hintergrund, das wäre auch zu eintönig, sondern um den Kontrast zwischen den jeweiligen Farben.
Die Web Content Accessibility Guidelines (WCAG), der internationale Standard für die barrierefreie Gestaltung von Webinhalten, empfehlen ein Kontrastverhältnis von Text zu Hintergrund von mindestens 4,5:1.
Tool-Tipp: Mit diesem kostenlosen Tool Contrast Checker kannst du ganz schnell herausfinden, ob die Kontraste auf deiner Website ausreichend sind.
4. Texte
Es sagt sich immer so leicht, aber die Texte sollten einfach, verständlich und sinnvoll sein. Das gilt eigentlich für alle Texte, ist aber für Texte auf einer barrierefreien Website besonders wichtig.
Es gilt, was wir schon in der Schule gelernt haben: Kürzere Sätze sind besser als Schachtelsätze. Am besten keine Abkürzungen verwenden, denn Screenreader lesen sie nicht unbedingt so vor, wie sie ausgesprochen werden. Und wenn du eine Abkürzung verwendest, schreibe sie beim ersten Mal aus und erkläre sie.
Versuche auch, wenige Fremdwörter einzusetzen. Frag dich selbst: Möchtest du einen komplizierten Text mit langen Sätzen, vielen Fremdwörtern und in kleiner, verschnörkelter Schrift lesen?
5. Bilder
Bei jedem eingesetzten Bild solltest du einen aussagekräftigen Alternativtext (Alt-Text) hinterlegen. Zum einen lesen Screenreader die Alt-Texte vor. Zum anderen liest die Google-Suchmaschine sie aus und bewertet sie. Wird etwa ein Bild nicht geladen, wird der Alternativtext anstelle des Bildes angezeigt. Deshalb ist es wichtig, den Text auszufüllen.
In der WordPress-Mediathek ist es sehr einfach, einen entsprechenden Alt-Text bei den Bildern zu hinterlegen. Dieser sollte kurz nennen, was auf dem Bild zu sehen ist. Wenn ein Keyword zum Bild passt, sehr gerne unterbringen. Passt das Keyword nicht zum Bild, lass es lieber weg, um den User nicht zu verwirren.
Befinden sich viele Bilder in deiner Mediathek und nur wenige haben einen passenden Alt-Text, gibt es auch ein ganz nettes KI-basiertes Tool ALTTEXT.AI*, das dir zu jedem Bild einen passenden Alt-Text auswirft. Hier kannst du auch einfach angeben, ob und wenn ja, welches Keyword mit im Alternativtext genannt werden soll.
ALTTEXT.AI ist ein sehr hilfreiches Werkzeug, um sich Vorschläge anzeigen zu lassen. Es kann sogar sein, dass es dir Vorschläge liefert, auf die du nicht gekommen wärest. Dennoch rate ich immer dazu, die Texte nicht einfach zu übernehmen, sondern vor dem Einsatz zu prüfen, ob sie wirklich passen. Trotzdem hilft dir das Tool, Zeit zu sparen.
Und noch ein Tipp am Rande: In den verschiedenen Social-Media-Kanälen und Netzwerke wie Instagram, Facebook oder LinkedIn, um nur einige zu nennen, können Bilder auch mit einer Beschreibung versehen werden. Noch ist es auch besser, die Bilder zu beschreiben, als die Texte auf die Bilder oder Grafiken zu bringen, da diese noch nicht ausgelesen werden können.
6. Videos und Audios
Bitte untertitele deine gesprochenen Videos. Untertitel können einerseits vorgelesen werden. Bist du aber unterwegs und hast deine Kopfhörer mal nicht dabei, können die Untertitel zumindest gelesen werden. Außerdem müssen die Funktionen pausieren, stoppen, laut, leise unter dem Video vorhanden sein, damit die Benutzer es anhalten, laut oder leise stellen können.
Und noch ein kleiner Tipp: Inhalte mit Ton sollten auch nicht automatisch abgespielt werden, sobald eine Website angesehen wird. Das gilt auch nicht nur für Websites, die barrierefrei sein wollen, sondern generell. Nicht nur, dass es nervt, es ist auch schwer, das schnell abzustellen.
Auch bei Audio-Inhalten wie Podcast-Folgen können Transkripte als Alternative veröffentlicht werden. Das ist ein Mehraufwand, ich weiß, lohnt sich aber ungemein, denn so kann sich jeder Besucher und jede Besucherin deiner Website entscheiden, ob er oder sie heute hören oder lieber lesen möchte.
Dazu ein Tooltipp: Castmagic* erstellt Audio-Transkripte aus deinen Inhalten. Das Tool transkribiert wortwörtlich, weshalb du hinterher noch einmal über die Texte gehen und sie finalisieren musst, aber es spart dir enorm Zeit.
7. Responsive Design
Responsive Webdesign bedeutet, dass deine Website so gestaltet sein sollte, dass sie auf allen Geräten – egal ob Desktop, Tablet oder Smartphone – optimal dargestellt wird. Das betrifft das Layout, die Navigation und alle inhaltlichen Elemente deiner Website wie Schriftgrößen und Bilder.
Responsive Design und Barrierefreiheit haben das gleiche Ziel: Alle Menschen – unabhängig von ihren Fähigkeiten, ihrer Bildschirmgröße oder ihrem Zugriffsgerät – sollen eine Website problemlos nutzen können.
Konkret bedeutet es, dass zum Beispiel die Inhalte individuell vergrößert werden können, ohne dass Teile des Textes abgeschnitten oder unleserlich werden.
Stell daher sicher, dass deine Website auf allen Endgeräten und Bildschirmgrößen gut funktioniert, wenn du deine Besucher erreichen möchtest.
Es gibt noch weitere Tipps für eine barrierefreie Website, aber diese sieben helfen dir direkt, deine Website barrierefreier zu gestalten. Wenn du dazu Fragen hast, schreibe mir an kontakt@anitastrueby.com. Ich freue mich auf deine Nachricht.
Falls ich einen für dich wichtigen Tipp vergessen habe, freue ich mich über deine Ergänzung in den Kommentaren.
Die mit Sternchen* gekennzeichneten Links sind Affiliate-Links zu Tools. Wenn du darüber etwas kaufst, erhalte ich eine Provision. Für dich bleibt der Preis unverändert.
0 Kommentare