Wie man eine Website für Menschen mit Sehbehinderungen anpasst: Tipps für Design und Layout

Bereits ist die Ära der Inklusivität angebrochen, in der die Bedürfnisse nicht nur der durchschnittlichen Mehrheit, sondern auch jedes einzelnen Menschen wichtig sind. Besonders wichtig ist dieser Prozess für ein erfülltes Leben von Menschen mit Behinderungen — und das sind ganze 10% der gesamten Bevölkerung der Erde. Dabei spricht die Zahl nur von offiziell anerkannten Behinderungen. Fügen Sie die hinzu, die kein formelles Dokument über gesundheitliche Probleme haben, und ältere Menschen, bei denen mit dem Alter das Hör-, Seh- und Bewegungsvermögen nachlässt.

Dies ist eine große Kategorie, deren Rechte auf ein normales Lebensniveau und den Zugang zu Informationen respektiert und verwirklicht werden müssen.

Immer häufiger wird in der IT-Community darüber gesprochen, dass es unter Internetnutzern viele Menschen mit Behinderungen gibt, darunter auch Menschen mit Sehbehinderungen. Sie besuchen aktiv Websites und nutzen alle Vorteile des Netzes, indem sie spezielle Software einsetzen. Website-Besitzer und Webentwickler können einen Schritt auf sie zugehen, indem sie ihre Ressourcen für eine bequemere Nutzung durch Menschen mit vollständigem oder teilweisem Verlust des Sehens anpassen.

In diesem Artikel verwenden wir nicht die Bezeichnung "blind", ebenso wenig wie andere Wörter oder Begriffe, die eine Person diskriminieren und ihre Persönlichkeit auf eine einzige Eigenschaft reduzieren. Eine Sehbehinderung ist nicht die einzige Eigenschaft der Menschen, über die wir heute sprechen. Es sollte das Prinzip "zuerst der Mensch" beachtet werden. Die korrekte Formulierung, die wir verwenden, lautet "eine Person mit Sehbehinderung". Wie man richtig spricht und welche Begriffe man verwenden sollte, kann man im Leitfaden zur Barrierefreiheit erfahren.

Es gibt "Leitlinien zur Barrierefreiheit von Webinhalten (WCAG)", die vom World Wide Web Consortium (W3C) entwickelt wurden. Darin sind alle Anforderungen an den Inhalt von Websites und deren Formatierung klar beschrieben, damit möglichst viele Menschen die Informationen komfortabel nutzen können.

Wir werden Ihnen die grundlegenden Prinzipien der Entwicklung inklusiver Websites und der Verbesserung bestehender Ressourcen vorstellen. Der Artikel wurde in Zusammenarbeit mit Dmytro Popov, einem Spezialisten für digitale Zugänglichkeit, erstellt.

Welche Sehbehinderungen kann es geben?
Wie Menschen mit Sehbehinderungen Inhalte im Internet sehen
Braucht man eine separate Website-Version für Menschen mit Sehbehinderungen?
Wie man seine Website für Menschen mit Sehbehinderungen zugänglich macht

Welche Sehbehinderungen kann es geben?

Wenn es um Menschen mit Sehbehinderungen geht, denkt man meistens nur an zwei Situationen — partiellem und vollständigem Verlust des Sehens. Es gibt jedoch auch andere Störungen wie:

Kurzsichtigkeit — eine Person kann Objekte nur in der Nähe gut unterscheiden.
Weitsichtigkeit — Unfähigkeit, Objekte aus der Nähe zu sehen.
Astigmatismus — alle Objekte sind verschwommen, die Bilder sind unscharf.
Farbenblindheit — Unfähigkeit, bestimmte Farben zu erkennen.
Legasthenie — das ist keine Sehbehinderung, sondern eher eine Besonderheit des Gehirns, die das Textverständnis beeinflusst. Buchstaben springen und vermischen sich, weshalb die Person den Text sieht, ihn aber nicht lesen kann. Die Bedürfnisse von Menschen mit Legasthenie werden ebenfalls bei der Anpassung von Websites berücksichtigt.

Wie Menschen mit Sehbehinderungen Inhalte im Internet sehen

Es gibt spezielle Websites und Plugins, die helfen zu verstehen, wie Menschen mit Sehbehinderungen sehen. Solche Erweiterungen sind im Browser Google Chrome erhältlich.

Wir haben den Web Disability Simulator installiert, um ihn zu testen. So können Benutzer mit bestimmten Beeinträchtigungen die Website Cityhost sehen.

Die Varianten sind mit Zahlen gekennzeichnet, wobei:

Originalversion
Farbenblindheit im gelb-blauen Spektrum
Weitsichtigkeit
Vollständige Farbenblindheit

Braucht man eine separate Website-Version für Menschen mit Sehbehinderungen?

Die Website-Version für Menschen mit vollständigem oder teilweisem Verlust des Sehens wird unter derselben Domain platziert und als separate Layout-Option ohne Bilder (oder mit minimalen Bildern), mit einfacher Navigation und der Möglichkeit, Farben und Schriftgrößen zu ändern, realisiert. Sie wird durch ein Symbol in Form von Brillen (oder einfach durch den Text "Kontrastversion") gekennzeichnet, das oben auf der Website platziert wird.

Auf ukrainischen Websites gibt es nur wenige solcher Beispiele, sie sind meist auf spezialisierten Ressourcen zu finden. Zum Beispiel gibt es eine separate Version auf der Website der Lwiwer Filiale des "Ukrainischen Verbands der Menschen mit Behinderungen".

Auf dem Bild ist ein ganzer Bildschirm mit maximaler Textvergrößerung dargestellt.

Aber wenn wir von der realen Praxis sprechen, rechtfertigen spezielle Versionen oft nicht ihren Zweck. In der westlichen Welt, die für ihren aufmerksameren Ansatz zur Inklusivität bekannt ist, sind sie praktisch nicht zu finden.

Oft resultiert dies in einer inhaltlich abgespeckten Modifikation, und die Zielgruppe nutzt weiterhin die normale Version. Zudem sollte man nicht vergessen, dass unter den Besuchern Menschen mit unterschiedlichen Sehbehinderungen sind. Für viele von ihnen sind spezielle Versionen nicht erforderlich, es genügt, einige Schritte zur Anpassung der Hauptwebsite zu unternehmen.

Wenn man sich dennoch entscheidet, eine solche Version zu erstellen, sollte man sie besser nicht "Version für Sehbehinderte" nennen, da dies die Menschen diskriminiert. Besser wäre es, den Namen nicht auf den Beeinträchtigungen der Person zu basieren, sondern auf der Funktion, zum Beispiel "Kontrastversion", "Farbthemenwahl", "Schriftanpassung".

Darüber hinaus können nicht nur Menschen mit Sehbehinderungen von der Kontrastversion profitieren, sondern jeder, der sich beispielsweise am Strand in der hellen Sonne aufhält.

Lesen Sie auch: Die Geschichten unserer Nutzer: wie die Wohltätigkeitsstiftung «99 PROBLEMS» Menschen mit Multipler Sklerose hilft

Wie man seine Website für Menschen mit Sehbehinderungen zugänglich macht

Empfehlungen zur Erstellung inklusiver Websites wurden gemeinsam mit Testern entwickelt, die einen vollständigen oder teilweisen Verlust des Sehens haben. Solche Spezialisten arbeiten bereits in modernen Unternehmen und helfen anderen, einen komfortableren Zugang zu Webressourcen zu erhalten.

"Luftiges" Design

So ein Design begegnet man immer häufiger auf Websites. Modernes Layout sieht eine Spalte über den gesamten Bildschirm, ein minimalistisches Layout, viel Platz zwischen den Elementen und große Fotos vor. Dies ist ein Trend, aber gleichzeitig ist ein solches Design auch für Besucher mit Sehbehinderungen praktisch.

Für die Erstellung einer solchen Website ist es nicht erforderlich, hochbezahlte Entwickler zu engagieren: Es genügt, eine Website auf Wordpress zu erstellen oder ein anderes CMS zu wählen — in diesen gibt es Vorlagen mit "luftigem" Design.

Farbige Lösungen

Kontrastreiche Farben helfen Besuchern ebenfalls, den Inhalt der Website besser zu unterscheiden. Man kann zwei Wege gehen: entweder die Website sofort kontrastreich gestalten oder die Möglichkeit integrieren, die Farbthemen zu wechseln. In der Regel werden drei Varianten für Besucher mit Sehbehinderungen verwendet: schwarzer Text auf weißem Hintergrund, weißer Text auf schwarzem Hintergrund und gelber Text auf blauem Hintergrund.

Die Kontrastüberprüfung der Website kann mit einem Analyzer durchgeführt werden.

Es gibt viele Nutzer, für die die weiße Farbe die Augen schmerzt; für sie wird das dunkle Thema angenehmer sein.

Wenn der Text über einem Bild platziert ist, müssen die Anforderungen an den Kontrast in Bezug auf den Hintergrund erfüllt werden (Verhältnis von mindestens 4,5:1).

Spezialisten für die Anpassung von Websites empfehlen, Farben nicht als bedeutungsvolle Elemente zu verwenden, um die Aufgabe für Menschen mit Farbseheinschränkungen nicht zu erschweren. Wenn eine Person Farben nicht richtig unterscheidet, wird die Anweisung "Klicken Sie auf die blaue Taste" für sie unverständlich sein.

Lesbarer Schriftart

Auf Websites trifft man immer seltener verschnörkelte Schriftarten — dies ist für alle, nicht nur für Menschen mit Sehbehinderungen, unangenehm. Daher erleichtern Designer die Arbeit mit Text für alle Nutzer, indem sie einfache und lesbare Schriftarten verwenden.

Möglichkeit, die Seite zu vergrößern und die Schriftgröße zu ändern

In modernen Browsern steht die Funktion zum Vergrößern von Websites über die Tastenkombinationen Ctrl+ und Ctrl- zur Verfügung. Die Aufgabe der Entwickler ist es, das Layout so anzupassen, dass bei Vergrößerung oder Verkleinerung der Website nichts "kriecht", keine Elemente aus dem Sichtbereich verschwinden und kein horizontaler Scrollbalken erscheint.

Es ist auch möglich, die Schriftgröße und den Abstand zwischen den Buchstaben zu ändern. Beispielsweise fällt es Menschen mit Legasthenie leichter zu lesen, wenn der Zeilenabstand vergrößert ist.

Steuerung über die Tastatur

Einige Nutzer können den Mauszeiger auf dem Bildschirm nicht sehen, kommen aber gut mit der Tastatur durch Tastenbedienung zurecht. Sie müssen die Möglichkeit haben, mit der Website über die Tasten zu interagieren — zu scrollen, Felder auszufüllen, auf Schaltflächen und Menüabschnitte zu klicken, ohne die Maus zu verwenden. Diese Funktion ist auch für Menschen mit motorischen Beeinträchtigungen wichtig.

Es ist wichtig, an den visuellen Fokusindikator der Tastatur zu denken. Alle interaktiven Elemente (Links, Schaltflächen, Felder) sollten visuell hervorgehoben werden (durch einen Rahmen oder kurze Texttipps), wenn man mit der Tabulatortaste durch die Struktur der Website navigiert.

Entwickler schalten oft die Fokussierung in CSS über {outline: none} aus, aber das sollte man nicht tun. Auf diese Weise verlieren einige Nutzer die Möglichkeit, mit der Website zu interagieren.

Anpassung an Screenreader-Programme

Menschen, die selbst den vergrößerten Text nicht lesen können, nutzen spezielle Programme (JAWS, NVDA, SuperNova). Screenreader lesen die Seite und geben sie im Sprachmodus wieder. Das heißt, die Nutzer lesen die Website nicht, sondern hören sie.

Programme sehen Text nicht wie Menschen, sie erkennen die Markup. Daher ist es wichtig, die HTML-Struktur richtig zu layouten:

Alle Markup-Elemente mit den richtigen Tags versehen. Überschriften sollten eine strenge Hierarchie H1, H2, H3 haben. Verwenden Sie keine Überschriftenmarkup, um Schriftarten zu vergrößern. Schaltflächen sollten über das Tag

Wie man eine Website für Menschen mit Sehbehinderungen anpasst