Module 2: Visual
Visual impairment can range anywhere from total blindness to a mild loss of vision correctable with glasses or contact lenses. Legal definitions of blindness vary from country to country, but are usually measured in terms of two variables: visual acuity and field of vision.
Visual acuity is expressed by the pair of numbers resulting from examination using a standard Snellen chart Links to an external site., which tests how close a subject must be in order to focus on an object; visual field is expressed in degrees.
Colorblindness is a specific visual deficiency involving a reduced ability to distinguish between certain colors--most commonly red and green.
Barriers to users with visual disabilities include:
- Images
- Videos
- Infographics: graphs, bar and pie charts, etc.
- Banners with text rendered as a graphic image
- Complex tables
- Small or decorative fonts
- Low contrast
- Text elements distinguished by color
- Lists
Check out the A11y project's Primer to Visual Impairment. Links to an external site. Which of the conditions described apply to you or to someone you know?
Watch
Challenges and Solutions
Blindness
|
Challenges |
Solutions |
|---|---|
| Images, photos, graphics are unusable. | Provide text descriptions, in the alt attribute and, if necessary, longer explanations (either on the same page or with a link to another page). |
| Users often listen to the web pages. | Create links that allow users to skip over navigational menus, long lists of items, ASCII art, and other things that might be difficult or tedious to listen to. |
| Users often jump from link to link using the Tab key. | Make sure that links make sense out of context ("click here" is problematic). |
| Users generally do not use a mouse. | Don't write scripts that require mouse usage. Supply keyboard alternatives (e.g. use onFocus instead of onMouseover). |
| It may be difficult for users to tell where they are when listening to data table cell contents. |
Provide column and row headers (<th>) for data tables. |
| Complex data tables and graphs that are usually interpreted visually are unusable. | Provide summaries and/or text descriptions, preferably on the same page, or link to another page as an alternative. |
| Frames cannot be "seen" all at once. They must be accessed separately, leading to disorientation. | Don't use frames unless you have to. If you use them, provide frame titles that communicate their purpose (e.g. "navigational frame", "main content"). |
| Colors are unusable. | Do not rely on color alone to convey meaning. |
| Users expect links to take them somewhere. | Don't write scripts in links that don't have true destinations associated with them (e.g. href="javascript: function(this)") |
| Screen readers read web content in the literal order that it appears in the code. | Ensure that complex CSS or table layouts read correctly visually AND in the code. |
| Individuals cannot see the events in videos. | Provide audio descriptions of events in videos that cannot be interpreted by audio alone (e.g. have a narrator describe actions in videos for which there is no dialogue). |
Color Blindness
|
Challenges |
Solutions |
|---|---|
| Colors of similar contrast are often indistinguishable. | Make sure that there is sufficient contrast. Don't use color alone to convey meaning (supplement the color with text, for example). |
Low Vision
|
Challenges |
Solutions |
|---|---|
| Users often use screen enlargers. | To reduce that amount of horizontal scrolling, use relative rather than absolute units (e.g., use percentages for table widths, instead of pixels). |
| Text in graphics does not enlarge without special software, and looks pixilated when enlarged. | Limit or eliminate text within graphics. Use anti-aliasing to make text crisp and readable. |