Wir leben in einer Welt, in der wir bei allem, was wir tun, immer mehr vom Internet abhängig sind. Denk mal drüber nach: Wo hast du deinen letzten Job gefunden? Wie hast du dich für ihn beworben? Wie regelst du deine Bankangelegenheiten? Wo kaufst du ein? Wie bleibst du mit deinen Freunden in Kontakt?

illustration of a female doctor sitting at a desk with three screens above her head, each displaying a different app
Wir nutzen das Internet für beinahe alles und das wird sich nicht ändern. App-Design von Spoon Lancer.

Das Internet mag ein allseits präsentes Hilfsmittel für die meisten Menschen sein, aber für solche, die mit einer Behinderung leben, ist das nicht immer selbstverständlich. Es gibt Programme und Geräte wie Screenreader, die es Menschen mit Behinderungen ermöglichen, deine gesamte Website zu nutzen, aber diese sind nur ein Teil der Lösung.

Der andere Teil der Gleichung besteht darin, Webseiten und Apps so zu designen, dass sie für Menschen mit Behinderungen nutzbar sind, entweder durch den Gebrauch assistierender Geräte oder einfach durch wohl überlegtes Design.

Weshalb Barrierefreiheit im Webdesign wichtig ist

pie chart highlighting 15 percent of the whole
Dies ist der Prozentsatz der Menschen auf der Erde, die mit einer Form von Behinderung leben. Via Wikimedia Commons.

Laut Daten aus dem Jahr 2012 lebt in den USA knapp einer von fünf Amerikanern mit einer Form von Behinderung. Weltweit leben schätzungsweise eine Milliarde Menschen, oder 15 Prozent der Weltbevölkerung, mit einer Behinderung.

Nicht alle Behinderungen halten Menschen davon ab, auf Bildschirmen zu lesen oder das Internet zu nutzen. Darunter sind beispielsweise Menschen, die auf Gehhilfen und Rollstühle angewiesen sind. Andere Beeinträchtigungen, wie eine Sehbehinderung, Autismus und Taubheit – um nur ein paar zu nennen – können die Fähigkeit, einen Computer oder ein Smartphone ohne Anpassungen zu nutzen, start einschränken.

Barrierefreiheit im Webdesign: Mal Empfehlung, mal gesetzlich vorgeschrieben

Wenn du in den USA lebst, kennst du wahrscheinlich die Web Compliance Standards, die Teil des „Americans with Disabilities Act“ (ADA) sind. Viele andere Länder haben ähnliche Verhaltensregeln, wie den „Australia Disability Discrimination Act“, Brasiliens Gesetz zur Barrierefreiheit und den „eEurope Action Plan“ der Europäischen Union.

Viele der Richtlinien, die diese Gesetze und Initiativen beinhalten, kommen von den Web Content Accessibility Guidelines (WCAG), einer Reihe von Richtlinien, die vom World Wide Web Consortium (W3C) im Zuge der Web Accessibility Initiative (WAI) entworfen wurden. Reicht das an Akronymen?

Tim Berners-Lee looking excitedly at a computer screen
Der Mann hinter der globalen Initiative, die das Internet allen zugänglich machen soll. Via Wikimedia Commons.

W3C wurde 1994 von Tim Berners-Lee gegründet (ja, dem Tim Berners-Lee) mit dem Zweck, Richtlinien und Protokolle zu entwerfen, die das langfristige, nachhaltige Wachstum des Internets fördern. Heute besteht es aus über 400 Organisationen, von denen viele im WAI teilnehmen. Die jüngste veröffentlichte Version heißt WCAG 2.1, welche 2018 erschien.

WCAG 2.1 beinhaltet die neuesten Richtlinien und bewährten Methoden, denen Webdesigner folgen sollten, um sicherzustellen, dass ihre Seiten für alle Nutzer barrierefrei sind. Es ist ein langes, vollgepacktes Dokument mit viel Fachjargon. Statt dich selbst die nächsten zwei Monate damit zu beschäftigen, das ganze Ding zu lesen, designe deine Website einfach gleich nach den folgenden Regeln zur Barrierefreiheit. Lasse dann deinen Code von einem Entwickler kontrollieren, damit dein barrierefreies Design auch den Richtlinien entspricht.

Gib deinen Bildern Alt-Tags

Alt-Tags sind eine kurze Beschreibung deiner verwendeten Bilder, die im HTML-Code der Seite vergraben sind. Die meisten Nutzer sehen diese Beschreibung nie, aber Seitenbesucher, die Screenreader verwenden, sind auf sie angewiesen, um zu erfahren, was auf dem Bild auf deiner Website zu sehen ist. Ein gutes Alt-Tag ist eine kurze, kreative Beschreibung, die das Bild genau beschreibt, zu dem es gehört.

realistic illustration of fish and bread loaves in a basket
Nutzen wir dieses Bild, um zu zeigen, was ein gutes Alt-Tag ist und was nicht. Illustration von BATHI.

Schau dir das Bild auf der linken Seite an. Hier ist ein Beispiel für ein gutes Alt-Tag für dieses Bild: Realistische Illustration von Fischen und Brotlaiben in einem Korb.

Und hier ist ein Alt-Tag, das nicht so gut is: Brot und Fisch.

Siehst du den Unterschied?

Alt-Tags nützen nicht nur Menschen mit Sehbehinderungen; sie nützen auch dir. Gut ausgearbeitete Alt-Tags verbessern die SEO deiner Seite, wodurch du mehr relevanten Traffic und schließlich mehr Conversions bekommst.

Mache deine Navigation durchschaubar

collection of icons for a mobile app
Deine verwendeten Symbole (und wie du sie nutzt) sind wichtig. Symbol-Design von @alexanderk.

Das Navigationssystem deiner Website sollte über alle Seiten hinweg einheitlich sein. Dazu gehören deine verwendeten Symbole und die Art, wie Besucher innerhalb der Website auf die verschiedenen Seiten kommen. Wenn deine Homepage zum Beispiel einen Top Header mit Dropdown-Menüs hat, sollte dies auch auf jeder anderen Seite so sein.

Genauso müssen die von dir genutzten Symbole deiner Website einheitlich sein. Verwende auf deiner Homepage keinen Telefonhörer als „Kontakt“-Symbol und dann ein Smartphone-Symbol auf deiner „Über uns“-Seite. Es ist verwirrend und macht es Hilfsprogrammen schwer herauszufinden, wie deine Seite zu nutzen ist. Du solltest zudem die Finger von jeglicher automatischer Navigation und Musik und Videos lassen, die selbstständig starten.

Weshalb? Weil sie nicht nur nervig sind, sondern auch Nutzern mit Screenreadern Probleme bereiten herauszufinden, wie man sie pausiert. Und wenn eine Slideshow oder ein Karussell Inhalte schnell durchblättert, kann dies Nutzer verwirren und frustrieren.

Vermeide Inhalte, die physische Reaktionen hervorrufen können

Cartoon bumblebee wearing safety gear with the text “Simon Says: The Safety is Always First”
Gestalte deine Website immer so, dass sie sicher für jeden Besucher ist. Figurendesign von Jose Requena.

Erinnerst du dich noch an die Pokémon-Folge, die dazu führte, dass beinahe 700 Kinder ins Krankenhaus gebracht werden mussten, weil sie bei ihnen Anfälle auslöste? Das ist der Grund, weshalb deine Spielekonsolen nun mit Warnungen zu lichtempfindlicher Epilepsie daherkommen. Manche Menschen sind anfällig für schnell blinkendes Licht und bewegte Muster. Vermeide diese Art der Animation auf deiner Website, um sie sicher für jeden Nutzer zu machen.

Mache deinen Text groß, fett und organisiert

text serifs vs. sans serifs
Serifenlose Schriften sind leichter zu lesen und daher die bessere Wahl für Barrierefreiheit. Via Design Hack.

Gestalte deine Website so, dass Menschen mit eingeschränktem Sehvermögen sie problemlos nutzen können, indem du deinen Text groß machst. Im Grunde sollte sie das Äquivalent zu einem großen, gedruckten Buch sein. 16px ist grundsätzlich eine gute Größe für den Fließtext. Die Überschriften sollten größer sein.

Es erfordert mehr, deinen Text lesbar zu machen, als ihn nur zu vergrößern. Nutze eine gut lesbare Schriftart für Nutzer mit Leseschwäche. Das Ministerium für Gesundheitspflege und Soziale Dienste der Vereinigten Staaten empfiehlt Times New Roman, Arial, Helvetica, Tahoma, Calibri und Verdana als barrierefreie Schriftarten. Du kannst auf Nummer Sicher gehen, indem du eine dieser Schriftarten wählst oder nach einer anderen Schriftart suchst, die für all deine Website-Besucher funktioniert. Die Schriftarten, die am einfachsten zu lesen sind:

  • haben keine Serifen
  • haben feste Abstände zwischen den Buchstaben
  • verwenden fette Buchstaben
coffee cup with a palm tree coming out of it with the text “Belt Road. Grown Here. Not Flown Here”
Eine Farbpalette mit hohem Kontrast scheint eine einfache Wahl zu sein, aber macht für viele Nutzer einen riesigen Unterschied. Logo-Design von Frisheid.

Dein Text sollte auf lesbare, logische Weise angeordnet sein. Unterteile Text in kleinere Abschnitte, die durch Überschriften und Zwischenüberschriften unterteilt sind. Das lässt deinen Text nicht nur sauberer aussehen, es macht es auch Screenreadern leichter, ihn zu entziffern.

Und schließlich sollte dein Text einen hohen Kontrast vor seinem Hintergrund haben. Text, dessen Farbe zu sehr dem Hintergrund ähnelt, ist für viele Computernutzer schwer zu lesen, besonders für farbenblinde Nutzer. Verwende ein Online-Tool wie Contrast Checker, um zu sehen, wie deine geplante Schrift- und Hintergrundfarbe  zusammen funktionieren.

Mache sie so, dass man sie mit Tastatur (und ohne) bedienen kann

man using a head-movement direct access system to play a game on a laptop
Für diejenigen, die keine Tastatur nutzen können, gibt es andere Wege, durch das Internet zu navigieren. Via Instructables.

Manche Nutzer können keine Maus greifen oder haben ihre Hand immer fest am Touchpad des Laptops. Diese Nutzer sind auf ihre Tastaturen angewiesen, um auf Webseiten zu navigieren, also gestalte deine Seite so, dass man sie nur mit einer Tastatur nutzen kann.

Es gibt auch Nutzer, die keine Tastatur nutzen können und auf andere Wege angewiesen sind, um auf Webseiten zu navigieren, wie Spracherkennungsprogramme und Head-Mousing. Deine Website sollte mit diesen Programmen kompatibel sein, denn ohne sie werden Menschen, die ihre Hände nicht nutzen können, deine Website nicht nutzen können.

Lasse deinen Code kontrollieren (oder mache es selbst)

Veröffentliche deine Website nicht, bis ein kompetenter Entwickler, der mit den aktuellsten Techniken für barrierefreies Internet vertraut ist, deinen Code kontrolliert hat. Alternativ kannst du ein Tool wie Google Chromes WAVE verwenden, welches Stellen in deinem Code findet, an denen du wichtige Funktionen für Barrierefreiheit vergessen hast. Es schadet nie, einen menschlichen Entwickler deinen Code prüfen zu lassen, nachdem du ihn durch ein Tool wie WAVE laufen lassen hast, um sicherzustellen, dass nichts übersehen wurde.

Ermögliche es jedem, deine Website zu nutzen

line drawing of a large group of different-colored people in silhouette
Wenn deine Website barrierefrei ist, kann sie jeder gleich nutzen. Via Arts People.

Wenn du deine Designentscheidungen triffst, vergiss nicht, jegliche Hindernisse zu entfernen, die Menschen davon abhalten können, deine Website zu nutzen. Sicher, du willst auch im Einklang mit dem Gesetz sein und eine Situation vermeiden, in der du für die Diskriminierung von Nutzern verantwortlich gemacht wirst, aber vergiss niemals den Grund für die Richtlinien, an die du dich halten musst: Wenn das Design deiner Website mit allen Bedürfnissen der Nutzer im Hinterkopf entworfen wurde, wird niemand ausgegrenzt.

Du willst mehr über Webdesign lernen?
Schaue dir unseren ultimativen Guide zum Erstellen einer Website an!