Web Accessibility III: Make Your Website Accessible to Low Vision Users

This is the third post of the Web Accessibility Series. You will learn what low vision users need for web content, tools, and technologies to be accessible in six steps. It includes an overview of types of low vision and describes specific user needs.

In a fact sheet on visual impairment and blindness, the World Health Organization (WHO) estimates that there are 246 million people worldwide who have low vision and 39 million people are blind, indicating that 86% of the people with visual impairments have low vision. - World Health Organization (WHO)

"Low vision" refers to visual impairments other than blindness. In many contexts, the low vision includes only disabilities that are not corrected with normal glasses, contact lenses, medication, or surgery. Most of the low vision is caused by eye diseases and health problems, such as cataracts, glaucoma, and diabetes. These are more prevalent in older people, and some vision problems are caused by injuries or birth conditions.

If you missed the two previous posts in this series, you can check out and learn more about accessibility for keyboard and screen reader users.

Types of Visual Impairments

There are 5 types of visual impairment that affect the use of the web, not including total blindness:

Visual acuity (clarity): Visual acuity is the clarity or sharpness of the vision. It usually depends on the functioning of the retinal part of the eye and the interpretation of the brain. Some low visual acuity can be corrected with glasses, contact lenses, or surgery - and some can't. Therefore, some people will have the blurry vision (low visual acuity), no matter what.
Light sensitivity: Many people with low vision have extreme sensitivity to light (called photophobia). The strong light makes it difficult or impossible to see and causes pain in the eyes and headaches. For some people, the normal brightness of a computer screen with a bright background is not readable and causes pain. They need to change the background to a darker color.
Contrast sensitivity: Contrast sensitivity is the ability to distinguish light and dark areas from images, for example, to discern text in the background, such as gray text on a light background.
Field of vision: The area from which a person's eye is able to collect visual information when looking straight ahead is called the field of view or visual field. People generally have a field of view of approximately 180 degrees and some people have a smaller field of view, called field loss. They may have reduced or absent in the middle of vision, only see in the central portion of the visual field (tunnel vision), or have scattered patches of obscured vision.
Color vision: Some people can't see certain colors well or can't see at all, but it's very rare for a person to be unable to see any color. This usually happens because of deficiencies in the cone receptors in their eyes, which are responsible for color perception. This is commonly called "color blindness".

Brightness

The bright light from a screen or other sources prevents some people with low vision (including those with photophobia and with reading disabilities such as dyslexia) from reading and causes pain for some people. Some people turn down the brightness of their screen or use an overlay.

A good solution that can help people with sensitivity to light is to enable them to set the overall brightness of a display or make dark mode functionality available to your application. For the second one, I recommend that you read the article A Complete Guide to Dark Mode on the Web from Adhuham in css-tricks. There you will find everything you need to know about toggling themes and dark mode.

Text Contrast

Some users need high contrast between text and background to have a good reading experience, mainly older people who lose contrast sensitivity from aging. Most of these people prefer and read better with dark text on a light background.

Using the right contrast is especially important for text. Using the wrong colors can decrease the readability drastically, and it will quickly tire the reader's eyes. We already know that black text on a white background has the highest readability, but there are other options that also work well together, such as black and yellow or blue and white. See the examples below:

<span
  style="background-color:black;color:yellow;"
>
  Yellow on black is easy to read
</span>

<span
  style="background-color:darkblue;color:white;"
>
  And so is white on dark blue.
</span>

However, there are combinations, such as red and green, that are particularly hard for many people to read. A combination of red and blue creates a vibrating effect that can also make reading very difficult. Example:

<span
  style="background-color:red;color:green;"
>
  Green on red is hard to read.
</span>

<span
  style="background-color:darkblue;color:red;"
>
  And so is red on blue.
</span>

Low-contrast colors also detract the user experience and tire their eyes easily. Example:

<span
  style="background-color:lightgray;color:gray;"
>
  Low contrast between light background and gray text.
</span>

<span
  style="background-color:darkgreen;color:green;"
>
  Also in the combination of two very similar colors.
</span>

You can easily identify bad combinations and test all possibilities of contrast between text and background using a contrast color checking tool. I recommend the snook.ca tool, which will also indicate if the colors pass the newer WCAG 2.0 contrast ratio formula.

Tracking

Tracking is following along lines of text, including getting from the end of one line to the beginning of the next line of text. It is also impacted by leading, justification, and margins and borders, especially when blocks of text are in columns or near other text.

For many people, with and without disabilities, it's difficult to read when they have to scroll back and forth to read a line of text. When people with low vision increase the text size and the text doesn't "reflow", they sometimes have to scroll horizontally several screens to read a single line of text. The same happens with columns, making it harder to scroll from the bottom of a column of text to the top of another column or to read very long lines of text than shorter lines.

Tips for creating an accessible application for tracking:

Blocks of text rewrap so that only one direction of scrolling is required (usually vertical scrolling).
Reflow to blocks of text in one continuous block, instead of in multiple columns.
Avoid using very long lines.
Support zoom screen: ensure that if the user is using the zoomed browser when accessing your application, the layout will grow fluidly.
Turn off hyphenation by default (the same doesn't apply to very long words).

Text Readability

Text readability impacts how hard it is to perceive letters and includes text size, font, style, capitalization, and size of all elements. All of these factors are essential to ensure a good reading experience for a user with low vision.

Some people need a larger text in order to perceive letters. Although increasing size is most common, some people with tunnel vision and good visual acuity may prefer smaller letters so they can see more words at a time.

Tips for creating an accessible application with readable texts:

Support zoom screen: ensure that if the user is using the zoomed browser when accessing your application, the layout will grow fluidly.
Give preference to fonts optimized for reading for the main content. Google Fonts has good (and free) fonts like "Open Sans", "Quicksand", "Roboto", "Lato" and "Ubuntu".
Avoid using bold, underline, or italics too often.
Text in all capital letters is more difficult to read for most people, avoid using too much.

Spacing for Reading

Spacing such as space between lines and space between words impacts readability. Line height, letter spacing, word spacing, justification, margins and borders, and spacing between elements, also directly affect the reading experience of the low vision user.

Sometimes full justification makes reading more difficult because extra space between words causes "rivers of white" making it difficult to track along with a line of text, or less space between words makes it difficult to distinguish separate words.

If text is close to the edges, it is hard for low vision users to distinguish letters and it negatively impacts readability. Having wide margins around blocks of text helps some people focus on the text and not get distracted by surrounding text. This is especially important for tracking when blocks of text are in columns or near other text. However, for people with tunnel vision, wide margins could make it hard to track text.

Tips on good usage of spacing for reading:

Use enough space for leading (line spacing, line height), letter spacing, and word spacing in the text blocks.
Avoid using justify text as indentation, give preference to the left-aligned pattern.
Use margin around blocks of text that are large enough to separate the content, as wide margins make it more difficult for people with tunnel vision to experience.
Spacing groups related elements and separates less related elements. For example, having more space above a heading and less space below it helps associate the heading with the text below.

References:

The next post of the "Web Accessibility Series" will talk about accessibility to users with dyslexia. See you there!

Happy coding!

Cheers,

Tati