Accessibility and usability problems for users with low vision

Use the low vision tab of aDesigner to simulate weak eyesight, color vision deficiencies, cataracts, and their arbitrary combinations. This simulation helps see how users with low vision experience a webpage. The first four sections that follow describe the low-vision-related problems that aDesigner can detect and how to address these problems. (Problems are listed in the Problem pane. Clicking on the line that describes a problem highlights the corresponding element.) The final section describes the severity values of the problems appearing in the Line View pane of the low vision mode.

Fixed-size font problems

Text with fixed-size fonts that cannot be enlarged by browser options presents a problem for those with vision problems. This problem occurs when a webpage uses a fixed size value, such as "8pt" or "5mm," as a font size. This problem can be addressed by using absolute-size keywords (for example, "large"), relative-size keywords (for example, "larger"), or percentage values as font sizes. (For information on how to set font sizes, see 15.7 Font size: The 'font-size' property.) Another solution is to provide a menu option that allows readers to select their own font sizes.

Small character problems

For some people with weak eyesight, some characters may be too small to read even when browser options permit them to use the largest font size available. When that happens, the reader needs additional assistive technologies. Small characters should not be used for layout purposes.

Text color problems

People with color vision deficiencies and cataracts can see colors, but they perceive them differently than people with normal vision. People with color vision deficiencies may have difficulties in reading texts even if their foreground and background colors are different. Such problems can be addressed by choosing sharply contrasting colors for the foreground and background.

Image color problems

People with color vision deficiencies and cataracts can see colors, but they perceive them differently than people with normal vision. If color alone conveys certain information, people with color vision deficiencies and cataracts will not perceive the information. Any information conveyed with color must be available without colors. For example, in a line graph, not only colors but also types of lines, such as solid, dotted and wavy lines, should be used to distinguish among the quantities of different items.

Severity values

Each problem in the low vision mode has its own severity value, which indicates the seriousness of the problem and is rated on a scale that ranges from 0 to 100. The higher the value, the more serious the problem.

The severity values of font-related problems (fixed-size font problems or small character problems) are 25. If an element has both a fixed-size font problem and a small character problem, these problems are combined and shown in one line in the Line View pane. In this case, the severity value becomes 50.

The severity values of color-related problem are evaluated using the definition of "relative luminance". The severity values are computed as follows:

  1. If the relative luminance between foreground color and background color is more than 7, the severity value is 0.
  2. If the relative luminance is less than 3, the severity value is 100.
  3. If the relative luminance between the threshold value, the severity value is the corresponding fraction between 0 and 100.

The severity values depend on the parameters you set. For a text element, aDesigner tests its foreground and background colors in the Simulation View. For an image, aDesigner tests colors of every combination of large connected components in the simulated image whose colors provide good color visibility in the original image.

The overall rating of a webpage is based on the total of the severity values of all of the problems detected in the page.

Related topics

Go to Index