Low Vision

From perpendicular angel knowledgebase
Revision as of 19:01, 29 July 2020 by Kirabug (talk | contribs)
Jump to navigation Jump to search

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

How to design mobile app experiences for the visually impaired by Ayesha Zafar on Invision discusses steps specific to mobile interactions.

Tools

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