# Barrierefreiheit in der UI/UX Gestaltung: Ein Muss für Inklusivität ## Barrierefreiheit in der UI/UX Gestaltung: Ein Muss für Inklusivität ### Jacqueline Dähn ![Porträt von Jacqueline „Jackie“ Dähn, Creative Director und Co-Founder bei Digit-One](https://www.digit-one.com/_next/image?url=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fp48sl94f%2Fproduction%2F5efe16045e84529b352a1a8b976144bd6b4f95d5-1920x1152.jpg&w=1920&q=75) Creative Director & Co-Founder @ Digit-One 2024-01-10 Barrierefreiheit in der UI/UX-Gestaltung ist mehr als nur ein Trend – sie ist eine entscheidende Säule für eine inklusive und zugängliche digitale Welt. Erkunden wir gemeinsam die bewährten Praktiken und Prinzipien. ## **Barrierefreiheit in der UI/UX Gestaltung** - Ein Muss für Inklusivität 2 Minuten ## Einleitung In Europa leben etwa 87 Millionen Menschen mit unterschiedlichen Fähigkeiten, die nicht immer mit den Standards konventioneller Webstrukturen übereinstimmen. **Barrierefreiheit im Web** zielt darauf ab, digitale Inhalte für jede Person zugänglich zu gestalten – unabhängig von körperlichen, technischen oder geistigen Unterschieden. 95 % der Menschen mit Behinderungen haben ihre Einschränkungen erst im Laufe ihres Lebens erworben, was die Bedeutung von **Accessibility** und **barrierefreiem Design** unterstreicht. ## Barrierefreiheit im Web umsetzen Ein bekanntes Beispiel für Barrierefreiheit sind die universellen Symbole, wie das WC-Symbol. Diese Symbole erleichtern unseren Alltag, indem sie klare Informationen bieten. Ähnlich definieren die Web Content Accessibility Guidelines (**WCAG 2.2**) die Struktur und Funktionalität von Webinhalten. ### WCAG Prinzipien Die **WCAG Prinzipien** umfassen vier Hauptkategorien: 1. **Wahrnehmbarkeit**: Inhalte sollten von allen User:innen wahrgenommen werden können. Dazu gehört die Verwendung von **Alt-Text** für Bilder und anpassbarer Schriftgröße. 2. **Bedienbarkeit**: Inhalte sollten jederzeit zugänglich sein, z.B. durch **Tastaturnavigation** und die Möglichkeit, Videos zu pausieren. 3. **Verständlichkeit**: Inhalte müssen klar und nachvollziehbar sein, was die Struktur und Sprache betrifft. 4. **Robustheit**: Inhalte sollten von aktuellen und zukünftigen Technologien, wie **Screenreadern**, unterstützt werden. ### European Accessibility Act (EAA) Der **European Accessibility Act** (EAA) ist ein bedeutender Schritt, um sicherzustellen, dass alle Menschen Zugang zu digitalen Inhalten haben. Die Umsetzung dieser Gesetze erfordert ein **inklusives Design**, das die Bedürfnisse aller Nutzer:innen berücksichtigt. ## Tipps für barrierefreies UI/UX Design ### 1\. Richtige Wahl von Farben und Kontrasten Achte darauf, dass das **Kontrastverhältnis** zwischen Text und Hintergrund mindestens 4,5:1 beträgt. Dies ist entscheidend für Menschen mit **Farbenblindheit**. Verwende zudem Icons zur Unterstützung von Text. ### 2\. Textabschnitte kurz halten Kurze Textabschnitte und eine klare Schriftart verbessern die Lesbarkeit, insbesondere für Menschen mit Lese- oder Sehschwierigkeiten. Die WCAG empfiehlt, die Anzahl der Zeichen pro Zeile auf unter 80 zu beschränken. ### 3\. Klare Fokus States **Fokus States** sind wichtig für Nutzer, die mit der Tastatur navigieren. Sie müssen klar angezeigt werden, um eine reibungslose Navigation zu gewährleisten. ### 4\. Konsistente Userführung Eine konsistente Gestaltung und Benutzerführung ist entscheidend. Elemente sollten einheitlich agieren, damit Nutzer sich nicht fragen müssen, wie sie sich auf der Website bewegen können. ## Fazit **Digitale Barrierefreiheit** ist keine Option, sondern eine Notwendigkeit, um eine inklusive digitale Landschaft zu schaffen. Die Umsetzung von **barrierefreien Designpraktiken** ist nicht nur eine ethische Verpflichtung, sondern auch eine Chance zur Verbesserung der **nutzerzentrierten Zugänglichkeit**. Jedes Design sollte darauf abzielen, Barrieren abzubauen und eine nahtlose, zugängliche Erfahrung für jede Person zu schaffen. ### Mehr dazu: - [Digit-One Agentur](https://digit-one.digit-prev.com/de/agentur) - [UX/UI Design](https://www.digit-one.com/leistungen/ux-ui-design) [Mehr über UX/UI-Design](https://www.digit-one.com/leistungen/ux-ui-design) Mehr erfahren [Jetzt kontaktieren](mailto:jacqueline.dähn@digit-one.com) ### Jacqueline Dähn Creative Director & Co-Founder @ Digit-One “Interesse geweckt? Gerne erzähle ich dir mehr!”