Internet für alle
Inklusives Webdesign
Was bedeutet inklusives Webdesign?
Ein besseres Bild bekommt man vielleicht, wenn man das Gegenteil betrachtet: „Exklusion“ bedeutet Ausschluss - in diesem Fall also der Ausschluss von User:innen von der uneingeschränkten Nutzung der Website.
Das kann durchaus uns alle betreffen. Denn Einschränkungen sind nicht zwingend permanent, sondern können auch vorübergehend oder situativ auftreten. Beispielsweise freuen sich nicht nur hörbehinderte Personen, sondern auch Menschen, die gerade eine Mittelohrentzündung haben oder einfach nur in der lauten Straßenbahn sitzen, über Untertitel.
Dabei bedeutet inklusiv nicht unbedingt universell. „Universal Design“ verfolgt einen one-size-fits-all-Ansatz. Das Produkt soll ohne Anpassungen einer möglichst breiten Basis gerecht werden. Beim „Inclusive Design“ steht eher die Individualität der Nutzer:innen im Vordergrund. Das kann auch bedeuten, dass für unterschiedliche Zielgruppen verschiedene Lösungen angeboten werden. Berücksichtigt man die besonderen Bedürfnisse einzelner Menschen, führt dies oft auch zu einem verbesserten Nutzererlebnis für alle.
Warum Inklusion wichtig ist
Inklusion ist mehr als nur ein abgenutztes Schlagwort. Nicht nur für Unternehmen ist es von Nachteil, ganze Nutzergruppen auszuschließen – die schließlich als potentielle Kundschaft verlorengehen. Auch ethische Gesichtspunkte spielen eine Rolle.
Das Internet wurde als ein Ort des Austauschs und der Information geschaffen. Ob wir nun Katzenfotos verschicken, Kochrezepte nachschlagen, Hausaufgaben lösen (lassen) oder Artikel über inklusives Webdesign lesen – die meisten von uns nutzen Webdienste täglich. 2013 erkannte gar der Bundesgerichtshof die zentrale Bedeutung des Internets für die private Lebensgestaltung an. Wird Menschen der Zugang zu diesem elementaren Medium verwehrt, schränkt das die Teilhabe an der Gesellschaft massiv ein.
Insbesondere Menschen mit Behinderung sind oft von Barrieren im (digitalen) Alltag betroffen. Dabei ist diese Gruppe größer, als den meisten bewusst ist: So gelten beispielsweise ca. 10% der deutschen Einwohner als schwerbehindert. Barrierefreies Design ist daher ein wichtiger Aspekt inklusiver Websites.
So stellt sich also die Frage: Können wir als Gesellschaft vertreten, dass unsere Mitmenschen vom Miteinander ausgeschlossen werden?
Der Mensch im Mittelpunkt
Menschen sind ganz unterschiedlich: Wir sind alt oder jung, arm oder reich, sprechen Deutsch, Englisch und/oder Klingonisch, nutzen Internet Explorer oder Chrome. Außerdem hat jeder von uns die ein oder andere Einschränkung, ob nun körperlich oder kognitiv. Damit wir als Webentwickler und -designer uns von unseren eigenen Vorurteilen und Annahmen lösen und das ganze Spektrum der Menschen erfassen können, können wir das Konzept der „Persona“ nutzen.
Eine Persona ist eine fiktive, spezifische Person, die wir mit demografischen und sozioökonomischen Merkmalen, indiviuellen Einschränkungen, Charakterzügen, Interessen und Zielen ausstatten. Sie dient als Repräsentation der Zielgruppe. So können wir uns besser in die Bedürfnisse einzelner Menschen einfühlen und unser Produkt aus deren Perspektive beurteilen. Im Gegensatz zur Zielgruppe ist die Persona also weniger abstrakt.
Ein Beispiel: Björg und Rudolf
Wir verkaufen Schokoriegel.
Die extrovertierte und kreative Björg ist 23, Single und lebt im ländlichen Island. Ihr Internetzugang ist schrecklich langsam. Trotzdem ist sie täglich in den sozialen Medien unterwegs. Auf ihrem neuen iPhone nutzt sie die aktuellste Software. Sie arbeitet als Grafikdesignerin. Ihre Hobbys sind Reiten und Stricken. Sie liebt Schokolade und snackt jeden Tag eine ganze Tafel. Da sie Wert auf Nachhaltigkeit legt, ist ihr der Ursprung des Kakaos wichtig. Sie möchte sich über das Unternehmen informieren.
Um Björgs Erlebnis auf unserer Website zu optimieren, sollten wir daher auf einige Dinge achten: Ist unser Bildmaterial klein genug für eine langsame Verbindung? Bieten wir genügend Informationen auf relevanten Kanälen zu den Werten unseres Unternehmens, etwa in Bezug auf Nachhaltigkeit? Ist unser Design visuell ansprechend und für Mobilgeräte optimiert? Gibt es das Angebot in ihrer Sprache?
Rudolf ist 72 Jahre alt und Witwer. Wie Björg isst er gerne Schokolade. Als Rentner ist sein Einkommen gering. Er wohnt in der Stadt und hat einen Glasfaseranschluss. Da er kaum aus dem Haus kommt, stört ihn nicht, dass die mobile Internetversorgung in Deutschland, naja, ausbaufähig ist. Sein Enkel Johann hat seinen PC eingerichtet, auf dem er den Internet Explorer nutzt. Ein Mobiltelefon besitzt er nicht und was ein Instagram ist, weiß er auch nicht. Rudolf hat Diabetes. Seine beginnende Katarakt erschwert ihm das Lesen. Er sucht nach Informationen über unser Produkt.
Aus Rudolfs Perspektive müssen wir uns andere Fragen stellen. Läuft unser Angebot auch auf veralteten Browsern? Ist die Website mit Screenreadern nutzbar? Findet auch Rudolf als wenig technikaffiner User, was er sucht? Bieten wir ihm ausreichende Produktinformationen, wie den Nährwertgehalt oder den Preis der Schokoriegel?
In einer idealen Welt werden solche Profile anhand echter Daten, wie Umfragen oder Analytic Tools, überprüft. Zudem muss die Persona auch tatsächlich Bestandteil der Zielgruppe sein, die wir in diesem Beispiel gar nicht präzise formuliert haben. Vielleicht agiert unser Unternehmen nicht international, dann müssen wir die Site auch nicht auf Englisch oder gar Isländisch anbieten. Björg und Rudolf zeigen aber, dass uns die Persona eine Herangehensweise liefert, Design, Inhalt und technische Umsetzung an die konkreten Erfordernisse unserer Nutzer:innen anzupassen.
Websites barrierefrei gestalten
Barrierefreiheit ist ein zentraler Bestandteil inklusiver Websites. Das Angebot muss auch mit Einschränkungen beim Sehen, Hören, Bewegen oder Denken nutzbar sein.
Öffentliche Stellen des Bundes sind bereits zur Barrierefreiheit verpflichtet. Hierbei gilt die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0). Ab dem 28. Juni 2025 müssen nach dem Barrierefreiheitsstärkungsgesetz (BFSG) auch viele digitale Dienstleistungen privater Unternehmen, wie etwa Onlinehandel oder Messenger-Dienste, barrierefrei gestaltet sein. Das BFSG setzt den „European Accessiblity Act“ (EAA) um, der sich wiederum auf die „Web Content Accessibility Guidelines“ (WCAG 2.1) auf Level AA bezieht.
Diese beschreiben Erfolgskriterien auf drei aufeinander aufbauenden Ebenen. Dabei sind vier Prinzipien wichtig.
Wahrnehmbarkeit
Informationen und Gestaltungselemente müssen für alle Nutzer:innen wahrnehmbar präsentiert werden. Das beinhaltet beispielsweise eine Beschreibung von Bild- und Videomaterial oder eine ausreichende Kontrastierung von Text für sehbeeinträchtige Personen.
Bedienbarkeit
Die Website muss navigierbar sein, auch für User:innen, die eine Tastatur oder andere Eingabegeräte verwenden. Menschen mit kognitiven Beeinträchtigungen müssen beispielsweise die Möglichkeit haben, ablenkende Bewegungen abzuschalten oder Zeitbegrenzungen zu verlängern.
Verständlichkeit
Informationen und die Bedienung der Benutzeroberfläche müssen nachvollziehbar sein. Ein Navigationsmenü soll sich zum Beispiel immer an der gleichen Stelle befinden, falsch ausgefüllte Formularfelder sollen verständliche Fehlermeldungen ausgeben.
Robustheit
Inhalte sind für ein breites Spektrum an Technologien ausgelegt. HTML-Code muss valide sein, Buttons brauchen einen zugänglichen Namen und Formularfelder sind mit einer Beschriftung versehen.
Barrierefreiheit - so geht's konkret
Die gesetzliche Grundlage ist also ganz schön umfassend. Da fällt die Orientierung manchmal schwer. Tools und Selbsttests erleichtern Gestaltern und Entwicklern die Arbeit. Wir präsentieren zwölf Tipps, mit denen die Barrierefreiheit unmittelbar verbessert werden kann.
1. Kontraste sicherstellen
Die Anforderungen nach WCAG 2.1 auf Level AA sehen vor, dass das Verhältnis der wahrgenommenen Helligkeit für regulären Text bei 4,5:1 und für großen Text und grafische Komponenten bei 3:1 liegt. Mit Browser-Plugins oder Webtools wie dem WebAIM Contrast Checker kann das Helligkeitsverhältnis bestimmt werden. Wenn der Gestaltungsentwurf – beispielsweise wegen festgelegter Farben im Corporate Design – keine adäquate Darstellung zulässt, kann ein zuschaltbarer Kontrastmodus eine individuelle Lösung darstellen. Anwender:innen können auch über das Betriebssystem und die Browsereinstellungen Modi für erhöhten Kontrast konfigurieren. Dabei werden Hintergründe auf weiß und Texte und Outlines auf schwarz oder andere kontrastierende Farben gesetzt. Damit dabei keine relevanten Informationen verloren gehen, sollte die korrekte Darstellung bei diesen Einstellungen überprüft werden.
2. Nicht nur auf Farbe setzen
Viele Menschen können Farben nicht oder nur schwer unterscheiden. Informationen sollten daher nicht nur über Farbe vermittelt werden. Links im Fließtext etwa sollten zusätzlich, z.B. durch Unterstreichung, kenntlich gemacht werden.
3. CAPTCHAs vermeiden
Zu rätseln, ob auf diesem Feld jetzt ein Zebrastreifen zu sehen ist oder nicht, ist im besten Falle schrecklich nervig. Für Sehbehinderte stellen grafische CAPTCHA aber eine unüberwindbare Hürde dar, ein Kontaktformular abzuschicken oder einen Kommentar zu einem Blogpost zu hinterlassen. Daher muss eine Audio-Alternative oder besser gleich ein barrierefreier Spamschutz her.
4. Textinhalte nicht abschneiden
Schriftgrößen und -abstände müssen konfigurierbar bleiben. Hierbei ist unbedingt darauf zu achten, dass Text nicht überlappt oder durch CSS-Einstellungen wie overflow: hidden abgeschnitten wird.
5. Inhalte strukturieren
HTML5 bietet viele Möglichkeiten, Inhalte angemessen aufzubereiten. Semantische Tags wie nav oder aside vermitteln, dass es sich um Navigationselemente oder nebensächlichen Content handelt. div-Elemente, die keine Bedeutung tragen, sollten nur zum Styling eingesetzt werden. Inhalte müssen auch korrekt verschachtelt sein: Eine h2-Überschrift sollte nicht innerhalb eines Blocks mit einer h3-Überschrift eingesetzt werden. In den Developer Tools gängiger Browser kann die HTML-Struktur des Dokuments betrachtet werden. Ein sinnvoller Aufbau ermöglicht auch, bei der Sprachausgabe bestimmte Abschnitte zu überspringen - denn wenn die Ausgabesoftware bei jedem Seitenwechsel die komplette Navigation vorliest, geht das ziemlich auf den Keks.
6. WAI-ARIA nutzen
Die Spezifikation ARIA stellt Hilfsmittel, um Websites zugänglicher zu machen. Rollen erlauben die Zuweisung einer Aufgabe zu Oberflächenelementen. Mit aria-role="button" kann beispielsweise eine Schaltfläche als solche gekennzeichnet werden, auch wenn kein semantisches HTML-Tag verwendet wurde (wobei Letzteres zu bevorzugen ist). Zustände können deutlich gemacht werden: aria-collapsed="true" zeigt an, dass ein Menü oder Akkordeon ausgeklappt ist. Das ist wichtig für Hilfstechnologien: Ein Screenreader kann beispielsweise das Kreuz in einem Schließen-Button nicht vorlesen – wenn mit aria-label="Schließen" ein zugänglicher Name definiert wurde, wird die Bedeutung klar. Auch für die Sprachsteuerung ist ein zugänglicher Name wichtig, denn darüber werden Interaktionselemente angesteuert. Ist ein Button beschriftet, sollte dieser Name allerdings nicht davon abweichen, damit keine Konflikte entstehen. Der zugängliche Name eines Links ist (sofern kein aria-label vergeben ist) sein Inhalt. Daher sollte hier ein aussagekräftiger Text gewählt werden.
7. Fokuszustände sichtbar machen
Bei der Navigation mit der Tastatur muss der Fokus zu jedem Zeitpunkt deutlich sein. Browser stellen standardmäßig eine mehr oder weniger gut sichtbare Outline dar. Diese Darstellung kann per CSS über die Pseudoselektoren :focus, :focus-visible und :focus-within weiter optimiert werden. Auf keinen Fall sollte sie aus fehlgeleitetem ästhetischem Anspruch entfernt werden. Auch Mausinteraktionen, wie der :hover-Zustand, sollten deutlich gemacht werden, beispielsweise durch Änderung von Farbe, Größe und/oder Textunterstreichung.
8. Große Interaktionselemente gestalten
Menschen mit motorischen Einschränkungen haben Schwierigkeiten, kleine Buttons zu bedienen. Schaltflächen sollten mindestens 24x24px (Level AA) bzw. 44x44px (Level AAA) groß sein.
9. Für verschiedene Viewports optimieren
Responsives und adaptives Webdesign sind heute Standard. Trotzdem sollte noch einmal erwähnt werden, dass Websites auf allen Geräten darstellbar sein müssen.
10. Alternativtexte bereitstellen
Über das alt-Attribut von img-Tags kann ein Alternativtext für Bilder bereitgestellt werden, der von Screenreadern ausgegeben werden kann. Sehbehinderte erfahren so den Inhalt der Grafik. Auch Suchmaschinen lesen alt-Attribute aus.
11. Autoplay abschalten
Bewegungen von Slidern, Animationen und Videos können ablenken. Auf Autoplay sollte daher verzichtet oder zumindest eine einfache Möglichkeit, die Bewegung abzuschalten, angeboten werden. Vor allem flackernde Inhalte verbieten sich, da sie bei einigen epileptische Anfälle auslösen können.
12. Verständlich schreiben
Menschen mit kognitiven Behinderungen können Inhalte, die in kurzen Sätzen ohne Verneinungen, Fremdwörter oder komplizierte Grammatik präsentiert werden, besser verstehen. Das „Netzwerk Leichte Sprache“ legt dafür Regeln fest.
Fazit
Das Internet ist für alle da. Webdesigner:innen sind in der Verantwortung, für alle Menschen nutzbare und zugängliche Websites zu entwerfen. Das betrifft insbesondere User:innen mit Einschränkungen. Barrierefreiheit wird (nicht zuletzt aufgrund neuer Gesetze und Richtlinien) weiter an Bedeutung gewinnen und sollte deshalb schon früh im Entwicklungsprozess berücksichtigt werden.
Ihre barrierefreie Website
Wir prüfen Ihre Anwendungen im Hinblick auf aktuelle Regelungen zur Barrierefreiheit, beraten Sie zu Vorgaben und Maßnahmen und unterstützen Sie bei einer möglichst konformen Umsetzung. In unserem Team finden Sie immer einen kompetenten Ansprechpartner. Wir freuen uns auf Ihre Nachricht und sind gerne persönlich für Sie da. Kommen Sie einfach auf uns zu.
