nachhaltiges webdesign jetzt
info

Inklusion und Barrierefreiheit

Websites sind heute nicht mehr komplett, wenn sie nicht von allen Menschen genutzt werden können. Wir können nur davon profitieren, wenn wir alle Bevölkerungsgruppen (Alter, Behinderung, Region usw.) systematisch einbeziehen.

negativen Fußabdruck minimieren
positiven Fußabdruck maximieren
sowohl als auch

Lesbarkeit von Textelementen sicher stellen

Wir müssen bei unseren Websites auf einen ausreichenden Farbkontrast bei Textelementen zum Hintergrund achten. Das macht es Menschen mit eingeschränktem Sehvermögen leichter, Texte zu lesen, auf unseren Seiten zu navigieren und Links zu folgen. Knapp 80% aller Websites hatten 2020 noch einen ungenügenden Farbkontrast von Textelementen. Viel zu tun.

Ebenso sollten wir Seitenbesucher*innen immer ermöglichen, die Zommstufe selbst festzulegen. Knapp ein Drittel der Websites versucht immer noch, diese Möglichkeit zu unterbinden und baut damit Barrieren auf, anstatt ab.

Ein weiteres wichtiges textbasiertes Attribut für Barrierefreiheit ist das Lang-Attribut. Es sorgt für leichtere (automatische) Übersetzung und bessere Screenreader-Unterstützung. Standardmäßig wird es von den meisten Programmen bereits in den Code im Head-Bereich der HTML-Struktur integriert.

Alternativen für Nicht-Text-Elemente anbieten

Bilder brauchen Alt-Attribute. Sie machen den Inhalt für sehbehinderte Menschen erkenntlich, denn Screenreader lesen den Text in Alt-Attributen vor. Wenn das Bild nicht geladen werden kann oder soll, wird dieser Text ebenfalls angezeigt. Alt-Attribute sollte wir aus diesem Grund immer deskriptiv verwenden, beispielsweise „Kind spielt mit Hund“ anstatt „Lustiges Bild“. Ausschließlich dekorativ eingesetzte Bilder haben dieser Logik folgend kein Alt-Attribut.

Beim Einbinden von Videos sollten wir auf Untertitel (Closed Captions) achten. Für den Fall, dass Nutzer*innen das Video nicht laden können oder wollen, sollten wir ein Transkript zur Verfügung stellen. (Wenn diese Praxis aufwendig erscheint, können wir den Nutzwert des Videos hinterfragen und es gegebenenfalls nicht einbinden.)

Autoplay vermeiden

Video und Audio-Content per autoplay einzufügen, ist fast immer eine schlechte Idee. Nicht nur wegen hohen Datentransferraten und damit hohem Energieverbrauch. Denn erstens werden diese Inhalte nicht von allen Menschen wahrgenommen und zweitens sind sie oft nicht erwünscht und führen zu einer mangelhaften User-Experience.

Leichte Navigation ermöglichen

Für alle Menschen sollten wir die Navigation auf Websites übersichtlich und leicht zugänglich gestalten. Inhalte sollten schnell auffindbar sein, das Gefühl des Verloren-Seins nicht eintreten. Dabei helfen zum Beispiel eine geringe Anzahl von Menüpunkten, interne Verlinkungen, Breadcrumbs, Back-to-top-Buttons.

Überschriften sind kein rein grafisches Element, sie vermitteln die semantische Struktur einer Seite. Viele Screenreader-Nutzer*innen navigieren mittels Überschriften durch die Inhalte unserer Seiten. Dafür ist es wichtig, dass die als solche gekennzeichnet sind, also H-Tags verwenden.

Weiterhin, dass ihre hierarchische Ordnung beibehalten wird. Also nur eine einzige H1-Überschrift pro Seite vorkommt. Dann H2-Überschriften für Kapitel, H3-Überschriften für Unterkapitel usw. Neben der leichteren Navigation ist diese Ordnung auch ein wichtiger SEO-Faktor.

Die Bedienbarkeit unser Seiten über die Tastatur können wir über den Tabindex sicher stellen. Alle interaktiven Elemente (Links, Buttons, Formular-Felder) haben einen Tabindex von 0. Das ermöglicht einen natürlichen Fluss der fokussierten Elemente gemäß dem Seitenaufbau. Den Tabindex zu überschreiben, verwirrt diesen Fluss und wird als Bad Practice angesehen.

Inklusive (Bild-)Sprache verwenden

Das Thema Gender ist in den letzten Jahren stärker in den Fokus gerückt. Einerseits sollten wir darauf achten, trotz konkreter Zielgruppenansprache in unserer Bildsprache divers zu bleiben. Damit helfen wir, überkommene Rollenmuster aufzubrechen und Vorurteile abzubauen.

Andererseits können wir im Text bessere Worte ohne Geschlechtszuschreibung wählen und in den Fällen, in denen es angebracht ist, eine inklusive Schreibweise wählen. Der Stern und der Doppelpunkt sind dafür weit akzeptierte Praktiken (Besucher*innen, Besucher:innen). Sie stehen für die Inklusion nicht heterosexueller Orientierungen und Identitäten: LSBTIQ (Lesbisch, Schwul, Bi, Trans, Inter, Queer). Sceenreader lesen den Stern laut vor, wobei der Doppelpunkt durch eine Sprechpause deutlich gemacht wird.

Darüber hinaus sind wir bei Texten gut damit beraten, einfache Sprache zu verwenden. So können Informationen leichter aufgenommen werden. Sie wird von Nicht-Muttersprachlern besser verstanden. Und sie ermöglicht Menschen mit eingeschränkten kognitiven Fähigkeiten, dem Inhalt besser zu folgen.

Datenvolumen und Offline-Versionen

Das Datenvolumen wird selten erwähnt, wenn es um Inklusion geht. Dennoch verfügen nicht alle Regionen in Deutschland und der Welt über schnelles, immer zugängliches Internet.

Die Transferraten zu reduzieren, hat also nicht nur einen Energiespareffekt, sondern hilft Menschen in solchen Regionen aktiv, unsere Websites aufzurufen.

Darüber hinaus ist es möglich, Offline-Versionen von Websites zu erstellen: Progressive Web Apps werden ähnlich wie native Apps auf den Endgeräten installiert und sind so jederzeit, auch ohne Internetverbindung, zugänglich.

Ressourcen

Habt ihr weitere außergewöhnliche Ressourcen (umfassend, tiefgreifend, klug, lustig) zu diesem Thema?
Vermisst ihr etwas? Oder hat euch der Inhalt sehr geholfen?

Dieses Projekt lebt von eurer Beteiligung. Schreibt mir gern eine Zeile an mail@gerritschuster.de