Barrierefreiheit beginnt nicht im Code, sondern bei der Planung. In diesem Beitrag erfährst Du, wie Du von Anfang an barrierefreie WordPress-Websites konzipierst – mit hilfreichen Figma-Tools und praxisnahen Tipps zur Umsetzung.
Barrierefreiheit ist eine der wichtigsten Anforderungen an moderne Websites, nicht nur technisch, sondern vor allem gestalterisch und konzeptionell.
Bei WordPress Website-Projekten wird die Barrierefreiheit (Accessibility) jedoch häufig erst in der technischen Entwicklungsphase berücksichtigt beziehungsweise, da kommen erst die Barrieren ans Licht. Dabei kann man viele Barrieren schon viel früher, nämlich in der Konzeption und im Design, entdecken und berücksichtigen.
Inhaltsverzeichnis
- Was bedeutet barrierefreies Web?
- Warum Barrierefreiheit schon bei der Konzeption beginnt.
- 10 Dinge, die Du bei der barrierearmen Konzeption beachten solltest.
- Figma-Add-Ons und Design Tools, die Dich unterstützen.
- Von der Konzeption zur Umsetzung in WordPress: Worauf es ankommt.
- Fazit: Barrierefreiheit ist ein Gestaltungsprinzip, kein Extra!
1. Was bedeutet barrierefreies Web?
Ein barrierefreies Web bedeutet, dass Websites und digitale Inhalte so gestaltet sind, dass sie von allen Menschen genutzt werden können, unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen.
Die Web Content Accessibility Guidelines (WCAG) definieren vier zentrale Prinzipien, die barrierefreie Webinhalte erfüllen sollten: wahrnehmbar, bedienbar, verständlich und robust. Jedes dieser Prinzipien wird durch konkrete Richtlinien und Erfolgskriterien ergänzt, die als Orientierung bei der barrierefreien Gestaltung von Websites dienen.
Die Erfolgskriterien sind in drei Stufen unterteilt: A – Muss-Kriterien (müssen erfüllt sein), AA – Soll-Kriterien (sollten erfüllt sein), AAA – Kann-Kriterien (können zusätzlich erfüllt werden).
Innerhalb der EU gilt eine Website als barrierefrei, wenn sie mindestens die Konformitätsstufe AA erfüllt.
Eine vollständige Übersicht aller Erfolgskriterien findest du hier:
Im Ganzen kann man zusammenfassen, dass ein barrierefreies Web folgendes ist:
- Wahrnehmbar (Perceivable)
Inhalte müssen so gestaltet sein, dass sie von allen Menschen – z. B. mithilfe von Alternativtexten, Untertiteln oder gutem Kontrast – wahrgenommen werden können, unabhängig davon, ob sie sehen, hören oder lesen können. - Bedienbar (Operable)
Alle Funktionen der Website müssen nutzbar sein – auch ohne Maus, mit Tastatur, Sprachsteuerung oder anderen Eingabemethoden – und dürfen niemanden durch Zeitdruck oder Reize ausschließen. - Verständlich (Understandable)
Inhalte und Bedienung sollten klar, einheitlich und nachvollziehbar sein – mit einfacher Sprache, logischer Navigation und hilfreicher Unterstützung bei Eingabefehlern. - Robust (Robust)
Websites müssen mit verschiedenen Geräten, Browsern und Hilfsmitteln kompatibel sein – heute und zukünftig –, damit sie von allen zuverlässig genutzt werden können.
Barrierefreiheit im Web sorgt dafür, dass niemand ausgeschlossen wird – und verbessert die Nutzungsfreundlichkeit für alle.
Für wen ist ein barrierefreies Web besonders wichtig?
Ein barrierefreies Web unterstützt Menschen mit ganz unterschiedlichen Bedürfnissen – zum Beispiel mit:
- eingeschränktem Sehvermögen oder Blindheit,
- Hörbeeinträchtigungen oder Gehörlosigkeit,
- motorischen Einschränkungen, etwa bei der Nutzung von Maus oder Touchscreen,
- kognitiven Beeinträchtigungen oder Lernschwierigkeiten.
Auch ältere Personen, Menschen mit temporären Einschränkungen (z. B. nach einer Verletzung), oder Menschen in herausfordernden Nutzungssituationen (z. B. unterwegs oder bei schlechtem Empfang) profitieren von barrierefreier Gestaltung.
Damit digitale Angebote wirklich für alle zugänglich sind, reicht es nicht, nur an einzelne Bedürfnisse zu denken, Barrierefreiheit muss systematisch geplant und umgesetzt werden. Genau deshalb gibt es verbindliche Standards und gesetzliche Vorgaben, an denen sich gute barrierefreie Gestaltung orientiert:
- die Web Content Accessibility Guidelines (WCAG) als internationaler Standard,
- die EU-Richtlinie 2016/2102 zur Barrierefreiheit digitaler Angebote öffentlicher Stellen,
- die darauf basierende deutsche Barrierefreie-Informationstechnik-Verordnung (BITV),
- und das Barrierefreiheitsstärkungsgesetz (BFSG), das ab dem 28. Juni 2025 auch viele private Unternehmen verpflichtet, ihre digitalen Produkte und Dienstleistungen barrierefrei zu gestalten.
Diese Regelwerke setzen klare Anforderungen, fördern Inklusion – und schaffen gleichzeitig rechtliche Sicherheit für Anbieter digitaler Inhalte.
Für wen ist Barrierefreiheit verpflichtend und seit wann?
Verpflichtend für:
- Öffentliche Stellen des Bundes und der Länder
(z. B. Ministerien, Behörden, Schulen, Hochschulen) - Kommunale Einrichtungen
(z. B. Rathäuser, Bibliotheken, öffentliche Dienstleister) - Teilweise auch privatrechtlich organisierte Einrichtungen,
wenn sie öffentliche Aufgaben erfüllen oder staatlich finanziert werden.
Seit wann?
BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung):
Seit Mai 2019 müssen Websites und mobile Anwendungen öffentlicher Stellen barrierefrei sein.
EU-Richtlinie 2016/2102 wurde in Deutschland durch das Barrierefreiheitsstärkungsgesetz (BFSG) ergänzt, das weitere Anforderungen für digitale Produkte regelt.
Achtung! Ab 2025 – neue Pflichten für die Privatwirtschaft:
Das Barrierefreiheitsstärkungsgesetz verpflichtet ab 28. Juni 2025 auch bestimmte private Unternehmen zur digitalen Barrierefreiheit – z. B. bei:
- Online-Shops
- Banking-Apps
- E-Book-Readern
- Ticketautomaten
- Kommunikationsdiensten
- weitere Bereiche finden sie hier.
Mehr dazu in unserem Blogbeitrag
Ausgenommen sind Kleinstunternehmen, wenn sie weniger als 10 Beschäftigte und unter 2 Mio. Euro Jahresumsatz haben.
Haben Sie Fragen oder benötigen Sie Hilfe?
Ist Ihre Website von der Barrierefreiheits-Pflicht betroffen?
Wir unterstützen Sie dabei, Klarheit zu schaffen – und barrierefrei zu gestalten.
2. Warum Barrierefreiheit schon bei der Konzeption beginnt.
Barrierefreiheit ist kein technisches Detail, das erst am Ende geprüft wird, sie beginnt bereits in der Konzeption und im Designprozess. Barrierefreiheit ist ein Gestaltungsprinzip, kein Extra. Eine Website barrierearm zu gestalten ist eine interdisziplinäre Aufgabe, bei der die Verantwortung bei allen Beteiligten des Projektes liegt, während der Konzeption, Designs, Programmierung und redaktioneller Arbeit.
Früh getroffene Design-Entscheidungen zu Farben, Layout, Navigation oder Typografie bestimmen maßgeblich, ob Inhalte zugänglich sind oder ungewollte Barrieren entstehen. Wer auf ausreichende Kontraste achtet, klare Strukturen schafft und Informationen nicht nur visuell vermittelt, legt den Grundstein für ein inklusives Nutzungserlebnis und spart späteren Korrekturaufwand. Des Weiteren gibt es Vorteile, die man aus einer frühzeitig geplanten Barrierefreiheit für sein Projekt zieht:
- Bessere Usability für alle
Klare Strukturen, gute Lesbarkeit und einfache Bedienung verbessern das Nutzungserlebnis, unabhängig von individuellen Einschränkungen. - Rechtliche Absicherung
Für öffentliche Stellen ist Barrierefreiheit verpflichtend, für viele private Anbieter wird sie zunehmend relevant, frühzeitige Umsetzung schafft Sicherheit. - Größere Reichweite
Barrierefreie Inhalte sind für mehr Menschen zugänglich, auch bei eingeschränkter Technik, mobiler Nutzung oder individuellen Bedürfnissen.
- Positiver Einfluss auf SEO
Suchmaschinen bewerten gut strukturierte, zugängliche Inhalte besser, eine barrierearme Gestaltung verbessert die Sichtbarkeit. - Wirtschaftlicher Vorteil
Wer Barrierefreiheit von Anfang an mitplant, vermeidet teure Nachbesserungen und spart Ressourcen im Projektverlauf.
3. 10 Dinge, die Du bei der barrierefreien Konzeption beachten solltest.
Diese Aspekte sollten bereits in der Konzeption und im Designprozess berücksichtigt werden:
- Ausreichende Farbkontraste
Inhalte müssen auch für Menschen mit Sehbeeinträchtigungen gut lesbar sein. - Klar strukturierte Layouts und Überschriften
Visuelle Hierarchien und logische Struktur erleichtern die Orientierung. - Lesefreundliche Schriften und skalierbare Schriftgrößen
Gut erkennbare Schriftarten und flexible Anpassung für unterschiedliche Bedürfnisse. - Einfache Sprache und verständliche Inhalte
Klare, prägnante Formulierungen helfen allen Nutzergruppen. - Tastaturbedienbarkeit mit sichtbarer Fokusführung
Alle Funktionen sollten ohne Maus zugänglich und sichtbar fokussierbar sein. - Alternativtexte für Bilder und Icons
Visuelle Inhalte müssen für Screenreader sinnvoll beschrieben sein. - Keine ausschließliche Bedeutung durch Farbe
Farben dürfen nicht allein Informationen transportieren (z. B. bei Statusanzeigen). - Barrierefreie Formulare
Mit klar beschrifteten Feldern, nachvollziehbarer Reihenfolge und verständlichen Rückmeldungen. - Responsives, skalierbares Design
Funktioniert auf allen Geräten und bei individueller Vergrößerung. - Zugängliche Interaktionen und Medien
Animationen, Modale und eingebettete Inhalte müssen klar, steuerbar und nutzbar sein.
4. Figma-Add-Ons und Design Tools, die Dich unterstützen.
Barrierefreiheit beginnt auch im Design – und genau hier kann Figma mit passenden Add-ons und Plugins wertvolle Unterstützung leisten. Tools wie Stark oder Able helfen dir dabei, Farbkontraste direkt im Entwurf zu prüfen und so visuelle Barrieren frühzeitig zu vermeiden. Mit Color Blind kannst du deine Designs aus der Perspektive verschiedener Farbsehstörungen simulieren, um sicherzustellen, dass alle Nutzer Inhalte gut erfassen können.
Auch für Struktur und Zugänglichkeit bieten sich hilfreiche Werkzeuge an: Plugins zur Annotierung von Barrierefreiheitsanforderungen erleichtern die Kommunikation mit Entwicklungsteams, während Grid- und Hierarchie-Tools dabei helfen, übersichtliche Layouts mit klaren Navigationspfaden zu gestalten. Besonders bei der Erstellung von Designsystemen lohnt es sich, Barrierefreiheit als festen Bestandteil zu integrieren – so lassen sich wiederverwendbare, zugängliche Komponenten konsistent einsetzen.
Nützliche Figma-Add-ons und Tools:
- Stark – Kontrastprüfung, Farbsehstörungen, WCAG-Check
- Able – Barrierefreie Farbpaare und Kontrastanalyse
- Color Blind – Simulation von Farbsehstörungen
- A11y Annotation Kit und Include – Kommentare und Hinweise zur Accessibility direkt im Design
- Contrast – Einfacher Kontrastvergleich in Echtzeit
- Grids & Layout Tools – Unterstützung für klare visuelle Struktur
- Hier findest Du weitere Plugins für Figma für Thema Barrierefreiheit
Warum Design-Tools helfen
Gute Tools erleichtern die Umsetzung von Barrierefreiheit im Alltag:
- Frühe Erkennung von Designfehlern
- Simulation realer Nutzungsszenarien
- Bessere Zusammenarbeit mit Entwicklungsteams
- Grundlage für konsistente, zugängliche Komponenten
5. Von der Konzeption zur Umsetzung in WordPress: Worauf es ankommt.
Damit aus einem barrierefreien Design auch eine barrierefreie Website wird, ist eine saubere Übergabe und Kommunikation zwischen Design und Entwicklung entscheidend. Gerade bei WordPress-Projekten, bei denen oft Themes, Plugins und individuelle Programmierungen zum Einsatz kommen, sollte das Designteam wichtige Accessibility-Anforderungen klar dokumentieren.
Worauf es bei der Übergabe ankommt:
- Dokumentation barrierefreier Elemente
Markiere im Design, welche Kontraste eingehalten wurden, wo Fokuszustände notwendig sind, welche Bedienelemente per Tastatur erreichbar sein müssen oder wo ARIA-Labels vorgesehen sind. - Komponenten beschreiben statt nur gestalten
Gib nicht nur visuelle Hinweise, sondern beschreibe auch die funktionale Bedeutung – z. B. dass ein Button nicht nur dekorativ, sondern als Navigationselement gedacht ist, oder dass ein Modal barrierefrei geschlossen werden können muss. - Responsivität und Skalierbarkeit mitdenken
Erkläre, wie sich Layout und Inhalte bei unterschiedlichen Bildschirmgrößen verhalten sollen – so bleibt das responsive Verhalten konsistent und zugänglich.
- Texte, Alternativen und Semantik mitliefern
Liefere Alt-Texte für Bilder, sinnvolle Linktexte, Beschriftungen für Formulare sowie Hinweise zu semantischen HTML-Strukturen mit. - Plugin-Auswahl kritisch hinterfragen
Weist du auf Plugins hin, die verwendet werden sollen, prüfe sie vorher auf Barrierefreiheit – manche erzeugen z. B. Pop-ups oder Slider, die schwer zugänglich sind.
Tipp für Teams: Erstelle ein Accessibility-Dokument oder nutze ein Kommentarsystem im Design-Tool (z. B. Figma-Include), um Anforderungen festzuhalten. Eine strukturierte Übergabe hilft nicht nur Entwicklern und Entwicklerinnen, sondern spart Zeit und Nachbesserungen im späteren Projektverlauf.
6. Fazit: Barrierefreiheit ist ein Gestaltungsprinzip, kein Extra!
Barrierefreiheit sollte nicht als Zusatz oder nachträgliche Korrektur verstanden werden, sondern als fester Bestandteil jedes Design- und Entwicklungsprozesses – gerade bei WordPress-Websites. Sie beginnt nicht im Code, sondern bereits in der Konzeption: bei Farbwahl, Struktur, Navigation, Sprache und Nutzerführung.
Frühzeitige Entscheidungen für barrierefreie Gestaltung verbessern nicht nur die Zugänglichkeit für Menschen mit Einschränkungen, sondern steigern die Usability für alle, erweitern die Reichweite, sorgen für rechtliche Sicherheit – und unterstützen ganz nebenbei auch die Suchmaschinenoptimierung.
Tools wie Figma-Add-ons, Checklisten und barrierebewusste Designsysteme helfen dabei, Barrierefreiheit schon im Designprozess mitzudenken. Ebenso wichtig ist eine gute Übergabe an die Entwicklung, damit das Design nicht nur optisch, sondern auch technisch barrierefrei umgesetzt werden kann.
Ob öffentliche Einrichtung oder Unternehmen – barrierefreie Webangebote sind heute nicht nur Pflicht, sondern Ausdruck einer verantwortungsvollen digitalen Gestaltungskultur.
Kurz gesagt: Barrierefreiheit ist kein Nice-to-have – sie ist ein Qualitätsmerkmal moderner, zukunftsfähiger Websites.
Zur Erstellung der Grafiken wurde eine KI zur Hilfe gezogen.
Nina Nowikow