Skip to content

Überlegungen zum Webdesign, nach Art der Behinderung

Designüberlegungen für Blinde

DesignüberlegungenWarum?

Alle Inhalte müssen in Textform oder als Textäquivalent (z. B. Alt-Text für Bilder) dargestellt werden.

Screenreader können Bilder nicht direkt lesen, aber sie können die Texte dazu lesen, die Sie ihnen zur Verfügung stellen.

Alle Funktionen müssen über die Tastatur verfügbar sein. Achten Sie darauf, den Test mit eingeschaltetem Screenreader durchzuführen.

Blinde Benutzer können eine Maus oder ein Trackpad zwar nutzen, aber sie wissen nicht, wo sich der Mauszeiger befindet. Sie navigieren besser über die Tastatur.

Der Inhalt muss gut strukturiert und verständlich sein. Dazu gehören Überschriften, Orientierungspunkte, Tabellen, Listen und so weiter.

Viele Nutzer von Bildschirmleseprogrammen öffnen Listen, um zu verstehen, was auf einer Seite steht. Sie können auch zu bestimmten Stellen auf der Seite springen, zum Beispiel zum Hauptinhaltspunkt oder zu einer Überschrift.

Alle individuell angepassten Steuerelemente müssen richtig benannt, zugeordnet und eingestellt sein. Sie müssen auch ihren Wert ändern, wenn dies nötig ist.

Benutzerdefinierte Steuerelemente haben keine semantischen Teile. Deshalb können Screenreader Benutzern nicht mitteilen, was das Widget ist. Auch können Benutzer nicht über die Eigenschaften des Widgets informieren. Das geht nur, wenn man die Informationen über ARIA-Namen, Rollen, Zustände und Eigenschaften angibt.

Benutzer müssen sofort eine Rückmeldung bekommen, wenn sie etwas machen. Wenn eine Funktion aktiviert wird, darf es keine Stille geben!

Beispiele für Feedback sind: ein erweiteter oder reduzierter Bereich, eine Änderung des Werts an einem Steuerelement (z. B. an einem Schieberegler), eine erfolgreiche oder erfolglose Übermittlung eines Formulars, eine Benachrichtigung, dass eine neue Seite in einer Single-Page-Anwendung geladen wurde.

Blinde Menschen brauchen zu Videos auch Beschreibungen, damit sie alles verstehen.

Blinde Menschen können Videos hören, aber nicht sehen. Wenn die Bilder wichtige Informationen enthalten, müssen sie beschrieben werden, damit blinde Menschen sie verstehen können.

Auf Handys und Tablets:

  • Man muss auf alles klicken.

  • Mit aktiviertem Screenreader funktionieren keine benutzerdefinierten Wischaktionen auf Webseiten.

Wenn man blind ist und ein mobiles Gerät benutzt, werden Wischaktionen von der Software verwendet. Damit Funktionen und Steuerelemente auf einer mobilen Webseite funktionieren, müssen sie angeklickt werden.

Designüberlegungen für Sehbehinderte

DesignüberlegungenWarum?

Die Pinch-to-Zoom-Funktion darf nicht abgeschaltet werden.

Wenn man auf einer Webseite nicht zoomen kann, können Menschen mit Sehbehinderung, die Bildschirmlupen zum Lesen von Inhalten verwenden, Informationen auf einer Webseite möglicherweise nicht richtig sehen.

Der Text muss sich vom Hintergrund abheben. Sie können das mit denaxe DevTools, der Browsererweiterung für Barrierefreiheit von Deque oder einem ähnlichen Tool überprüfen.

Manche Benutzer mit Sehbeeinträchtigung sehen nur wenig Kontrast. Deshalb können Text, Rahmen und andere Elemente in ähnlichen Helligkeitsstufen erscheinen. Für diese Benutzer sind Textelemente, die die gleiche Farbe wie der Hintergrund haben, schwer zu lesen.

Links, Schaltflächen und Steuerelemente sollten einen Fokus-Zustand haben, der sichtbar ist.

Manche blinden oder sehbehinderten Menschen nutzen eine Tastatur, eine Maus oder beides, um sich im Internet zu bewegen. Die Zustände ":focus" und ":hover" zeigen an, wo sich der Tastatur- oder Mausfokus auf einer Webseite befindet. Der Standardbrowser-Status ":focus" ist akzeptabel, aber Benutzer mit Sehbehinderung profitieren von den CSS-Zuständen ":focus" und ":hover".

Die Oberfläche sollte klar unterscheiden, was Inhalt ist und was Steuerung.

Auch hier können Menschen mit geringer Sehkraft Steuerelemente auf Webseiten schwer erkennen, weil sie mit dem Text und dem Hintergrund verschmelzen.

Designaspekte für Farbenblindheit

DesignüberlegungenWarum?

Alle Informationen müssen klar und deutlich sein. Man muss keine Farben unterscheiden. Wenn nur Rot und Grün zur Info verwendet werden, ist das schwierig.

Wenn Farben die einzige Möglichkeit sind, um Informationen auf einer Webseite zu zeigen, können Menschen, die bestimmte Farben nicht erkennen können, diese Informationen nicht sehen. Verwenden Sie auch Text und Symbole, um Informationen zu vermitteln.

Designaspekte für Taubheit und Schwerhörige

DesignüberlegungenWarum?

Alle Videos müssen mit Untertiteln sein.

Ohne Untertitel können gehörlose Menschen nicht verstehen, worum es in einem Video geht. Sie hören auch wichtige Geräusche nicht, die zum Verständnis wichtig sind.

Für alle Audioinhalte muss es eine schriftliche Zusammenfassung geben.

Transkripte enthalten alle Informationen, die man aus einer Audio-Aufnahme herauslesen kann. Dazu gehören zum Beispiel Dialoge, Erzählungen, Musik und Geräusche.

Es ist gut, wenn man Videos in Gebärdensprache übersetzt.

Es gibt Gehörlose, die nur gebärden. Für diese Gruppe sind Gebärdensprachdolmetscher besser als Untertitel und Texte.

Gestaltungsaspekte für Taubblindheit

DesignüberlegungenWarum?

Alle Überlegungen zur Blindheit sind wichtig.

Taubblinde nutzen wie Blinde einen Screenreader. Taubblinde Menschen lesen Inhalte, die sie berühren, mit einem Gerät, das ihnen die Brailleschrift anzeigt.

Alle Überlegungen für Taubheit gelten.

Wenn jemand taub ist, sollte es eine andere Möglichkeit geben, um an Audioinhalte zu kommen. Am besten in einem Textformat.

Für Multimedia-Inhalte wie Videos und Audios sollte es ein Transkript geben.

Für taubblinde Menschen sind Transkripte die einzige Möglichkeit, um an Informationen aus Videos und Audios zu kommen.

Designaspekte für Geschicklichkeit/motorische Behinderungen

DesignüberlegungenWarum?

Alle Funktionen müssen mit der Tastatur bedienbar sein.

Für alle, die eine Tastatur benutzen, sollte alles, was man mit einer Maus machen kann, auch mit der Tastatur gehen. Manche Menschen können nicht so gut mit einer Maus umgehen.

Links, Schaltflächen und Steuerelemente sollten einen Fokus-Zustand haben, der sichtbar ist.

Sehende Tastaturbenutzer wissen nur dann, wo sich der Tastaturfokus befindet, wenn der Fokus sichtbar ist. Wenn der Fokus deaktiviert ist, können Benutzer mit Sehbeeinträchtigung auf Webseiten nur schwer oder gar nicht interagieren. Der Standardstatus des Browsers ist akzeptabel. Aber auch sehende Tastaturbenutzer können von den erweiterten CSS-Zuständen profitieren.

Sie können Benutzer warnen, bevor die Sitzung abläuft. Sie können ihnen auch die Möglichkeit geben, die Sitzung zu verlängern. Die Warnung muss langsam reagieren. Die Reaktionszeit sollte mindestens zwei Minuten betragen.

Menschen mit Behinderung brauchen mehr Zeit, um Informationen in eine Webseite einzugeben. Sie brauchen mehr Zeit und mehr Zeit zum Antworten.

Sie können Benutzer warnen, bevor die Sitzung abläuft. Sie können ihnen auch die Möglichkeit geben, die Sitzung zu verlängern. Die Warnung muss langsam reagieren. Die Reaktionszeit sollte mindestens zwei Minuten betragen.

Menschen mit Behinderung brauchen mehr Zeit, um Informationen in eine Webseite einzugeben. Sie brauchen mehr Zeit und mehr Zeit zum Antworten.

Bieten Sie große Klickziele für Benutzer, deren Bewegungen schwer zu kontrollieren sind.

Wenn Menschen zittern oder Krämpfe haben, müssen sie auf einer Webseite Ziele aktivieren können. So können auch Menschen mit Beeinträchtigungen die Ziele auf der Webseite gut erkennen.

Designüberlegungen für Sprachbehinderungen

DesignüberlegungenWarum?

Gib keine Spracheingaben ein, zum Beispiel in Apps, Widgets oder Spielen.

Menschen mit Sprachbehinderungen können nicht gut sprechen. Sie brauchen deshalb andere Möglichkeiten, um sich auszudrücken. Zum Beispiel Text-Chats, Formulare, E-Mails usw.

Designaspekte für kognitive Behinderungen

DesignüberlegungenWarum?

Für Benutzer mit geringerem Verständnis:

  • Mach die Benutzeroberfläche einfacher.

  • Mach den Inhalt einfacher.

  • Mach Videos und Audio einfacher.

  • Mach die Auswahlmöglichkeiten auf dem Bildschirm einfacher.

  • Sie sollten Hilfefunktionen bereitstellen.

  • Das Design muss benutzerfreundlich sein.

  • Testen Sie die Benutzerfreundlichkeit mit echten Benutzern. Am besten sind dabei auch Menschen mit kognitiven Behinderungen dabei.

Benutzer, die wenig verstehen, haben mehr Spaß, wenn alles einfach ist. Sie können zu viele Optionen und komplexe Informationen nicht gut verarbeiten.

Für Benutzer, die sich nicht mehr erinnern:

  • Informationen werden auf verschiedenen Bildschirmen und innerhalb eines Pfads angezeigt.

  • Sie können Hilfe anfordern.

Eine Website, die überall gleich aussieht, ist für Menschen mit Gedächtnisverlust gut. Wenn eine Website zu kompliziert ist, ermüdet sie Benutzer mit Gedächtnisverlust. Wenn ein Benutzer Probleme hat, kann er Hilfe bekommen, um sich auf der Webseite zurechtzufinden.

Für Leute, die sich leicht ablenken lassen:

  • Schützen Sie sich vor Ablenkungen (vermeiden Sie Werbung, Karussells, laute Töne, Videos usw.).

Wenn es auf einer Webseite zu viele Ablenkungen gibt, können Menschen mit kognitiven Behinderungen wichtige Informationen verpassen. Ablenkungen können dazu führen, dass Nutzer den Fokus verlieren und die Webseite verlassen.

Designaspekte für Lesebehinderungen

DesignüberlegungenWarum?

Für Menschen, die nicht gut lesen können:

  • Fügen Sie Bilder, Videos und Audio-Inhalte hinzu.

  • Vermeiden Sie den höchsten Kontrast zwischen Text und Hintergrund (z. B. Schwarz auf Weiß). Aber achten Sie darauf, dass der Kontrast für Menschen mit Sehbehinderung passt.

Für Menschen, die Probleme mit Text haben, sind andere Formate wie Bilder, Audio und Video besser. Für Menschen mit Schwierigkeiten beim Lesen kann der höchste Kontrast auch anstrengend sein. Farben mit leichtem Kontrast, zum Beispiel Dunkelgrau gegen Weiß oder Off-White, können hier helfen.

Designüberlegungen für Anfallserkrankungen

DesignüberlegungenWarum?

Für Menschen, die Probleme mit Text haben, sind andere Formate wie Bilder, Audio und Video besser. Für Menschen mit Schwierigkeiten beim Lesen kann der höchste Kontrast auch anstrengend sein. Farben mit leichtem Kontrast, zum Beispiel Dunkelgrau gegen Weiß oder Off-White, können hier helfen.

Blinkende oder flackernde Inhalte können bei anfälligen Benutzern epileptische Anfälle auslösen.