Inclusive design for people with low vision needs
We are keeping visual disabilities in mind when creating educational images.
1.5 million Canadians identify as having visual impairment. We will discuss low vision impairment and how we need to think differently about our approach to visual communication to include as many end users as possible regardless of disability.
Before we talk about low vision impairments, let's understand how we see
STRUCTURES OF THE HUMAN EYE AND THEIR FUNCTION
Any damage or age related degradation to these structures can result in loss of vision
The retina is located at the back of the eye and is a layer lined with nerves that sense light and create electrical impulses sent to the brain via the optic nerve.
The optic nerve is a bundle of millions of nerves that send electrical impulses of visual images to the visual cortex in the brain. Our brain and eye need to be directly connected for us to see. The retina sees images upside down, and our brains reverse the image and turn it right side up.
The pupil is the dark central opening located in the middle of the iris. It functions like a camera lens aperture to focus vision, opening and closing to let in more or less light (it opens wider in low light to allow more in and closes in to let less light in when it is bright).
The iris is the coloured part of the eye that functions to open and close the pupil.
These are muscles located behind the iris that control the opening and closing of the iris to focus vision.
The lens is located behind the iris and is a transparent tissue that focuses light through the eye.
This area in the retina has special light-sensitive cells that focus fine details in our central vision.
The cornea is the outer window in front of the eye that sharpens and focuses light into the eye.
The sclera is the eye's outer layer that surrounds the eyeball and is continuous with the cornea.
Vitreous humor is a transparent material that fills the central cavity of the eye.
The choroid is a thin middle layer of tissue lining the eyeball made almost exclusively of blood vessels that supply oxygen and nutrients to the retina.
Low vision impairment
Legal blindness is when a person's visual field is 20 degrees or less, or their best visual acuity (clarity) is 20/200, which means that the person needs to be 20 feet away to see something seen 200 feet away by a person with 20/20 vision. These individuals rely heavily on assisted technology to navigate online content, such as screen readers and magnifiers.
Low vision is when a person has sight remaining, but it cannot be corrected with glasses, contacts or surgery. A broad range of low vision causes are often age-related (glaucoma, cataracts, macular degeneration and retinopathy) and can also result from brain injuries or genetics. Other terms, such as "partially sighted" and "sight-impaired", are also used. Symptoms include blurry/hazy sight, poor night vision and blind spots. Difficulties with seeing a television or computer screen, driving, reading, and recognizing faces may be experienced.
World Health Organization visual impairment classification
20/30 to 20/60, mild vision loss, or near-normal vision
20/70 to 20/160, moderate low vision
20/200, severe low vision
20/500 to 20/1000, profound low vision
Less than 20/1000, near-total low vision
No light perception, total blindness
Inclusive design strategies for low vision impairment
Types of digital images
First, it is essential to distinguish between different image types to determine which needs more focus to include accessibility and inclusive design.
Informative and complex images: Images that convey information, whether they are complex or straightforward. An example of a simple image might be a social media icon. Complex images that give a lot of information, such as graphs, charts, intricate illustrations, maps, etc., need an inclusive design and alternative text.
Decorative images: These images do not convey any information or content, such as decorative illustrations, borders and images that already have text describing what they are.
Low vision issues and user needs
Visual Acuity (Clarity)
The sharpness or clarity of vision is measured by how well a person can focus on an object, and it is calculated by what an average person can read at 20 ft (20/20). If a person has 20/40 vision, they can read at 20 feet what normal vision can read at 40 feet. A person's visual acuity depends on the retina and the ability of the brain to interpret the image.
For users that have low visual acuity, you need to consider the following:
larger text size, clearly readable font, proper capitalization, and size of elements
increased spacing of letters, words, justification, borders and margins
proportional text increases and stylization of headers, subheaders and body text
Photophobia is common for people with low vision. Bright screens and lights can make it difficult to see, causing headaches and eye pain. Those afflicted will often turn down the brightness of their screen and need low brightness text. When a user cannot control the text and background colours, an option is to avoid white text on a dark background since it can cause strain to the user's eyes. Use lower contrasting colours such as grey that still meet minimum contrast requirements.
Sensitivity to contrast
Others may need high contrast text due to loss of contrast sensitivity and how easily they can distinguish text on a background. High contrast can be shown either as light text on a dark background or dark text on a light background. Ideally, a user can adjust the text contrast themselves, but when creating images, these ratios (Level AA) need to be followed:
Large text is 18pt (24px) or bold 14pt (18.5px): contrast ratio needed 3:1
Regular text is 12pt (14px): contrast ratio needed 4.5:1
Non-text UI components or graphical objects: contrast needed 3:1
Contrast ratios refer to how bright or dark colours appear on screen and range from 1-21 (written as 1:1- white on white and 21:1- black on white). The first number, L1, is the luminance or brightness of light colours, and L2 is the second number and refers to the relative luminance of dark colours.
This Colour Contrast Analyser (CCA) is a great application to check foreground and background contrast ratios.
Field of vision loss
180 degrees left to right and 150 degrees up and down is the typical range for a standard field of vision. For people who have a field of vision loss, there are three groups:
Central field loss – Vision is missing or reduced in the middle of a person's vision
Peripheral field loss – Only a central portion of vision can be seen
Other field loss – There are scattered or patches of vision loss, vision loss in the right or left field of vision or elsewhere
To help navigate the digital content more easily, web users with a field of vision loss need scrolling that rewraps for one direction, reflows to a single column and uses scrollbars and groups of content spaced from unrelated content.
The above only details a few examples of low vision impairment and how it affects people with these disabilities navigating the web easily. There are a lot of resources at our disposal to learn more about how visual impairments can affect web navigation. It is essential to learn how to implement inclusive design strategies for people with low vision impairments, making access to online educational visual material more equitable. Here are some things to keep in mind:
Ensure minimum text sizes are utilized for clarity
Choose fonts that are easily readable and clear
Avoid using white text on a dark background
Ensure colour is not used as the only method used to convey information or identify content
Foreground and background colour combinations provide sufficient contrast
Ensure your images use good contrasting colours between elements that convey information
Use thicker line weights on strokes to improve visibility
Images of text are to be resizable, replaced with actual text, or avoided when possible
Implement concise alternative text for screen readers
Web Accessibility for Designers: https://webaim.org/resources/designers/
Web Accessibility tutorials: https://www.w3.org/WAI/tutorials/
Designing for Web Accessibility: https://www.w3.org/WAI/tips/designing/
Web Accessibility Standards: https://www.w3.org/WAI/fundamentals/accessibility-principles/#standards