Was macht eine Website eigentlich barrierearm?
In Teil I hat Sofia erklärt, was Barrierefreiheit im Web bedeutet, warum sie wichtig ist und wie unterschiedlich Menschen mit digitalen Produkten interagieren.
In Teil II geht es darum, Barrierefreiheit in die Praxis umzusetzen und einige der Möglichkeiten zu betrachten, mit denen wir zugänglichere digitale Erlebnisse schaffen können.
Manche Menschen betrachten Barrierefreiheit vor allem als eine Checkliste von Anforderungen, die für die Einhaltung gesetzlicher Vorgaben erfüllt werden muss. Letztlich geht es bei Barrierefreiheit jedoch darum, Hindernisse zu beseitigen, die Menschen daran hindern, auf Informationen zuzugreifen, Aufgaben zu erledigen oder online teilzunehmen.
Eine Website wird nicht automatisch barrierefrei, nur weil sie eine Checkliste besteht. Sie wird zugänglicher, wenn sie mit dem Verständnis entwickelt wird, dass Menschen Technologie auf unterschiedliche Weise nutzen.
Kleine Entscheidungen, die Designer:innen und Entwickler:innen treffen — von der Wahl der Farben über die Strukturierung von Inhalten bis hin zur Art und Weise, wie Nutzer:innen mit Bedienelementen interagieren — können darüber entscheiden, ob jemand eine Website erfolgreich nutzen kann.
Semantisches HTML
Eine Website kann visuell perfekt aussehen und trotzdem nicht barrierefrei sein, wenn der zugrunde liegende Code keine Bedeutung vermittelt. Semantische HTML-Elemente wie Buttons, Überschriften, Listen und Formularbeschriftungen ermöglichen es assistiven Technologien, Inhalte zu verstehen und mit ihnen zu interagieren.
divs verbergen Überschriften- und Button-Rollen vor assistiven Technologien.// ❌ Nicht semantisch
<>
<div className="title">
Kontakt
</div>
<div
onClick={() => sendForm()}
>
Senden
</div>
</>h1 und button machen Struktur und Interaktion erkennbar.// ✅ Semantisch
<>
<h1>Kontakt</h1>
<button
type="button"
onClick={() => sendForm()}
>
Senden
</button>
</>Für unterschiedliche Arten des Sehens gestalten
Die visuelle Darstellung von Informationen kann für Menschen mit Sehbeeinträchtigungen Barrieren schaffen. Eine Person mit eingeschränktem Sehvermögen hat möglicherweise Schwierigkeiten, Text vom jeweiligen Hintergrund zu unterscheiden, während Menschen mit Schwierigkeiten in der visuellen Verarbeitung unübersichtliche oder komplexe Layouts möglicherweise nur schwer navigieren können.
Hilfreiche Designentscheidungen sind zum Beispiel:
- Ausreichender Farbkontrast: Texte und wichtige Elemente der Benutzungsoberfläche sollten sich klar voneinander und vom Hintergrund unterscheiden lassen.
- Flexible Textgrößen: Nutzer:innen sollten Inhalte vergrößern oder die Textgröße erhöhen können, ohne dass die Website dadurch unbenutzbar wird.
- Responsive Layouts: Websites sollten sich an unterschiedliche Bildschirmgrößen, Geräte und assistive Technologien anpassen.
Für unterschiedliche Arten der Navigation und Interaktion gestalten
Viele Websites basieren auf der Annahme, dass alle Menschen eine Maus, einen Touchscreen oder eine herkömmliche Tastatur verwenden. Tatsächlich können Nutzer:innen jedoch beispielsweise mit Screenreadern, Schaltern, Sprachsteuerung oder alternativen Eingabegeräten navigieren.
Wenn Websites diese unterschiedlichen Nutzungsmöglichkeiten nicht berücksichtigen, kann es passieren, dass Menschen grundlegende Aufgaben nicht ausführen können — beispielsweise durch Menüs navigieren, Formulare absenden oder Buttons betätigen.
Entwickler:innen können solche Barrieren reduzieren, indem sie:
- sicherstellen, dass jede Aktion mit der Tastatur ausgeführt werden kann,
- sichtbare Fokusindikatoren bereitstellen, damit Nutzer:innen jederzeit wissen, wo sie sich auf der Seite befinden,
- semantisches HTML verwenden, damit assistive Technologien die Struktur einer Seite verstehen können,
- Bedienelemente gestalten, die leicht zu erkennen und zu bedienen sind.
Formulare so gestalten, dass sie Nutzer:innen unterstützen
Formulare gehören zu den häufigsten Stellen, an denen Menschen online auf Frustration stoßen. Ein unübersichtliches oder unverständliches Formular kann verhindern, dass jemand eine wichtige Aufgabe erledigt — beispielsweise sich für einen Dienst registriert, einen Kauf abschließt oder den Support kontaktiert.
Barrierefreie Formulare sollten:
- klar kennzeichnen, welche Informationen erforderlich sind,
- Beschriftungen eindeutig mit den entsprechenden Eingabefeldern verknüpfen,
- hilfreiche Hinweise geben, wenn etwas nicht funktioniert.
Zum Beispiel lässt eine Fehlermeldung wie „Fehler bei der Eingabe“ Nutzer:innen im Unklaren darüber, was eigentlich falsch ist. „Bitte geben Sie eine gültige E-Mail-Adresse ein“ erklärt dagegen konkret das Problem und hilft dabei, den nächsten Schritt zu verstehen.
Für Verständlichkeit und Vorhersehbarkeit gestalten
Bei Barrierefreiheit geht es nicht nur darum, ob jemand technisch mit einer Website interagieren kann. Ebenso wichtig ist, ob die Person versteht, was gerade passiert.
Menschen mit kognitiven, neurologischen oder lernbezogenen Unterschieden können unerwartetes Verhalten, unklare Sprache oder ungewohnte Benutzungsoberfläche möglicherweise nur schwer nachvollziehen.
Klare Überschriften, konsistente Layouts, einfache Sprache und verständliches Feedback helfen Nutzer:innen zu erkennen, wo sie sich befinden, was sie tun müssen und was als Nächstes passiert.
Auch das Vermeiden unnötiger Ablenkungen wie übermäßiger Animationen, blinkender Inhalte, automatisch startender Medien oder überladener Layouts kann digitale Erlebnisse weniger überwältigend und leichter nutzbar machen.
Barrierefreiheit bedeutet nicht, eine separate Version des Webs für Menschen mit Behinderungen zu erstellen. Es geht darum, flexible Erlebnisse zu schaffen, die es mehr Menschen ermöglichen, Technologie so zu nutzen, wie es für sie am besten funktioniert.
Barrierefreiheit ist nicht nur ein Frontend-Thema
Barrierefreiheit betrifft nicht nur das, was Nutzer:innen auf einem Bildschirm sehen. Auch die Art und Weise, wie wir APIs, Authentifizierungsprozesse, Fehlerbehandlung und das Verhalten von Anwendungen gestalten, kann Barrieren erzeugen.
Ein technisch funktionierendes System kann Menschen trotzdem ausschließen, wenn es davon ausgeht, dass alle Nutzer:innen Technologie auf dieselbe Art verwenden.
Barrierefreiheit sollte deshalb während des gesamten Entwicklungsprozesses berücksichtigt werden — von der zugrunde liegenden Architektur bis hin zur finalen Benutzungsoberfläche. Viele Barrieren entstehen zwar direkt in der Benutzungsoberfläche, mit der Menschen interagieren. Entscheidungen zur Barrierefreiheit, die bereits früher im System getroffen werden, können jedoch einen ebenso wichtigen Einfluss haben.
Ein barrierefreieres Web beginnt mit Bewusstsein
Es ist leicht anzunehmen, dass es die eine „barrierefreie“ Version einer Website gibt. Aber bei Barrierefreiheit geht es nicht darum, eine einzige perfekte Lösung zu finden: Es geht vielmehr darum, Menschen die Flexibilität zu geben, die Lösung zu nutzen, die für sie am besten funktioniert. Menschen erleben und nutzen Technologie auf unterschiedliche Weise. Gute Barrierefreiheit berücksichtigt diese Unterschiede, anstatt davon auszugehen, dass alle Menschen dieselben Bedürfnisse haben.
Gestalte so, dass Menschen selbst wählen können, was sie brauchen.
Dieser Gedanke spricht mich besonders an, weil es mir schon immer wichtig war, dass sich Menschen nicht ausgeschlossen fühlen. Durch die Beschäftigung mit Barrierefreiheit ist mir noch stärker bewusst geworden, dass die Technologie, die wir entwickeln, unbeabsichtigt Barrieren schaffen kann, wenn die Bedürfnisse unterschiedlicher Menschen nicht berücksichtigt werden.
Barrierefreiheit ist ein sehr umfangreiches Thema mit unzähligen Techniken, Technologien und Perspektiven, über die auch ich noch viel lernen kann. Aber wenn es eine Sache gibt, die ihr aus diesem Beitrag mitnehmen solltet, dann diese:
Barrierefreiheit ist keine Funktion, die man am Ende hinzufügt. Sie ist eine Denkweise.
Denn für manche Menschen entscheidet eine barrierefreie oder barrierearme Website darüber, ob sie überhaupt am digitalen Leben teilnehmen können — oder nicht. Und für alle anderen macht sie das Web einfach zu einem besseren Ort.
Wenn ihr das nächste Mal ein Feature entwickelt, fragt euch: Könnte jemand es nutzen, ohne den Bildschirm zu sehen, eine Maus zu verwenden, Audio zu hören oder die Benutzungsoberfläche sofort zu verstehen?
.Bgf_bq_g_ZKw4Jh.jpg)
.jpg){kind=link}