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
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
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.
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.
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.
