Difference between revisions of "Low Vision"
| Line 21: | Line 21: | ||
* Use good contrasts and a readable font size. Ensure that your software passes [[WCAG Guideline 1.4.3 Contrast (Minimum)]] | * Use good contrasts and a readable font size. Ensure that your software passes [[WCAG Guideline 1.4.3 Contrast (Minimum)]] | ||
* Publish all information on web pages (HTML) | * Publish all information on web pages (HTML), not PDFs or other inflexible formats | ||
* Use a combination of color, shapes, and text | * Use a combination of color, shapes, and text | ||
* Follow a linear, logical layout and ensure text flows and is visible when text is magnified to 200% | * Follow a linear, logical layout and ensure text flows and is visible when text is magnified to 200% | ||
* Put buttons and notifications in context. | * Put buttons and notifications in context. | ||
* Provide a visible focus state. Ensure that your software passes [[WCAG Guideline 2.4.7 Focus Visible]] | |||
* Provide a clear visual distinction between content (text, images) and controls (buttons, links, etc.) | |||
We need to avoid: | We need to avoid: | ||
Revision as of 11:12, 20 July 2020
Low vision describes any number of situations where a person has lost a significant amount of their vision, but not enough to be considered blind. It can be caused by any of a number of factors, each of which presents as a slightly different set of visual challenges. These include:
- albinism
- brain injuries
- cataracts
- diabetic retinopathy
- eye injuries
- eye cancer
- glaucoma
- hemianopia
- macular degeneration
- retinitis pigmentosa
- retinal detachments
- various infections
Design Considerations
People with low vision may rely on the browser's zoom features, or they may use screen magnification software such as ZoomText or MAGic, which show a small portion of the screen at a time. Low vision users are also often screen reader users so keep those requirements in mind as well.
When designing for users with low vision, we need to:
- Use good contrasts and a readable font size. Ensure that your software passes WCAG Guideline 1.4.3 Contrast (Minimum)
- Publish all information on web pages (HTML), not PDFs or other inflexible formats
- Use a combination of color, shapes, and text
- Follow a linear, logical layout and ensure text flows and is visible when text is magnified to 200%
- Put buttons and notifications in context.
- Provide a visible focus state. Ensure that your software passes WCAG Guideline 2.4.7 Focus Visible
- Provide a clear visual distinction between content (text, images) and controls (buttons, links, etc.)
We need to avoid:
- Disabling pinch-to-zoom
- Using low color contrasts and small font sizes
- Burying information in downloads
- Only using color to convey meaning
- Spreading content all over a page and forcing a user to scroll horizontally when text is magnified to 200%
- Separating actions from their context
How to design mobile app experiences for the visually impaired by Ayesha Zafar on Invision discusses steps specific to mobile interactions.
Tools
- Macular Degeneration simulator and video
- Glaucoma simulator
- Simulator for Macular Degeneration, Diabetic Retinopathy, Cataracts, and Glaucoma
- WebAIM's Color Contrast Checker - will tell you if two colors you enter pass accessibility guidelines
ZoomText example
Additional resources
- Responding to Color (PDF) by the Cooperative Extension Service of the University of Kentucky.
- Dos and Don'ts on designing for accessibility and the accompanying poster on designing for users with low vision (PNG) by Karwai Pun at the UK Accessibility in Government Blog
