Low Vision

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 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

Sources for 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

ZoomText examples

Introduction to ZoomText and Screen Magnifiers, with captions.

Leanne Clough illustrates the benefits of ZoomText. Transcript in the comments below [the video on Vimeo's site].

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