ABOUT WEB DISABILITY SIMULATOR

The Web Disability Simulator lets you experience how people with different disabilities can experience/perceive a website. The simulator creates an experience that gives you a better understanding of the importance of web accessibility and this tool can simulate color blindness, low vision, dyslexia and more.

Web disability simulator contains the following simulators:

• different types of Color vision defects
• tunnel vision or far-sightedness
• web in strong sunshine
• Parkinsons
• dyslexia or small vocabulary
• concentration difficulties

Web disability simulator gives you

• brief facts about different types of obstacles that people experience
• tips on how to build accessible websites
• links to websites where you can learn more about digital accessibility

Web disability simulator gives Lens Options:

• Low Acuity: Simulates reduced visual acuity
• Low Contrast Sensitivity: Highlights issues related to contrast
• Color blindness: Demonstrates color perception challenges
• Visual Snow, Glare, Ghosting, and Cataracts: Shows visual disturbances
• Nystagmus: Simulates rapid, involuntary eye movement
• Obstructed Visual Field: Illustrates limited field of view

STEPS TO WORK WITH WEB DISABILITY SIMULATOR:

1. Install the web disability simulator on your chrome browser by visiting https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla
2. The goal of this tool is to raise awareness of web accessibility and the different kinds of problems users with a disability may encounter when using a web page
3. Navigate to the webpage you want to test
4. Click on the Web Disability Simulator icon in the Chrome toolbar to open the plugin’s menu
5. The plugin’s user interface will open in a small pop-up window
6. The plugin provides several simulations to test how your website looks for people with different disabilities:
7. Vision Disabilities:
   • Color Blindness:
   • Protanopia (red-blind): Simulates difficulty distinguishing between red and green
   • Deuteranopia (green-blind): Simulates difficulty distinguishing between red and green
   • Tritanopia (blue-blind): Simulates difficulty distinguishing between blue and yellow
   • Monochromacy (total color blindness): Simulates a complete lack of color perception, where everything is in shades of gray
   • Low Vision:
   • Blurred Vision: Simulates a blurry view, as if someone has poor eyesight or cataracts
   • Tunnel Vision: Simulates the effect of narrowing vision, where peripheral vision is restricted
   • Central Vision Loss: Simulates macular degeneration or other conditions where central vision is lost but peripheral vision remains intact
8. Contrast Sensitivity: Simulates reduced contrast sensitivity, which can make it harder to distinguish objects from their background, especially for people with cataracts or certain types of vision loss.
9. Hearing Disabilities:
   
   1. No Sound: Simulates the experience of having no hearing, which can help assess how important auditory content is for accessibility
10. Cognitive Disabilities:
    
    1. Dyslexia Simulation: Simulates how text may appear to individuals with dyslexia, such as distorted or jumbled text
    2. ADHD Simulation: Simulates the experience of ADHD, showing how the page might look to someone with attention difficulties (e.g., distractions, focus issues)
11. Mobility Disabilities:
    
    1. Limited Dexterity: Simulates how someone with limited dexterity (e.g., arthritis) might interact with the page, such as needing larger clickable areas
12. After selecting a disability type, the simulation will automatically apply to the page
13. Your webpage will change according to the selected disability, allowing you to evaluate how well the content and functionality are still accessible
14. You can test the site with multiple disabilities by selecting and applying different simulations one at a time
15. Now, to evaluate the website, follow below steps:
    
    1. Navigation: Check if interactive elements (links, buttons, form fields) are still easy to find and use
    2. Content readability: Ensure the text is still legible for users with low vision or color blindness
    3. Visual and auditory content: Evaluate if your site is understandable and usable for users with hearing impairments (e.g., missing captions on videos, important sounds not being conveyed visually)
    4. Cognitive accessibility: Assess whether the site is easy to understand and use for individuals with cognitive disabilities (e.g., dyslexia, ADHD)
16. After evaluating how your site performs under various simulations:
    
    1. Improve contrast: Ensure text has enough contrast against its background to be readable for users with vision impairments
    2. Check for color reliance: Make sure your site doesn’t rely on color alone to convey meaning. Use text labels or patterns as well
    3. Optimize navigation: Ensure that interactive elements are easy to find and use, with adequate space and clear focus indicators
    4. Provide alternatives for audio: For users with hearing impairments, ensure all audio-based content has text alternatives (like captions or transcripts)
    5. Reduce distractions: Ensure that the website is easy to focus on and doesn’t overwhelm users with ADHD or other cognitive impairments
17. You can continue testing by applying different disabilities to see how accessible your site is for each group of users
18. You can repeat the process for different disabilities to ensure your website is as accessible as possible for all users

ABOUT NO COFFEE VISION SIMULATOR

Another way to test a website for color blindness or low vision is to use a browser plugin like NoCoffee Vision Simulator. This plugin allows you to simulate what the site would look like to someone with a specific type of color vision deficiency, which can be very helpful in finding potential accessibility issues. The Firefox extension allows you to layer simulations of visual impairments over any web page, as well as adjusting the intensity of different conditions.

Being mindful of how users with visual impairments may be viewing sites could & should inform the way we architect our web projects.

NoCoffee has more options for simulating blur, contrast loss, cataracts and other conditions, beyond colour filters, but it’s important to note that these simulation layers are just that — simulations. They’re not medically or scientifically audited, by the author’s own admission; but NoCoffee is a fantastic first step towards widening awareness of the myriad visual impairments your website’s users may have.

STEPS TO WORK WITH NOCOFFEE VISION SIMULATOR:

1. Install the No Coffee vision simulator on your Firefox browser by visiting https://addons.mozilla.org/en-US/firefox/addon/nocoffee/
2. Click on the “Add to Firefox” button and complete the installation
3. Click on the No Coffee icon in the Firefox toolbar to open the extension’s menu.
4. The No Coffee Vision Simulator popup will appear with different options to simulate various vision impairments
5. The plugin offers multiple simulation modes, each corresponding to different visual disabilities. You can choose from the following:
6. Color Vision Deficiency (Color Blindness): Simulate the most common forms of color blindness, such as:
   
   1. Protanopia (red-blind)
   2. Deuteranopia (green-blind)
   3. Tritanopia (blue-blind)
   4. Monochromacy (no color vision)
7. Low Vision: Simulate conditions like:
   
   1. Blurred Vision: Helps simulate the effect of a blurry vision.
   2. Tunnel Vision: Shows how a person with restricted peripheral vision sees.
   3. Central Vision Loss: Simulates conditions such as macular degeneration, where a person loses central vision but retains peripheral vision.
   4. Other types of vision impairments can also be simulated, such as reduced contrast sensitivity.
8. Contrast Adjustment: Simulate how text and images look with high or low contrast, which is crucial for testing accessibility for users with visual impairments like cataracts or other contrast sensitivity issues.
9. Focus Mode: Simulates visual disabilities where focus and clarity are impaired.
10. Go to the website or webpage you want to test.
11. While on the page, click the No Coffee Vision Simulator icon in your toolbar again to open the settings.
12. Select the specific vision condition you want to simulate.
13. The webpage will immediately adjust its appearance according to the selected vision impairment.
14. Let us evaluate Accessibility now
    
    1. Check visual clarity: See if the content is still accessible, especially the text and images, under the simulated conditions.
    2. Test for color contrast: Ensure that your website uses sufficient color contrast, especially between text and background, to make content readable for those with color blindness or low vision.
    3. Review navigation and focus: See if interactive elements (such as links, buttons, and forms) are still usable and clearly visible.
    4. Use screen readers: Combine the plugin with a screen reader to test how well content is accessible when it’s not visually clear.
15. To make the necessary adjustments
    
    1. Improve text contrast: Ensure text has high contrast against its background.
    2. Ensure readable font sizes: Make sure fonts are large enough to be read by people with low vision.
    3. Avoid reliance on color alone: Use text labels or patterns along with colors to ensure information is accessible to color-blind users.
    4. Optimize layout and navigation: Ensure that interactive elements are easy to find and use for people with low or blurry vision.
16. After testing, you can reset the website to its normal view by turning off the simulator in the No Coffee extension
17. You can repeat the process for different vision conditions to ensure your site is universally accessible to a broad range of users with various visual impairments
18. Additionally you may read https://accessgarage.wordpress.com/2013/02/09/458/
19. To run from CLI mode, read https://github.com/eeejay/NoCoffee

DEMO APPLICATIONS TO PRACTICE:

https://broken-workshop.dequelabs.com/   

https://dequeuniversity.com/demo/dream  

https://webtestingcourse.dequecloud.com/  

https://dequeuniversity.com/demo/mars/  

https://findanexpert.unimelb.edu.au/  

https://dylanmhowell.com/seo-for-photographers/  

https://www.ssa.gov/accessibility/andi/help/demo/index.html  

https://scout-app.io/  

https://www.washington.edu/accesscomputing/AU/