zum Hauptinhalt wechseln zum Hauptmenü wechseln zum Fußbereich wechseln Universität Bielefeld Play Search

Zentrale Anlaufstelle Barrierefrei

Logo der ZAB, bunte Kreise mit Schriftzug Zentrale Anlaufstelle Barrierefrei
Blick auf ein Smartphone mit Orientierungskarte der UniMaps App
© ZAB - Universität Bielefeld

Wie erleben Menschen mit Beeinträchtigungen eine Webseite?

Zum Hauptinhalt der Sektion wechseln

Web Disability Simulator

Logo Web Disability Simulator
© https://opensource.org/licenses/ISC

Der Web Disability Simulator schafft eine Erfahrung, die ein besseres Verständnis für die Bedeutung der Barrierefreiheit im Web vermittelt.

(https://github.com/Metamatrix/Web-Disability-Simulator)

Sie können die Chrome Erweiterung im Google Chrome-Browser und Ihre Webseite selber testen. Alternativ haben wir hier die Beschreibungen der Simulationen übersetzt und mit Screenshots und einem Video visualisiert.

eingeblendeter Web Disability Simulator auf einer Webseite
© ZAB - Universität Bielefeld

Auf dieser Seite erläutern wir auf Basis des Web Disability Simulators, wie Benutzer mit Beeinträchtigungen eine Webseite erleben können.

Beeinträchtigungen der Sehkraft

Zum Hauptinhalt der Sektion wechseln
Cover Bild des Posters Designing for accessibility, sechs farbige Icons
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAllike International License

Poster Designing for accessibility

Ein Verständnis für Barrierefreiheit bedeutet, dass wir Dienste aufbauen können, die für alle Menschen funktionieren, unabhängig von ihren Zugangsbedürfnissen.

Diese Poster zeigen, wie Sie Ihren Dienst für verschiedene Zugangsbedürfnisse zugänglich machen können.

Ein visuelles Poster mit 'Do...' and 'Don't...' in Englisch.

  • Designing for users on the autistic spectrum
  • Designing for users of screen readers
  • Designing for users with low vision
  • Designing for users with dyslexia
  • Designing for users with physical or motor disabilities
  • Designing for users who are deaf or hard of hearing
  • Designing for users with anxiety

Quelle: https://ukhomeoffice.github.io/accessibility-posters/posters/accessibility-posters.pdf

 

Das Poster 'Designing for accessibility' als PDF

Totale Farbenblindheit

Screenshot einer durch den Web Disability Simulator veränderten Webseite
© ZAB - Universität Bielefeld

Menschen mit vermindertem Farbensehen haben Schwierigkeiten, einige oder alle Farben zu unterscheiden. Totale Farbenblindheit (Monochromatismus / Achromatopsie) ist sehr selten. Menschen mit dieser Sehschwäche können keine Farben wahrnehmen, sondern nur verschiedene Grautöne.

  • Verwenden Sie Farbe nicht als einzige Möglichkeit, um Informationen zu vermitteln, eine Aktion anzuzeigen oder ein Element zu identifizieren.
  • Markieren Sie z. B. ein fehlerhaftes Formularfeld nicht nur mit einem roten Rahmen, sondern ergänzen Sie es mit einem Text und vorzugsweise einem Symbol.
  • Ziehen Sie in Erwägung, einen Modus mit hohem Kontrast anzubieten.

Gelb-blaue Farbenblindheit

Screenshot einer durch den Web Disability Simulator veränderten Webseite
© ZAB - Universität Bielefeld

Menschen mit vermindertem Farbsehvermögen haben Schwierigkeiten, einige oder alle Farben zu unterscheiden. Gelb-Blau-Farbenblindheit (Tritanopie) ist selten. Der Name kann irreführend sein. Es sind nicht die Farben Gelb und Blau, die verwechselt werden, sondern Blau mit Grün und Gelb mit Violett.

  • Verwenden Sie Farbe nicht als einzige Möglichkeit, um Informationen zu vermitteln, eine Aktion anzuzeigen oder ein Element zu identifizieren.
  • Markieren Sie z. B. ein fehlerhaftes Formularfeld nicht nur mit einem roten Rahmen, sondern ergänzen Sie es mit einem Text und vorzugsweise einem Symbol.
  • Ziehen Sie in Erwägung, einen Modus mit hohem Kontrast anzubieten.

Rot-Grün-Farbenblindheit

Screenshot einer durch den Web Disability Simulator veränderten Webseite
© ZAB - Universität Bielefeld

Menschen mit vermindertem Farbsehvermögen haben Schwierigkeiten, einige oder alle Farben zu unterscheiden. Die Rot-Grün-Farbenblindheit (Protanopie und Deuteranopie) ist die häufigste Form der Farbenblindheit. Sie tritt bei Männern häufiger auf als bei Frauen. Menschen mit Rot-Grün-Farbenblindheit haben Schwierigkeiten, die Farben Rot, Grün, Braun und Orange zu unterscheiden.

  • Verwenden Sie Farbe nicht als einzige Möglichkeit, um Informationen zu vermitteln, eine Aktion anzuzeigen oder ein Element zu identifizieren.
  • Markieren Sie z. B. ein fehlerhaftes Formularfeld nicht nur mit einem roten Rahmen, sondern ergänzen Sie es mit einem Text und vorzugsweise einem Symbol.
  • Ziehen Sie in Erwägung, einen Modus mit hohem Kontrast anzubieten.

Weitsichtigkeit

Screenshot einer durch den Web Disability Simulator veränderten Webseite
© ZAB - Universität Bielefeld

Weitsichtigkeit (Hyperopie) ist eine der häufigsten Sehbehinderungen. Menschen mit Hyperopie haben Schwierigkeiten, Objekte im Nahbereich zu fokussieren, wodurch diese unscharf erscheinen.

  • Vermeiden Sie Texte in kleinen Schriftgrößen und lange Texte.
  • Verwenden Sie angemessene Abstände und Zeilenhöhen.
  • Stellen Sie sicher, dass die Website auf mindestens 200% gezoomt werden kann.

Tunnelblick

Screenshot einer durch den Web Disability Simulator veränderten Webseite - runder Kreisauschnitt, der Rest schwarz
© ZAB - Universität Bielefeld

Was allgemein als Tunnelblick bezeichnet wird, ist der Verlust des peripheren Sehens. Dies kann auf eine Krankheit zurückzuführen sein, die die Zellen im Auge beeinträchtigt, kann aber auch vorübergehend aufgrund von Stress oder Depressionen auftreten.

  • Vermeiden Sie Texte in kleinen Schriftgrößen und lange Texte.
  • Verwenden Sie angemessene Abstände und Zeilenhöhen.
  • Stellen Sie sicher, dass die Website auf mindestens 200% gezoomt werden kann.

Sonnenschein

Screenshot einer durch den Web Disability Simulator veränderten Webseite
© ZAB - Universität Bielefeld

Viele Menschen müssen ihren Computer draußen im hellen Sonnenschein benutzen. Das kann es schwieriger machen, zu sehen, was auf dem Bildschirm ist. Sorgen Sie für einen ausreichenden Kontrast zwischen dem Text und seinem Hintergrund.

  • Verwenden Sie ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text.
  • Prüfen Sie den Kontrast mit dem Farbkontrastanalysator oder dem Kontrastverhältnis.

Beeinträchtigung der Mobilität

Parkinson

Screenshot einer durch den Web Disability Simulator veränderten Webseite
© ZAB - Universität Bielefeld

Bei der Parkinson-Krankheit werden die Zellen im Gehirn zerstört, die Dopamin produzieren, wodurch die Fähigkeit des Gehirns, Signale zu senden, reduziert wird. Personen mit Parkinson können unter Symptomen wie Zittern, steifen Muskeln und eingeschränkter Beweglichkeit leiden. Die Ursachen der Parkinson-Krankheit sind noch unklar.

  • Achten Sie darauf, dass die Website auch mit anderen Hilfsmitteln als einer Maus bedient werden kann, z. B. mit einer Tastaturnavigation.
  • Sorgen Sie für ausreichend Platz zwischen den Komponenten.
  • Stellen Sie sicher, dass die Klickbereiche groß genug sind.

Beeinträchtigung des Lesens und Schreibens

Legasthenie - Dyslexie

Screenshot einer durch den Web Disability Simulator veränderten Webseite
© ZAB - Universität Bielefeld

Legasthenie ist eine Behinderung, die es dem Gehirn schwer macht, die Interpretation von Wörtern zu automatisieren. Das macht es für Menschen mit dieser Behinderung schwer, zu lesen und zu schreiben. Legasthenie hat keinen Zusammenhang mit dem Sehvermögen oder der Intelligenz. Die Ursachen der Legasthenie sind noch unklar.

  • Vermeiden Sie Texte in kleinen Schriftgrößen und lange Texte.
  • Verwenden Sie richtige Abstände und Zeilenhöhen.
  • Vermeiden Sie schwierige Wörter und Begriffe. Bieten Sie leicht lesbare Texte, Bilder, Video- oder Audioalternativen an.
  • Vermeiden Sie Schriftarten mit komplizierten und komplexen Zeichen.

Schriftart: OpenDyslexic

OpenDyslexic ist eine Schriftart, die speziell für legasthene Menschen entwickelt wurde. Manche legasthene Menschen haben Schwierigkeiten, die Richtung der Buchstaben zu unterscheiden oder es scheint ihnen, dass die Buchstaben nicht an ihrem Platz bleiben, sondern hin und her springen. In OpenDyslexic sind die Buchstaben unten etwas dicker.

  • Instapaper erlaubt die Einstellung auf OpenDyslexic.
  • Für Safari und Google Chrome gibt es Erweiterungen, die die Schrift im Browser umstellen.
  • Für iPad und iPhone hat Gonzalez einen eigenen, kostenlosen Browser entwickelt: OpenWeb
  • Firefox-Nutzer installieren einfach die Schriftart auf dem Computer und können sie dann über Einstellungen / Inhalt / Schriftarten und Farben einstellen.
  • Es gibt auch immer mehr eBooks, die OpenDyslexic als Schriftart anbieten.

weitere Informationen und Download der Schriftart 'OpenDyslexic'

Kleiner Wortschatz

Screenshot einer durch den Web Disability Simulator veränderten Webseite
© ZAB - Universität Bielefeld

Ein großer Teil der Weltbevölkerung kann überhaupt nicht lesen, und viele Erwachsene können nach Abschluss der Grundschule nicht so gut lesen wie erwartet.

  • Vermeiden Sie schwierige Wörter und Begriffe.
  • Bieten Sie leicht zu lesende Texte, Bilder, Video- oder Audioalternativen an.
  • Bieten Sie Texte in verschiedenen Sprachen an.

Beeinträchtigung der Konzentration

Konzentration

Screenshot einer durch den Web Disability Simulator veränderten Webseite
© ZAB - Universität Bielefeld

Jedem kann es schwerfallen, sich zu konzentrieren, aber für manche kann es ein großes Problem im Alltag sein. Behinderungen wie ADHS und Autismus können zu Schwierigkeiten bei der Verarbeitung von Eindrücken, der Sortierung von Informationen und der Empfindlichkeit gegenüber Geräuschen führen.

  • Geben Sie der Website ein einfaches und sauberes Design.
  • Seien Sie vorsichtig mit Animationen und kräftigen Farben.
  • Vermeiden Sie es, zu viele Inhalte auf einer Seite zu haben.
  • Bieten Sie Bild-, Audio- und Videoalternativen zu Textinhalten an.
Zum Seitenanfang