skip to main contentskip to main menuskip to footer Universität Bielefeld Play Search
  • Accessibility Services (ZAB)

    Logo der ZAB, bunte Kreise mit Schriftzug Zentrale Anlaufstelle Barrierefrei
    View of a smartphone with orientation map of the UniMaps app
    © ZAB - Bielefeld University

How do people with impairments experience a website?

Switch to main content of the section

Web Disability Simulator

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

The Web Disability Simulator helps you to better understand the importance of web accessibility by allowing you to experience how users with disabilities perceive a web page. 

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

You can test the Chrome extension in the Google Chrome browser and your website yourself. Alternatively, we have translated the descriptions of the simulations here and visualised them with screenshots and a video.

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

On this page we explain, based on the Web Disability Simulator, how users with impairments can experience a website.

Visual impairments

Switch to main content of the section
Cover Bild des Posters Designing for accessibility, sechs farbige Icons
This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAllike International License

Designing for Accessibility posters

When we have a better understanding of accessibility we can design services that work for everyone, regardless of their access needs.

These posters illustrate how you can make your service accessible for people with various access needs.

A visual poster with 'Do...' and 'Don't...' in English.

  • 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

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

 

The poster 'Designing for accessibility' as PDF

Total colour blindness

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

People with colour vision deficiency have difficulty distinguishing some or all colours. Total colour blindness (monochromatism / achromatopsia) is very rare. People with this visual impairment cannot perceive colours, but only different shades of grey.

  • Do not use colour as the only way to convey information, to indicate an action or to identify an item.
  • Do not just mark an incorrect form field with a red border, for example, but supplement it with text and preferably an icon.
  • Think about offering a high contrast mode

Yellow-blue colour blindness

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

People with colour vision deficiency have difficulty distinguishing some or all colours. Yellow-blue colour blindness (tritanopia) is rare. The name can be misleading. It is not the colours yellow and blue that are confused, but blue with green and yellow with violet.

  • Do not use colour as the only way to convey information, to indicate an action or to identify an item.
  • Do not just mark an incorrect form field with a red border, for example, but supplement it with text and preferably an icon.
  • Think about offering a high contrast mode

Red-Green Colour blindness

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

People with colour vision deficiency have difficulty distinguishing some or all colours. Red-green colour blindness (protanopia and deuteranopia) is the most common form of colour blindness. It is more common in men than in women. People with red-green colour blindness have difficulty distinguishing the colours red, green, brown and orange.

  • Do not use colour as the only way to convey information, to indicate an action or to identify an item.
  • Do not just mark an incorrect form field with a red border, for example, but supplement it with text and preferably an icon.
  • Think about offering a high contrast mode

Long-sightedness

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

Long-sightedness (hyperopia) is one of the most common forms of visual impairment.

People with hyperopia have difficulty focusing on objects at close range, making them appear blurred.

  • Avoid texts in small font sizes and long texts.
  • Use appropriate spacing and line heights.
  • Make sure the website can be zoomed to at least 200%.

Tunnel vision

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

What is commonly called tunnel vision is the loss of peripheral vision. This can be due to a disease affecting the cells in the eye, but can also happen temporarily due to stress or depression.

  • Avoid text in small font sizes and long text.
  • Use appropriate spacing and line heights.
  • Make sure the website can be zoomed to at least 200%.

Sunlight

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

Many people need to use their computer outside in bright sunshine. This can make it harder to see what is on the screen. Make sure there is sufficient contrast between the text and its background.

  • Use a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
  • Check the contrast with the colour contrast analyser or the contrast ratio.

Impairment of mobility

Parkinson's disease

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

Parkinson's disease destroys the cells in the brain that produce dopamine, reducing the brain's ability to send signals. People with Parkinson's can suffer from symptoms such as tremors, stiff muscles and reduced mobility. The causes of Parkinson's disease are still unclear.

  • Make sure that the website can be used with tools other than a mouse, such as keyboard navigation.
  • Have enough space between elements.
  • Make areas large enough for clickable actions  

Impairment of reading and writing

Dyslexia

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

Dyslexia is a disability that makes it difficult for the brain to automate the interpretation of words. This makes it difficult for people with this disability to read and write. There is no connection between dyslexia, vision or intelligence. The causes of dyslexia are still unclear.

  • Avoid texts in small font sizes and long texts.
  • Use correct spacing and line heights.
  • Avoid difficult words and terms. Offer easy-to-read texts, pictures, video or audio alternatives.
  • Avoid fonts with complicated and complex characters.

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'

Small vocabulary

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

A large proportion of the world's population cannot read at all, and many adults do not read as expected after finishing primary school.

  • Avoid difficult words and terms.
  • Offer easy-to-read texts, pictures, video or audio alternatives.
  • Offer texts in different languages.

Impairment of concentration

Concentration

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

Concentration can be difficult for anyone, but for some it can be a big problem in everyday life. Disabilities such as ADHD and autism can lead to difficulties in processing external stimuli, sorting information and sensitivity to sound.

  • Give the website a simple and clean design.
  • Be careful when using animation and bold colours.
  • Avoid having too much content on one page.
  • Offer image, audio and video alternatives to text content.

The Web Disability Simulator helps you to better understand the importance of web accessibility by allowing you to experience how users with disabilities perceive a web page. 

back to top