Visual in Diverse Abilities and Barriers, How People with Disabilities Use the Web
Accessibility: It's about people
Note: The examples given in this section are not a complete list of all disabilities or barriers.
Introduction
People with visual disabilities typically rely on changing the presentation of digital technology into forms that are more usable for their particular needs. For example by:
- Enlarging or reducing text size and images;
- Customizing settings for fonts, colors, and spacing;
- Listening to text-to-speech synthesis of the content;
- Listening to audio descriptions of video in multimedia;
- Reading text using refreshable Braille.
For these browsing methods to work, developers should use style sheets to separate content from its presentation and correctly code the structure so that it can be processed and presented in different ways by browsers and assistive technologies. For example, some people do not see the content and rely on lists, headings, tables, and other page structures to be properly coded so that they can be identified by browsers and assistive technologies.
Some people are only seeing small portions of the content at a time or are perceiving the colors and design differently. Some people are using customized fonts, colors, and spacing to make the content more readable, or they are navigating through the content using keyboard only because they cannot see the mouse pointer. An accessible design supports different presentations of the digital content and different ways of interaction.
Examples of visual disabilities
- Color vision deficiency – includes difficulty distinguishing between colors such as between red and green, or between yellow and blue, and sometimes inability to perceive any color (often called “color blindness”).
- Low vision – (in some regions also called “partial sight”) includes:
- Vision that is not sharp or clear (low visual acuity)
- Intolerance to light (photophobia or light sensitivity)
- Inability to distinguish bright and dim areas of images or text against a background (contrast sensitivity)
- Inability to obtain information when looking straight ahead (field of vision loss; can be central, peripheral, or scattered)
- Blindness – substantial, uncorrectable loss of vision in both eyes.
- Deaf-blindness – substantial, uncorrectable visual and hearing impairments.
Examples of barriers for people with visual disabilities
- Images, controls, and other structural elements that do not have equivalent text alternatives.
- Text, images, and page layouts that cannot be resized, or that lose information when resized.
- Missing visual and non-visual orientation cues, page structure, and other navigational aids.
- Video content that does not have text or audio alternatives, or an audio-description track.
- Inconsistent, unpredictable, and overly complicated navigation mechanisms and page functions.
- Text and images with insufficient contrast between foreground and background color combinations.
- Websites, web browsers, and authoring tools that do not support the use of custom color combinations.
- Websites, web browsers, and authoring tools that do not provide full keyboard support.
Stories related to visual disabilities
- Lakshmi, senior accountant who is blind
- Lexie, online shopper who cannot distinguish between certain colors
- Marta, marketing assistant who is deaf and blind
- Elias, retiree with low vision, hand tremor, and mild short-term memory loss
Video: Diverse Abilities and Barriers - Visual
This video is also available on a W3C server: Video: Diverse Abilities and Barriers - Visual (file format: MP4, file size: 318MB).
Text Transcript with Description of Visuals
| Audio | Visual |
|---|---|
| How People with Disabilities Use Digital Technology: Visual Disabilities | How People with Disabilities Use Digital Technology: Visual Disabilities |
| Visual disabilities affect how people see, including partial vision in one or both eyes, not seeing at all, or seeing in a range of different ways including colors and brightness. | Collage of 4 people using digital devices in various settings. |
| People who are blind use assistive technology on computers and mobile phones called screen readers. These software tools can read the information on the screen out loud, or they can present it in Braille. | Man with sunglasses uses laptop at desk. |
| Screen readers can process websites and apps with correctly coded headings, lists, links, button, and other structures much better. [Computer voice] Bird migration is the regular seasonal movement, often north and south along a flyway, between breeding and wintering grounds. Many species of bird migrate. Migration carries high costs. A map of the world, showing some example bird migration routes, image. | Website scrolls with text and images defining bird migration terms. The paragraph read by the screen reader is highlighted. |
| Websites and apps also need to work with the keyboard, and have text alternatives for images. | Man continues to use his laptop. |
| However, most people with visual disabilities are not blind but have some form of low vision. This means that people can partially see, just not clearly or within the full range of vision. | Woman on couch uses her mobile phone. She looks frustrated while trying to see something. |
| Some people with low vision use screen magnification software as a digital magnifying glass to enlarge everything on the screen. This includes images, text, and the mouse pointer. With this, people only see small parts of the screen at a time, so they rely on visual cues and consistent design in websites and apps to stay oriented and navigate effectively. | On her phone she activates the zoom feature which enlarges the view of a webpage. The page pans across the screen to take in all the content. |
| Others with low vision might not use the same assistive technology. They might adjust properties in the web browser or operating system, such as increasing the default text size, to better see the text. Websites and apps that are programmed and designed to adapt to the properties set by users, such as different text sizes, font type, and line spacing, allow people to use the content without the text overlapping, getting cropped, or requiring them to scroll both vertically and horizontally. | Man uses laptop but struggles to see the current webpage. He presses Control+ to increase the text size, but the words on the page start to overlap and become unreadable. |
| People who cannot distinguish certain colors are often called “color blind”. Websites and apps that avoid text with low contrast are easier to use. | Woman uses tablet while sitting on couch. |
| It’s also important that websites and apps don’t use only color to communicate information, but do use text and symbols in addition to color, such as an asterisk to indicate required input fields. | A web form for shopping checkout shows required fields both with red text labels and an asterisk. Instructions explain “Required fields are marked in red with an *”. |
| Some people are sensitive to bright light, so it’s important that websites and apps can adapt to the color schemes that people might set in their browsers and operating systems. | A search results webpage shown with white background and black text is changed to a black background with white text by selecting a browser setting to “Dark Theme”. |
| You can help make technology accessible to me. Accessibility: It’s about people. | Woman speaks the phrase, “You can help make technology accessible to me,” then pans to a collage of 12 people with different colored backgrounds. |
| For more information from the Web Accessibility Initiative on how people with disabilities use digital technology, visit w3.org/WAI/people | Accessibility: It’s about people; w3.org/WAI/people |