Wie man inklusive digitale Welten mit barrierefreiem Design gestaltet

Barrierefreies Design konzentriert sich darauf, Websites zu erstellen, die von allen genutzt werden können – unabhängig von Alter, Situation oder Beeinträchtigung. Ziel des barrierefreien Designs ist es, Hindernisse zu verhindern und zu beseitigen, die Menschen mit Behinderungen daran hindern, das Web zu nutzen und darauf zuzugreifen.

In letzter Zeit haben Aufsichtsbehörden wie die Equality and Human Rights Commission (EHRC) im Vereinigten Königreich, entsprechende Stellen in der EU und das US-Justizministerium (DOJ) ihren Fokus auf Web-Barrierefreiheit verstärkt und alle Unternehmen dazu ermutigt, es ihnen gleichzutun. Dadurch wird sichergestellt, dass jeder – insbesondere Menschen mit Seh-, Hör- oder kognitiven Beeinträchtigungen – digitale Inhalte nutzen und darauf zugreifen kann. Zudem hilft es Ihnen, die universellen Barrierefreiheitsrichtlinien der Web Content Accessibility Guidelines (WCAG) einzuhalten.

Im Folgenden gehen wir darauf ein, was barrierefreies Design umfasst, welche Prinzipien es gibt, wie Sie diese umsetzen und wie Sie eine barrierefreie Website erhalten – auch wenn sich Ihre Website oder die Richtlinien zur Barrierefreiheit ändern.

Globus-Symbol neben Text mit der Aufschrift "Über 96 % der weltweit führenden eine Million Webseiten sind nicht barrierefrei."

Die Grundlagen des barrierefreien Designs

Nicht barrierefreie Websites sind heutzutage leider weit verbreitet. Über 96 % der weltweit führenden eine Million Startseiten sind nicht barrierefrei(opens in a new tab). Das bedeutet, dass nur 4 % der beliebtesten Websites von Menschen mit Behinderungen genutzt werden können. Für Unternehmen bleibt dadurch ein riesiger, wachsender Markt weitgehend unerschlossen. Durch mehr Barrierefreiheit können Sie Ihre Reichweite erhöhen und Ihre Marke stärken. Noch wichtiger ist jedoch, dass Sie Innovationen fördern und allen Nutzern die Interaktion mit Ihrer Website ermöglichen.

Unterschied zwischen barrierefreiem und inklusivem Design

Es ist wichtig zu wissen, dass barrierefreies Design sich vom inklusiven Design unterscheidet – vor allem in ihren Zielsetzungen.

Barrierefreies Design zielt darauf ab, eine Erfahrung zu bieten, die Menschen mit Behinderungen nicht diskriminiert. Der Ansatz konzentriert sich stärker auf klare Ergebnisse, z. B. eine benutzerfreundliche Oberfläche für Menschen mit Seh- oder Hörbeeinträchtigungen.

Ähnlich wie barrierefreies Design strebt inklusives Design eine gute Nutzererfahrung an. Allerdings geht inklusives Design noch einen Schritt weiter, indem es ein gutes Design für alle schafft – nicht nur für Menschen mit Behinderungen.

Die vier Prinzipien des barrierefreien Designs

Veröffentlicht vom World Wide Web Consortium (W3C)(opens in a new tab), schaffen vier Prinzipien des Webdesigns eine barrierefreie Nutzererfahrung. Jedes Prinzip steht für eine Reihe von Richtlinien, die in den WCAG festgelegt sind und befolgt werden müssen, um Barrierefreiheit, Nutzbarkeit und Lesbarkeit zu gewährleisten.

Die vier Prinzipien sind:

• Wahrnehmbar: Können Nutzer Informationen und Zusammenhänge leicht erkennen? Nutzer sollten die Informationen wahrnehmen können; nichts sollte für alle Sinne unsichtbar sein.

• Bedienbar: Kann der Nutzer problemlos mit den Inhalten interagieren? Ihre Website sollte keine Aktionen enthalten, die ein Nutzer nicht ausführen kann. Beispielsweise sollten Funktionen, die mit der Maus verfügbar sind, auch per Tastatur bedienbar sein.

• Verständlich: Kann der Nutzer die präsentierten Inhalte verstehen? Beispielsweise sollten Inhaltsersteller (wie Influencer oder Multimedia-Produzenten) klare, einfache Sprache für Bildunterschriften oder Beschreibungen verwenden. Ebenso sollten Autoren darauf achten, dass Inhalte lesbar sind und keine komplizierte Sprache verwenden.

• Robust: Ist die Website robust genug, um mit verschiedenen Technologien zu funktionieren, einschließlich unterstützender Technologien wie Screenreadern?

Im Wesentlichen helfen die oben genannten POUR-Prinzipien dabei, ein barrierefreies Webdesign zu schaffen, das auf die Bedürfnisse der Community mit Behinderung eingeht und gleichzeitig eine Unternehmenskultur der Barrierefreiheit aufbaut.

Wer profitiert von barrierefreiem Design?

Barrierefreies Design kommt allen zugute – nicht nur Menschen mit Behinderungen. Zwar sorgt barrierefreies Design dafür, dass Menschen mit unterschiedlichen Behinderungen eine Website nutzen und navigieren können, aber alle Nutzer profitieren von Barrierefreiheit.

Beispielsweise ermöglichen Untertitel gehörlosen oder schwerhörigen Nutzern das Ansehen von Videos oder erlauben es nicht behinderten Menschen, Videos in lauter Umgebung zu schauen. Ebenso liest Sprachausgabe Webinhalte für blinde, farbenblinde oder sehbehinderte Nutzer vor, ist aber auch für alle hilfreich, die nicht direkt vor dem Bildschirm oder Gerät sitzen.

Für Organisationen bedeutet barrierefreies Design eine größere Reichweite und Zielgruppe für Ihre digitalen Angebote. Außerdem kann es dazu beitragen, das Risiko von rechtlichen Ansprüchen wegen fehlender Barrierefreiheit zu verringern.

Bild eines Kompasses, umgeben von fünf Barrierefreiheitsstandards: WCAG, Section 508, ADA, ARIA und EN 301 549.

Fünf Gesetze und Standards zur Barrierefreiheit, die Sie kennen sollten

Eine barrierefreie Website bereitzustellen, ist auch eine gesetzliche Verpflichtung. Gesetze wie der Americans with Disabilities Act (ADA), Section 508, ARIA und andere verlangen von öffentlichen und privaten Unternehmen die Einhaltung von Web-Barrierefreiheitsstandards. Die Nichteinhaltung kann zu rechtlichen Schritten führen, die eine große Belastung für Ihr Unternehmen darstellen können.

Im Folgenden stellen wir die fünf wichtigsten Barrierefreiheitsstandards vor, die Organisationen einhalten sollten.

• WCAG (Web Content Accessibility Guidelines): Die neueste Version der WCAG (2.2) gilt weltweit, u. a. in den USA, Kanada, Großbritannien, Australien und Japan, als Richtlinie für barrierefreies, universelles Design. Die WCAG ist in drei Konformitätsstufen unterteilt (Level A, AA und AAA); digitale Inhalte, die die Erfolgskriterien von WCAG 2.2 Level A und AA erfüllen, gelten im Allgemeinen als barrierefrei.

• Americans with Disabilities Act (ADA): Der ADA ist ein US-amerikanisches Bürgerrechtsgesetz, das Diskriminierung von Menschen mit Behinderungen verbietet. Titel III des Gesetzes bezieht sich speziell auf öffentliche Einrichtungen, zu denen laut DOJ auch Websites gehören. Um als ADA-konform zu gelten, müssen Organisationen sicherstellen, dass Menschen mit Behinderungen ihre Website problemlos nutzen und navigieren können. Die Nichteinhaltung kann zu rechtlichen Schritten führen.

• EN 301 549: Ähnlich wie Section 508 ist EN 301 549(opens in a new tab) ein europäisches Barrierefreiheitsgesetz, das verlangt, dass Websites, mobile Anwendungen und Software für alle Nutzer, einschließlich Menschen mit Behinderungen, zugänglich sind. Das Gesetz gilt speziell für Organisationen des öffentlichen Sektors in Europa sowie für private Unternehmen, die im öffentlichen Sektor Europas tätig sind.

• ARIA (Accessible Rich Internet Applications): Auch bekannt als WAI-ARIA(opens in a new tab), ist ARIA eine Sammlung von Rollen und Attributen, die dem HTML-Code hinzugefügt werden können. Die ARIA-Richtlinien wurden vom W3C als technischer Standard entwickelt, um bislang nicht barrierefreie Bereiche des Webs für Nutzer unterstützender Technologien zugänglich zu machen. Ältere HTML-Versionen enthielten zum Beispiel keine Tags, die Webelemente wie Menüs oder Fortschrittsbalken beschreiben konnten. Dadurch waren diese für manche Nutzer nicht zugänglich. ARIA löst dies durch Rollen wie „Menü“ oder „Slider-Bild“, die die hinzugefügten Elemente im semantischen HTML-Code beschreiben.

Diese Richtlinien helfen dabei, gesetzliche Anforderungen und ethische Überlegungen zur Inklusion in Einklang zu bringen. Durch die Einhaltung dieser Standards können digitale Inhaltsersteller ein barrierefreieres Interface-Design schaffen, das allen zugutekommt.

Praxisbeispiele für barrierefreies Design

Beim Design einer barrierefreien Website sollten Sie verschiedene Arten von Behinderungen berücksichtigen – darunter Seh-, Hör-, motorische, kognitive oder eine Kombination dieser Beeinträchtigungen. Nachfolgend einige Beispiele, wie Sie mit diesen Einschränkungen im Hinterkopf gestalten können:

• Tastaturnavigation: Für Nutzer mit eingeschränkter Mobilität oder Screenreader-Nutzer sorgt die Tastaturnavigation dafür, dass sie sich trotzdem auf einer Website bewegen können. Beispielsweise können Nutzer, die einen Termin vereinbaren oder ein Formular ausfüllen möchten, dies über Tastaturkürzel oder unterstützende Technologien tun.

• Alt-Text: Kurz für Alternativtext, wird Alt-Text verwendet, um Bilder und andere Medieninhalte auf einer Webseite zu beschreiben. So können blinde oder sehbehinderte Nutzer beispielsweise beim Online-Shopping Bilder von Kleidung oder Lebensmitteln verstehen und so Kaufentscheidungen treffen.

• Überschriften und Header-Tags: Die Verwendung der richtigen Überschriften und Header-Tags (z. B. H1, H2 und H3) erleichtert es Nutzern, die auf Screenreader angewiesen sind, die Seite zu navigieren. So können sie dem Aufbau eines Blogbeitrags oder einer Nachricht leichter folgen, ohne den Überblick zu verlieren.

Barrierefreies Design in die UX integrieren

Wie oben erwähnt, erweitert barrierefreies Webdesign die Reichweite Ihrer Website und erschließt ein großes Publikum. Es gibt jedoch wichtige Merkmale, die im Design enthalten sein müssen, um die Nutzererfahrung insgesamt zu verbessern – auch für Menschen ohne Behinderung. Im Folgenden zeigen wir, wie Sie Barrierefreiheit in ein UX-Design integrieren können.

Bestandteile eines barrierefreien UX-Designs

• Navigation und Struktur: Da nicht alle Nutzer eine Maus zur Navigation verwenden, sollte eine Website zusätzliche Navigationsmöglichkeiten wie Tastaturkürzel oder Sprachbefehle bieten. Außerdem sollte die Struktur Ihrer Inhalte klar und leicht nachvollziehbar sein. Eine Möglichkeit, beides zu erreichen, ist der Aufbau einer Informationsarchitektur und die Zuordnung der Inhalte dazu.

• Starkes visuelles Design: Die visuellen Elemente Ihrer Website beeinflussen die Barrierefreiheit maßgeblich. Richtig eingesetzt helfen sie Nutzern, sich auf einer Seite zurechtzufinden und Aufgaben zu erledigen. Um Ihr visuelles Design zu verbessern, achten Sie auf:
  -Angemessener Farbkontrast (ein Farbkontrast-Checker kann dabei helfen)
  -Skalierbare Texte und Bilder
  -Akkurater Alt-Text für Bilder und Videos
  -Klare, gut lesbare Schriftarten
  -Ablenkungen wie Pop-ups, Scrollen, automatisch abspielende Videos, Animationen usw. auf ein Minimum reduzieren
  -Angemessener Einsatz von Hintergrundfarben

• Interaktive Elemente: Interaktive Elemente umfassen Links, Buttons, Formulare und Animationen – all diese müssen barrierefrei sein. Stellen Sie sicher, dass jedes dieser Elemente für Nutzer leicht erkennbar ist. Beispielsweise sollte sich das Aussehen von Links oder Buttons ändern, wenn ein Nutzer mit der Maus darüberfährt.

• Auditorisches Design: Stellen Sie sicher, dass auditive Elemente auf Ihrer Website wie Videos, Tonaufnahmen oder Musik für Nutzer mit Hörbehinderungen zugänglich sind. Untertitel für Videos, Text-to-Speech-Optionen und visuelle Hinweise ermöglichen es diesen Nutzern, mit auditiven Inhalten zu interagieren.

• Kompatibilität mit unterstützender Technologie: Die Kompatibilität mit Screenreadern sollte während des gesamten Designprozesses berücksichtigt werden. Rund 2,5 Milliarden Menschen sind auf unterstützende Technologien angewiesen(opens in a new tab), was bedeutet, dass Ihre Website mit diesen Technologien nutzbar sein muss. Ein Website-Barrierefreiheits-Checker kann dabei helfen, Sie sollten aber auch Tests mit echten Nutzern unterstützender Technologien in Betracht ziehen.

Praktische Schritte für Barrierefreiheit und Inklusion

Jetzt, da Sie wissen, was barrierefreies Design ausmacht, besprechen wir Best Practices für die Gestaltung barrierefreier, inklusiver Websites.

1. Führen Sie ein Barrierefreiheitsaudit durch

Der erste Schritt zu einer barrierefreien Website ist die Behebung bestehender Barrierefreiheitsprobleme auf Ihrer Website. Zum Beispiel wird das Expert Audit von AudioEye von unserem Expertenteam durchgeführt, um häufige Barrierefreiheitsprobleme wie schlechten Farbkontrast oder fehlenden Alt-Text zu testen. Wir ergänzen unsere Barrierefreiheitstests durch unsere automatisierte Test-Suite und können so schnell fast 400 Barrierefreiheitsprobleme identifizieren und beheben.

2. Fördern Sie eine Barrierefreiheits-Mentalität

Denken Sie daran: Barrierefreiheit ist ein fortlaufender Prozess. Sie sollten Menschen mit Behinderungen immer im Hinterkopf behalten, wenn Sie eine neue Seite gestalten, ein Update durchführen, neue Inhalte erstellen oder neue digitale Produkte einführen. So vermeiden Sie häufige Barrierefreiheitsprobleme und reduzieren den Aufwand für spätere Korrekturen.

3. Beginnen Sie mit dem richtigen Fundament

Barrierefreiheit sollte kein nachträglicher Gedanke im Designprozess sein. Sie sollte vielmehr von Anfang an Teil Ihrer Strategie und Prozesse sein. So stellen Sie sicher, dass Designer, Entwickler, Projektmanager und Autoren Barrierefreiheit beim Erstellen digitaler Inhalte berücksichtigen. Das hilft Ihnen nicht nur, von Anfang an ein barrierefreies Design zu schaffen, sondern erspart Ihnen auch spätere Korrekturen, wenn Inhalte bereits veröffentlicht sind.