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.
Examples of low vision
- albinism
- brain injuries
- cataracts
- diabetic retinopathy
- eye injuries
- eye cancer
- glaucoma
- hemianopia
- macular degeneration
- retinal detachment
- retinitis pigmentosa
- various infections
Corrected vision is not generally considered a disability, however, both nearsightedness and farsightedness, when uncorrected, can be debilitating.
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 1.4.3 Contrast (Minimum) – Level AA.
- 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 2.4.7 Focus Visible – Level AA.
- 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.
Sources for the list above:
- 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
- Deque University accessibility training
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
Additional resources
- Responding to Color by the Cooperative Extension Service of the University of Kentucky.
- Karwai Pun’s Dos and Don’ts on designing for accessibility and the accompanying poster on designing for users with low vision.