Digitale Inklusion: Tools und Hilfsmittel für barrierefreies UX Design

Barrierefreiheit in der digitalen Produktentwicklung bedeutet, dass niemand aufgrund körperlicher oder kognitiver Einschränkungen ausgeschlossen wird. Dabei geht es nicht nur um gesetzliche Vorgaben – sondern auch um bessere Nutzererlebnisse für alle. Ein durchdachtes, inklusives Design sorgt zum Beispiel für klarere Strukturen, verständlichere Sprache und eine bessere Bedienbarkeit – Aspekte, die allen zugutekommen.

Barrierefreiheit ist nicht nur ein Zeichen von Inklusion – sie ist ab Juli 2025 auch verpflichtend.

Seit dem 28. Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Es setzt die europäische Richtlinie European Accessibility Act (EAA) um und verpflichtet Unternehmen, ihre digitalen Produkte und Services barrierefrei zu gestalten – darunter z. B. Webseiten, Online-Shops, mobile Apps und Self-Service-Terminals.

Was bedeutet das konkret?

• Die gesetzlichen Anforderungen betreffen alle wirtschaftlichen Akteure, die digitale Produkte oder Dienstleistungen für Verbraucher:innen bereitstellen.
• Betroffen sind u. a. Bankdienstleistungen, E-Books, Online-Shopping, Mobilitätsdienste, Hardware mit Softwareoberfläche und Apps.
• Das Gesetz verpflichtet nicht nur zur Umsetzung – sondern auch zur nachweisbaren Einhaltung der Anforderungen.

Wer jetzt handelt, sorgt nicht nur für mehr Nutzerfreundlichkeit, sondern auch für rechtliche Sicherheit. Mit den richtigen Tools und einem barrierefreien Designprozess gelingt der Umstieg nachhaltig.

Wenn man Barrieren erkennen will, muss man sie erleben oder zumindest simulieren können. Diese Tools helfen dabei, sich in Menschen mit Sehbeeinträchtigungen hineinzuversetzen:

• Simulationsbrillen (z. B. bei Amazon erhältlich) zeigen, wie sich Sehbeeinträchtigungen wie Glaukom, Katarakt, AMD, Retinitis pigmentosa oder diabetische Retinopathie auswirken können.

• Der Farbenblindheit-Simulator simuliert Rot-, Grün- oder Blau-Blindheit: www.farbsehschwaeche.de/simulation

• Mit der Chrome-Erweiterung „Color Contrast Checker“ können Kontraste überprüft werden: digitala11y.com/products/color

Design-Tools wie Figma lassen sich durch hilfreiche Plugins erweitern, um barrierefreies Design direkt im Entwurfsprozess mitzudenken:

• Stark for Figma prüft Farbkontraste und Einhaltung der WCAG-Richtlinien: getstark.co/figma

• Color Blind Plugin simuliert verschiedene Formen von Farbenblindheit: Figma Plugin-Seite

• Accessibility Annotation Kit dokumentiert barrierefreie Elemente für die Übergabe an die Entwickler:innen: Annotation Kit bei Figma

Checklisten helfen dabei, an alle wichtigen Aspekte barrierefreier Gestaltung zu denken – besonders in komplexen Projekten oder in der Teamarbeit.

• BGWA-Checkliste für Web und Apps: handreichungen.bfit-bund.de/bgwa

• Checkliste für mobile Anwendungen: handreichungen.bfit-bund.de/ag03

Weitere Checklisten:

• Checkliste des Accessibility Resource Center von T-Mobile: https://www.magentaa11y.com/#/web-criteria/component/overview

• Checkliste der Schweizer Initiative „Zugang für alle“: „Zugang für alle“ (Schweiz) – Vorabversion

• Checkliste der Community-Initiative „A11Y Project“: The A11Y Project Checklist

Ob man bestehende Seiten analysieren oder neue Komponenten überprüfen will – diese Tools helfen bei der technischen Evaluation:

• Google Lighthouse (Open Source): developer.chrome.com/docs/lighthouse

• Accessibility Insights (Open Source): accessibilityinsights.io

• Farbanalyse: colorhexa.com

• Silktide Toolbar – Accessibility Checker: silktide.com

• Große Tool-Liste der W3C: w3.org/WAI/test-evaluate/tools/list

• Barrierefreiheitstest für fertige Android-Apps: support.google.com/accessibility/android

• Blog zur Barrierefreiheit: barrierefreiesblog.de
• Texte barrierefrei schreiben – Tipps vom W3C: w3.org/WAI/tips/writing/
• Inclusive Design Guidelines von Microsoft: inclusive.microsoft.design
• Microsoft Inclusive Activity Cards: Diese Karten unterstützen das barrierefreie Arbeiten in fünf Designphasen: Get orientated – Frame – Ideate – Iterate – Optimize: PDF-Download

• Project Banana: Beschreibt, wie ein kompletter barrierefreier Entwicklungsprozess abläuft: Projektvortrag PDF
• Beispiele barrierefreier Websites (BITV-Test): bitvtest.de

Barrierefreies Design verbessert die Nutzererfahrung für alle, nicht nur für Menschen mit Einschränkungen. Es schafft Klarheit, reduziert kognitive Last und macht digitale Produkte zukunftssicher. Wer UX ernst nimmt, kommt an digitaler Inklusion nicht vorbei.

Wenn ihr mehr erfahren wollt, wie sich UX und Barrierefreiheit gegenseitig stärken, schaut euch unseren Beitrag „Digitale Barrierefreiheit und UX“ an.

Ein zentraler Bestandteil unserer Projekte bei UID ist eine eigens entwickelte Checkliste, die sich an den WCAG-Richtlinien orientiert. Sie hilft dabei, Barrierefreiheit systematisch zu prüfen – und macht unsere Prozesse für alle Beteiligten transparent. Von dieser strukturierten Vorgehensweise profitieren sowohl Produktteams als auch Nutzer:innen.