About 43 million people around the world live with some degree of blindness or vision loss. Low-vision users and users with vision impairments are incredibly common on the web. If your website doesn’t work for people with low vision, you may be losing out on potential conversions or in violation of web accessibility laws.
Want to learn more about making your website accessible for low-vision users? Read on for a better understanding of website accessibility needs for visual impairments.
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
Who are low-vision users?
You may wonder just who we’re talking about when it comes to people who are not blind but who experience vision loss or impairments.
Typically, people with low vision can see, but their vision is so limited that powerful corrective lenses don’t provide much help. They may not be able to drive or read printed text unless it is enlarged. Low-vision users may not be able to see small fonts or pick out details in images without making them bigger.
Some users with low vision are considered “legally blind.” People who are legally blind have a central visual acuity of 20/200 or less. These people have some sight but very little.
Beyond “legal blindness,” there is no commonly accepted definition for low vision or visually impaired, and the degree of sight limitation varies. It’s important to know that low vision isn’t caused by one specific condition but by many different conditions.
Conditions Causing Vision Impairments
Some of the most common low vision conditions include:
Blur or Blur with Low Contrast
For people with low vision, objects and faces can appear blurry. This makes it difficult for them to understand details or specific features of printed information or website content. It can also make it hard for them to read small body text and other small fonts.
Someone who has a blurring vision condition might also see things in low contrast. This means that they don’t really see very bright or very dark areas; that everything tends to appear at the same brightness. This can make it difficult for them to distinguish between colored elements, such as borders, frames, or edges. It also makes it harder for them to read colored text on a colored background if there is not sufficient color contrast.
Cataracts
A cataract is a blind spot on the eye. Someone with cataracts may have gray spots that cloud their vision or block out information in certain areas.
Glaucoma
People with Glaucoma often have a sort of tunnel vision. This means that they can only see a small area and do not have peripheral vision. The edges of their vision are often darkened as if they were seeing through a narrow tube.
Macular Degeneration
Macular degeneration causes opposite vision loss to Glaucoma. People with macular degeneration experience vision loss in the center of their eyes. They still have peripheral vision, but they often have blurred vision or see a dark spot in the center of their field of vision.
Hemianopia
Much like Glaucoma, Hemianopia (or Hemianopsia) limits a person’s version to a small area. People with Hemianopia typically have vision loss on one side of their eye(s). This makes it difficult to see a full page and understand all the information on it.
Diabetic Retinopathy
Diabetic retinopathy is similar to cataracts. People with diabetic retinopathy see dark, floating spots, which can cloud their vision.
Retinal Detachment
Retinal detachment can cause a variety of vision problems. Some people with retinal detachment may experience flashing lights, others may see “floaters” in their vision, and others might see dark debris. They may even have a dark spot or shadow that blocks a part of their vision.
The Impact of Vision Impairment
As mentioned earlier, millions of people around the world live with visual impairments that cannot be treated with glasses, contacts, medicine, or surgery. Some visual impairments are hereditary, meaning people are born with them. Other visual impairments occur as the result of an accident or injury. Many occur as a part of aging and are common in older or elderly people.
For people with visual impairments that cannot be corrected, there are vision rehabilitation services to help them make the most of the vision they have. Website owners, developers, designers, and content creators can also create their websites in a way that makes them more usable and accessible for low-vision users.
Assistive Technologies for People with Low Vision and Visual Impairments
If you develop or manage websites, it is essential to understand how people with low vision use the web. How you create web content, whether in WordPress or another content management system, directly impacts how well your website will work for users of assistive technology.
Screen Readers
Many people with low vision use screen readers to access web content. A screen reader is a type of assistive technology. It is a software program that allows low vision and blind people to “read” the content of a page with either a speech synthesizer or braille display. Screen readers act as an interface between a user and their computer’s operating systems and applications.
How Screen Readers Work
Screen readers can read a wide variety of text combinations, including single words, single lines, or full sections of text. They can also be used to spell words, find a specific word or group of words on a page, or announce the location of a cursor.
Screen readers also recognize HTML elements like buttons, links, navigation menus, tables, and more and announce the elements to help users understand the content.
Watch the video below for a demonstration of how a screen reader works.
As described in the video, some web content is not accessible to screen readers. If an image does not have alternative text, for example, the screen reader will not know how to describe it, and users may miss out on key information contained in the image.
How to Make Your Website Accessible for Screen Readers
Screen reader accessibility requires everyone who works on your website to take accessibility into account. There are elements of screen reader accessibility that are controlled by developers in the code and elements that are controlled by content creators as they enter content into the website.
In WordPress websites, you also need to carefully consider the plugins that you’re adding to your website as many are not accessible or will add accessibility problems that make your website unusable for screen reader users.
If you want to make your website accessible for screen readers, start by using an accessibility testing plugin like Accessibility Checker to find obvious problems in your code or content. Running the free version on all your posts and pages is a great place to start and will identify many accessibility problems for screen readers.
Another way to ensure that your content is accessible to screen readers is to perform testing with low-vision usability testers or hire a trained accessibility tester. Accessibility consultants and real-world users will have experience with screen readers and will be able to tell you whether your web content is accessible or whether you need to make adjustments.
Screen Magnification
Reading small text is extremely difficult for people with low vision. Screen magnifying software, like ZoomText or MAGic, can help. These software programs show a small portion of the screen. Once a portion of the screen is selected, it’s magnified and displayed at a high resolution.
Screen magnifying software like ZoomText or MAGic have other special features beyond magification to help people with low vision see. Here’s video demo of ZoomText, for example, that shows settings to change color contrast, cursor size and shape, and focus indicators, etc.
Outside of software to magnify anything on the screen, there are also settings in browsers that allow users to view web pages zoomed in.
How to Make Your Website Accessible for Magnification
The best way to ensure your website works for magnification is to ensure that it is mobile responsive. Low-vision users may zoom 200-400% or more on your website. Typically when a website is zoomed in the browser, the mobile styles will take over.
To make sure your website works well when users zoom in, try zooming in yourself. Make sure that your mobile menu works with a keyboard alone, that no content or functionality is lost on zoom, and remove sticky elements like headers and chat bubbles that may block other elements on the page.
Color Customization
For people with low vision or low contrast conditions, distinguishing between two different colored elements, such as background color and text color, can be difficult. If there’s not a significant difference between the background and text, your text may be completely unreadable.
For other people, too much contrast, like an all-white background with black text, causes pain or stress in the eyes.
To help with either low-contrast or too much contrast, low-vision users may use color customization software to change the colors on their monitor and the websites they visit.
Color customization software, like what was shown in the ZoomText video above, allows a user to modify colors to make things easier for them to see. Outside of magnification software, most operating systems allow users to switch their computer to “high contrast mode” or “dark mode,” and there are browser extensions that do this as well.
How to Make Your Website Accessible for Color Customization
The best way to make your website accessible for color customization is to include a stylesheet that recognizes the color preferences users have set in their operating system and serves them a version of your website in that mode (dark or high contrast). There was a WordPress Accessibility Meetup on color modes if you want to learn more.
Say No to Overlays and Toolbars
You may have seen web accessibility overlays or toolbars embedded on websites and are wondering if your website should have an accessibility overlay, too. Web accessibility overlays are not recommended assistive technology.
As described in the Overlay Factsheet, these toolbars are not typically appreciated or used by people with disabilities and can even add accessibility problems to your website.
If a low-vision user needs a screen reader, magnification, or alternate coloring on your website, they will need it on every website and on their desktop applications, too. This is why all of the assistive technology previously described is installed on users’ computers.
Installing assistive technology on your website is, at best, going to be ignored by users or, at worst, may conflict with the assistive technology they already have and make your website unusable.
If you want to make your website accessible for low vision users and people with visual impairments, you need to design it to be accessible, not add an accessibility overlay, toolbar, or widget.
Design Considerations for People with Low Vision
There are certain design considerations that make a person with low vision’s user experience much easier. These include:
Proper Color Contrast
Color contrast is essential for people with low vision, especially those with low contrast conditions. Without the proper contrast between elements, these users may not be able to see the difference between background color and text color, borders, frames, edges, and other small details.
Web Content Accessibility Guidelines (WCAG) provides a formula for measuring the contrast ratio between two colors. There are two different levels of color contrast for text: AA, which requires a contrast ratio of 4.5:1, and AAA, which requires a higher contrast ratio of 7:1. Nontext components like icons and form field borders can have a lower contrast ratio, as can large text.
Our recommendation is to strive for AAA color contrast where possible, and especially on important elements like body text, buttons, and links. If you cannot meet AAA accessibility, then everything should meet AA accessibility.
Whether you’re designing a website in a design tool like Figma or Adobe XD, or building a website in WordPress, it’s important to check and ensure that the color combinations you’re using pass color contrast.
Some great tools for checking color contrast include:
- Accessibility Checker WordPress plugin
- Stark (for Figma and Sketch)
- WebAIM’s color contrast web page
Pinch to Zoom
The pinch-to-zoom feature allows people with low vision to use screen magnifying software or to zoom in on mobile devices.
If the pinch-to-zoom feature on your website is disabled, screen magnifying software will not work. This may cause people with low vision to miss important information or experience frustration.
If you’re a developer building websites or customer WordPress themes, be sure that you do not disable the pinch-to-zoom feature when coding website designs.
Focus States
Some people with low vision may use a keyboard, mouse, or both, to navigate around the web. When you include visible focus states in your design, you make it easier for low-vision users to know where their keyboard or mouse focus is on a web page.
While there is a default browser focus state, low vision users benefit from a separate CSS :focus or :hover state. It is especially important to never set focus outlines to 0 or none in your CSS.
We recommend having a 2px solid outline with a 2px outline-offset for all focusable elements.
Example Scenario: How Accessibility Helps Low-Vision Web Users
If you need to explain to clients or stakeholders at your organization why accessibility for low-vision users is important, sometimes it helps to be able to draw on a relatable scenario. Here’s a real-world example of how accessibility makes it easier for people with visual impairments to accomplish their goals online.
This is Jim. Jim has a low vision condition that makes it hard for him to read small text and distinguish between colors. Jim works at an accounting firm where he needs to be able to read a lot of data on spreadsheets. He also needs to be able to write detailed emails for his clients.
Jim uses his mouse and keyboard to navigate around the web, as well as screen magnifying software. He needs to access data on his accounting firm portal in order to make a new spreadsheet for a client. Jim uses his mouse to find the focus states within the portal, and screen magnifying software to zoom in and find information that he needs. He can use his keyboard to move through the portal structure, gathering data as he goes. As he moves down the page, the screen stays magnified, making sure he can still see the important information. Jim can then export all of the data that he needs, and import it into a spreadsheet that can be shared with his client.
Now, let’s consider what might have happened if Joe’s accounting firm hadn’t made their portal accessible for people with low vision. For example, maybe the firm disabled the pinch-to-zoom feature, making his screen magnifying software unusable. This would have prevented Jim from doing his job successfully, which could cost the firm a client. It may have even prevented the firm from hiring Jim, despite his qualifications.
Get Help With Accessibility
In our scenario with Jim, we saw how accessible design made his user experience simple and successful. We also saw how inaccessible design could be frustrating and how it could cost you clients or highly qualified employees. This is why accessibility matters and how accessibility helps low-vision users and companies.
If you have questions about making your website accessible for people with low vision or visual impairments, or other disabilities, please don’t hesitate to contact us. Our team of accessibility consultants would be happy to help audit your website for accessibility and create a plan for remediation and maintaining ongoing accessibility.
If you have a WordPress website and would like to scan it for accessibility problems, check out our free WordPress Accessibility Checker plugin.
