Ein Mann im Rollstuhl in einer barrierefreier Küche.

Rücksichtnahme bei der Erstellung Barrierefreier Web-InhalteErfahrungswerte aus dem Alltag

Unsere Umgebung für Benutzerfreundlichkeit und Praktikabilität im Alltag vorzubereiten ist für uns selbstverständlich. Im Bereich der Webentwicklung wird jedoch oft übersehen, dass wir eine ähnliche Zugänglichkeit für uns selbst und die Menschen um uns herum erreichen sollten. Überlegen Sie mal: Wäre es eine gute Idee für ein Unternehmen, fast ein Drittel seiner Kunden abzuweisen? Wahrscheinlich nicht. Dennoch hat laut consilium.europa.eu ein Drittel der europäischen Bevölkerung eine Form von Behinderung. Viele von ihnen können grundlegende digitale Dienstleistungen im Internet nicht nutzen, einfach weil sie nicht barrierefrei sind. Wenn eine Website betrieben wird und der Betrieb innerhalb der EU stattfindet, ist die Einhaltung der Barrierefreiheitsstandards nun eine Anforderung, wie in der Europäischen Barrierefreiheitsrichtlinie definiert wird. Die schlechte Nachricht ist, dass viele Websites die meisten Barrierefreiheitsstandards nicht erfüllen und möglicherweise eine hohe Geldstrafe zahlen müssen, wenn sie sich nicht bald verbessern.

Die gute Nachricht ist, dass die Verbesserung der Benutzerfreundlichkeit einer Website nicht unbedingt umfangreiche technische Fähigkeiten erfordert. Oft braucht es nur ein wenig gesunden Menschenverstand und Mitgefühl. Dieser Beitrag wird kleine Möglichkeiten aufzeigen, die Barrierefreiheit im Web zu verbessern, indem Parallelen zum Alltag gezogen werden.

 

Eine einfache Analogie: Eine Tasse Tee Zubereiten

Stellen Sie sich den Prozess vor, eine Tasse Tee zuzubereiten. In den meisten Fällen findet man die nötigen Werkzeuge und Zutaten nah beieinander und im selben Raum – häufig in der Küche. Wahrscheinlich gibt es dort ein Fenster und eine Lampe, sodass man sowohl tagsüber als auch nachts Tee zubereiten kann. Die Zubereitung von Tee ist im Allgemeinen ein unkomplizierter Vorgang: Man öffnet den Schrank, nimmt einen Teebeutel und eine Tasse. Dann legt man den Teebeutel hinein. Danach holt man einen Topf, füllt ihn mit Wasser, erhitzt es, gießt es in die Tasse und wartet. Recht einfach!

In der Regel bleibt der Ablauf ähnlich, unabhängig davon, wo der Tee zubereitet wird – im Haus eines Freundes oder im Büro. Es könnte kleine Abweichungen geben, aber meistens kommt man ohne Hilfe zurecht.

Nun stellen Sie sich vor, Gäste kommen zu Ihnen nach Hause und Sie wissen nicht, wer kommt. Weil Sie ein rücksichtsvoller Mensch sind, treffen Sie einige Vorbereitungen, um ein großzügiger Gastgeber für eine möglichst breite Demografie zu sein. Vielleicht hängt man ein Schild auf, welches die Gäste zur Küche, zum Badezimmer und zum Wohnzimmer weist. Für Gäste im Rollstuhl sorgt man dafür, dass keine Hindernisse auf dem Boden liegen und alles, was sie benötigen, in Reichweite ist. Für kleinere Gäste könnte man einen Hocker oder eine Trittleiter bereitstellen, um ihnen dieselbe Höflichkeit entgegenzubringen. Man könnte sogar Etiketten und Symbole an Schubladen und Schränken in großen, gut lesbaren Buchstaben anbringen, damit die Gäste sich in der Küche leicht zurechtfinden und sich selbst eine Tasse Tee machen können, ohne fragen zu müssen, wo sie etwas finden. So können auch die Introvertierten, die Gehörlosen, die Analphabeten und Menschen mit Sehschwäche ohne viel Aufwand oder Hilfe ein schönes heißes Getränk genießen. Und die flackernde Glühbirne wird natürlich ersetzt. Wir wollen sicherstellen, dass eine Person mit lichtempfindlicher Epilepsie nicht gefährdet wird, stimmt's?

Mit diesen sehr kleinen und erschwinglichen Maßnahmen hat man die Küche bereits für viele zugänglich gemacht, die sonst um Hilfe hätten bitten müssen. Es war nicht nötig, etwas Besonderes zu bauen, und es hat auch nicht viel gekostet. Man musste nur ein bisschen Vorausdenken und Rücksichtnahme zeigen.

Die Analogie auf eine Webseite anwenden

Natürlich laden wir normalerweise keine Horde völlig Fremder in unser Zuhause ein. Und nein, eine Webseite kann keine Tasse Tee kochen. Aber täglich besuchen uns unbekannte Nutzer auf unseren Websites. Genauso wie nicht jeder das Budget hat, sein Haus komplett barrierefrei zu gestalten, haben viele auch nicht die Mittel oder das technische Wissen, um dies auf ihrer Website zu tun. Doch wie bei der Bewirtung von Gästen zu Hause können auch im Web kleine, wohlüberlegte Anpassungen einen großen Unterschied machen. Schon eine kleine Rücksichtnahme kann dafür sorgen, dass sich jemand anerkannt, respektiert und willkommen fühlt.

Welche häufigen Fehler werden gemacht, und welche grundlegenden Überlegungen sollte man beachten, um die Barrierefreiheit einer Website zu verbessern?

Navigation

Sorgen Sie dafür, dass Ihre Besucher leicht finden, was sie suchen, indem Sie einen klaren Navigationsbereich als eines der ersten Elemente auf Ihrer Seite hinzufügen. Stellen Sie sicher, dass Ihre Links funktionieren und richtig beschriftet sind. Niemand möchte, dass jemand, der ein Badezimmer sucht, im Schlafzimmer landet, oder? Ein „Nach oben scrollen“-Link und eine Breadcrumb-Navigation können die Benutzerfreundlichkeit Ihrer Seite weiter erhöhen. Stellen Sie sich vor, Sie könnten bei IKEA direkt zum Ausgang gelangen, anstatt sich durch jede Abteilung zu kämpfen, wenn Sie nur einen Blumentopf kaufen möchten. Wäre das nicht angenehm?

Beschriftungen bei interaktiven Elementen

Hatten Sie jemals einen Termin in einem Hochhaus und stiegen in einen Aufzug, dessen Tasten keine Beschriftungen hatten? Das ist ziemlich frustrierend. Viele Websites vergessen leider, ihren interaktiven Elementen wie Schaltflächen und Links verständliche Texte hinzuzufügen. Dies ist wichtig, damit Screenreader erkennen können, wohin ein Klick führt. Ein guter WYSIWYG-Editor (What You See Is What You Get) bietet die Möglichkeit, Links, Schaltflächen und Eingabeelemente zu beschriften. Wenn Sie manuell in HTML (Hypertext Markup Language) entwickeln, verwenden Sie das aria-label-Attribut. Bitte schaffen Sie keine Aufzüge mit unbeschrifteten Tasten.

Ein tourist in Badekleidung, der sich in der Wüste verirrt hat.
Ähnlich wie dieser Tourist in Badekleidung, der sich in der Wüste - fernab von jedem Wassertropfen - verirrt hat, können sich Besucher*innen einer Website verirren, wenn die Navigationselemente nicht ordnungsgemäß strukturiert sind.

Sinnvolle Inhaltsstruktur

Anfänger bei der Inhaltserstellung verwenden Überschriften-Tags (<h1> bis <h6>) oft als Stilmittel. Bitte vermeiden Sie das. Ihre Seite sollte nur einen <h1>-Tag haben. Das entspricht dem Titel auf dem Umschlag eines Buches oder einer Zeitung. Auf einer einzelnen Webseite sollten Ihre Überschriften-Tags in der entsprechenden Hierarchie-Reihenfolge sein - also <h2>, dann <h3>, dann <h4> und so weiter. Wenn Sie diese durcheinanderbringen, zwingen Sie jemanden, der auf einen Screenreader angewiesen ist, ein Buch zu lesen, das mit Kapitel 3.2 beginnt und dann zu Kapitel 1.1.3 wechselt und so weiter. Bitte machen Sie den Besuch Ihrer Webseite nicht zu einem Albtraum, nur weil Ihnen die Schriftgröße Ihres <h2>-Tags nicht gefällt. Sie können diese einfach mit Ihrem Stylesheet ändern.

Fokussierbare Inhalte

Stellen Sie sicher, dass interaktive Elemente wie Links, Schaltflächen und Formularelemente mit der Tastatur fokussiert werden können und dass der Fokus Zustand erkennbar ist. Standardmäßig wird ein dicker Ring um ein solches Element angezeigt, aber einige Webdesigner entfernen diesen gerne. Sie können dies testen, indem Sie Ihre Website öffnen und die Tabulatortaste auf der Tastatur verwenden. Können Sie bei jedem Element sehen, welches fokussiert ist? Wenn nicht, ist eine Anpassung notwendig. Für einige Menschen ist die Tab-Navigation die einzige Möglichkeit, sich im Netz zu bewegen. Für diese Personen ist es eine unnötige Barriere zu verhindern, dass sie sehen können, wo sie sich befinden oder was sie gerade tun.

Lesbare Inhalte

Stellen Sie sicher, dass Ihr Text groß genug ist, um gelesen zu werden, und dass er einen hohen Kontrast zum Hintergrund aufweist. Jeder mit Sehschwäche wird es Ihnen danken. Dunkelgrauer Text auf schwarzem Hintergrund mag für manche cool aussehen, aber er ist schwer zu lesen. Genauso wie winziger Text zwar schön und kompakt aussieht und besser zum Design passt, aber die Vergrößerung des Textes auf einem Bildschirm ist ein zusätzlicher Schritt und erfordert technisches Wissen, das nicht jeder besitzt. Vielleicht kann jeder, der ältere Eltern oder Großeltern hat, bestätigen, wie hilflos sie sich fühlen, wenn der Text für sie nicht lesbar ist und sie die Augen zusammenkneifen müssen, um herauszufinden, was diese verschwommenen Flecken auf dem Bildschirm bedeuten.

Logische Platzierung der Inhalte

Warum sind die Socken in der Spülmaschine? Das ist eine Frage, die sich in einem respektablen Haushalt niemand stellen sollte. Doch irgendwie gibt es eine „Über uns“-Sektion, die das HR-Team des Unternehmens zwischen einem Banner für den Sommerschlussverkauf und einer Liste von Produkten im Angebot auf einer Webseite mit dem Titel „Angebote der Woche“ vorstellt. Das wirkt ein wenig fehl am Platz, oder? Die Identifizierung des Zwecks einer spezifischen Landingpage und die Sicherstellung, dass die dort angezeigten Inhalte dorthin gehören, ist so einfach wie das Fernhalten von Socken aus der Spülmaschine. Lassen Sie uns versuchen, unsere Gäste nicht zu verwirren.

Beschreibende Alt-Texte für Bilder

Geben Sie eine klare Beschreibung dessen, was auf den Bildern Ihrer Website dargestellt ist – besonders, wenn das Bild für den Inhalt der Seite wichtig ist. Es gibt viele Vorteile, Alt-Texte hinzuzufügen, aber im Hinblick auf die Barrierefreiheit werden sie von Screenreadern verwendet, um jedem, der auf sie angewiesen ist, die Inhalte dieses Bildes mitzuteilen. Es wäre nicht fair, wenn Herr Müller 10 % Rabatt auf seinen nächsten Einkauf erhält, nur weil seine Augen funktionieren, während Herr Schmidt den vollen Preis zahlen muss, weil er blind ist.

Fazit

Die Verbesserung der Barrierefreiheit im Web ist ein erreichbares Ziel, das allen zugutekommt. Durch die Anwendung einfacher Prinzipien – klare Navigation, logische Inhaltsstruktur, sichtbare Fokus Zustände, lesbare Texte und beschreibende Texte für interaktive Elemente und Bilder – können Sie Ihre Website inklusiver gestalten. Diese Schritte zeigen Empathie und Rücksichtnahme für alle Nutzer und stellen sicher, dass Ihre Website für jeden einladend und funktional ist. Nehmen Sie diese Lektionen aus dem täglichen Leben und wenden Sie sie auf Ihre Webpräsenz an, um eine zugänglichere digitale Umgebung zu schaffen.

Abonnieren Sie unseren Newsletter

Bleiben Sie stets informiert. Wir informieren Sie gerne über Produktneuheiten und Angebote.