Whether you’re a designer, developer, or content creator, you need to know how to make your website accessible to blind and visually impaired people. Learning how to create blind-friendly websites starts with understanding how blind people use the web and the assistive technologies that support them.
This article provides information about making your website accessible to blind people and provides examples of real-world scenarios in which accessibility matters. If you’re looking for an easy way to test a WordPress website for accessibility, check out our Accessibility Checker plugin. If you’re looking for an accessibility consultant to help you audit or remediate your website, contact us.
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.
Blind People in the U.S.
Millions of people worldwide are blind or have low vision. In the United States, the CDC states that approximately 12 million people aged 40 years and older have a vision impairment, including:
- 1 million people who are blind.
- 3 million people who have a visual impairment after correction
- 8 million people who have uncorrected visual impairments.
Blindness does not come from one specific condition. It can be something that someone is born with, it can develop over time due to aging or disease, or someone can become blind as a result of an accident or injury.
To be considered “legally blind,” a person must fit one of the following descriptions:
- Central visual acuity of 20/200 or less in their better-seeing eye, even with corrective lenses.
- A visual field, which is the total area an individual can see without moving their eyes from side to side, of 20 degrees or less in their better seeing eye.
Real User Story
In the video below, one of our website testers, Devin, who was born with Bilateral Optic Nerve Hyperplasia, shares his experience and discusses why website accessibility is important to him.
Devin: It’s so great that Equalize Digital is bringing us forward out of the stone ages. My name is Devin Gutierrez. I’m a 21 year old tech-enthusiast, musician. I was born with, it’s called Bilateral Optic Nerve Hyperplasia, which is a condition of the optic nerve that causes them to be underdeveloped. I use a screen reader that takes all the important information from a computer screen and sends it out in either Braille or computer generated speech.
Accessible websites are my portal, my portal to accessing information, accessing news, talking to people. Without inclusion, without accessibility in this digital realm, it becomes impossible. So it means a lot. It means a lot to me whenever a business can make their website accessible, puts it me on an equal footing with the people who can see which, you know, doesn’t usually happen as much as I wish it did. But when it does happen, it means a lot.
Equalize Digital, I tested a website that they built for a company about a year ago. I thoroughly got to test every aspect of that website. They kept their pages free of clutter, they kept their pages free of problems, and any problems that I did find, they were quick to note down and they fixed them. They fixed them all. Every single one. Their accessibility is so thorough, that there’s nothing I couldn’t get from their websites.
If every business in the world, every website in the world was powered by Equalize Digital’s technology, there would never, I would never need to ask someone to come look at my screen again. I’d never need to call somebody and ask them to schedule a time for them to come over and help me on my computer because I’d have everything right at my fingertips.
As Devin shares in this video, websites that are not accessible to people who are blind completely shut him out. It is important for all websites to work for people who are blind and have low vision because it ensures that they can have equal access to news, services, and products on the web.
To ensure that your website is a blind-friendly website, you need to make sure that it works well with screen readers.
Screen Readers: Assistive Technology for Blind People
What is a screen reader?
Many blind people use screen readers to access web content. A screen reader is a type of assistive technology. It is a software program that allows blind web users to “read” the content of a page with either a speech synthesizer or braille display. Screen readers interface between a user and a computer’s operating systems and applications.
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 reader demonstration
Watch the video below for a demonstration of how a screen reader interacts with various elements on a website.
(Note: this website has accessibility problems, however, the video still provides a good overview of what it’s like to navigate a website with a screen reader.)
Screen reader: Next Generation Zone Google Chrome window. Navigation preparing tomorrow’s workforce list with four items. Visited link passport to success. Passport to success next generation zone visited link skip to main content. Visited link home.
Out of list heading level one passport to success. Your passport to career success will take you… Start here passport worksheet.
Next generation zone. Visited link skip to main -. Visited link home passport worksheet but-. Out of list heading – left heading blank.
List with three items explore careers and create a plan checkbox checked. Explore careers visited link learn how to compete in tomorrow and number 30, not checked. Checked. Create a plan visited link forms.
Next Generation Zone. Visited link skip to main content. Visited link home passed. Logout. Visited link. Heading level one your passport to -. Link download PDF form. Graphic Next Generation Zone. Graphic steps to career success. Heading level six: your passport to career success.
Heading level 2: career plan student name at a test. student school address edit one three space L L n address to edit blank profile
Challenges Presented to Screen Reader Users
If not built correctly, some web content on your website may not be accessible to screen readers.
A common example of content that presents a challenge for screen reader users is images without alternative text. If there is no alternative text present on an image then a screen reader may skip it or try to read out the image file name (which can sound like a whole bunch of confusing text!).
Another problem that screen reader users frequently experience is incorrectly coded elements that give an action via JavaScript but are not keyboard-focusable. If an element is not keyboard-focusable, only people who can use a mouse can reach and interact with it, not blind people using their keyboard to navigate the web.
If your website’s content is not accessible to a screen reader, a blind user may miss out on key information or not be able to interact with your website fully.
How to Test if Your Website is Accessible to Blind People
The best way to ensure that your content is accessible to screen readers is to perform testing with blind usability testers. They will have experience using screen readers and will be able to tell you whether your web content is accessible or whether you need to make adjustments. You can also hire trained accessibility specialists to test your website.
If you want to get started testing your website accessibility on your own, you can use free tools such as our WordPress Accessibility Checker plugin to scan your website and provide a list of things that you need to fix.
You also don’t have to be an accessibility expert to do some basic keyboard testing. Stick your mouse in a drawer and see if you can do everything important on your website that you would normally do with a mouse. Check for the ability to use the navigation menu, open and close accordions and tabbed content, submit forms, add products to the cart and checkout, etc.
For more tips on manual accessibility testing read this post.
Design Considerations for Blindness
There are certain design considerations that make a blind person’s web user experience much easier. These include:
- Keyboard Functionality: While most blind users are physically able to use a mouse or trackpad, they cannot see where the mouse is moving or pointing. This is why many of them use keyboards to navigate through a web page or web app. Your web content must be set up to allow for keyboard navigation.
- Hierarchical Structure: Many screen readers will pull up a list of headings, subheadings, and other structural markers on the page. This allows screen reader users and keyboard navigating users to jump to different sections on the page and shows the importance of all the elements on the page. Your web content needs to have the proper tags, such as <h1> for title-level headings.
- Proper Labels, Roles, and Values: Because custom controls don’t have any native semantic parts, you need to ensure that you have proper ARIA or HTML labels, roles, and values that change when appropriate. Without the labels and roles, screen readers cannot tell users what a widget is or what it does. Adding ARIA labels and roles, like for media volume or expand/collapse buttons, will allow screen reader users to access the controls and use them as intended.
- User Feedback: Screen reader users need immediate feedback after performing a command. When someone fills out a form, expands or collapses content, or opens up a new page or tab with a screen reader, they need to be informed. Make sure that your design has the proper tools in place to provide feedback that a screen reader user will be able to hear.
- Video Descriptions: While blind people can hear what’s going on in a video (unless they also have an auditory impairment), they may miss key information because they cannot see it. If you choose to have videos on your website or web app, you may need to provide video descriptions to keep this from happening. A video description relays information that is shown in a video, but not explicitly stated out loud, so that blind users have access to all of the information in the video. You need to ensure that your design allows for video descriptions to be accessed wherever necessary.
In addition to these visual-specific considerations, it’s also important to remember other guidelines and standards for accessible design, like WCAG and POUR.
WCAG, or Web Content Accessibility Guidelines, help content authors, designers, and developers create accessible content by laying out a framework for success. WCAG uses a system beginning with four overall principles. The POUR acronym stands for perceivable, operable, understandable, and robust. For your content to be considered accessible under WCAG, it should be perceivable, operable, understandable, and robust enough for users with all abilities to access it. Learn more about POUR.
In addition to the four overall principles, WCAG also uses success criteria and levels of conformance to help content creators make sure they are meeting the necessary requirements. The success criteria ensure that the guidelines laid out are testable and are how you would measure the accessibility of your website. The levels of conformance are required for each success criterion, depending on a number of factors, such as the importance of the criterion and how easily achieved it is.
Additional resources on WCAG:
- WCAG Conformance Levels Comparison: Which One You Should Follow
- WCAG 2.1 Explained
- WCAG 2.2 Explained
Example Scenario: How Accessibility Helps Blind Web Users
We find it is helpful to provide real-world examples of people who benefit from website accessibility. Below is a scenario that highlights the importance of making your website accessible to blind people.
This is Marsha. She is a blind schoolteacher who needs to find new educational games for her third-grade class.
Marsha uses a screen reader and her keyboard to search in search engines for fun educational games for her students. When she finds a web page with a title that sounds like the perfect new game for her students, she can send commands to click on that page.
When the page opens, Marsha’s screen reader pulls up a separate section with all of the headings, subheadings, and other structural elements of the page. This way, Marsha is able to skip to the part of the page that actually lists the instructions for the game and have those instructions read aloud by her screen reader. On an accessible website, Marsha would be able to successfully navigate through and understand the web content on the page because its creators thought to include these accessibility features within their design.
Now, consider what would have happened if Marsha opened the page and the structure was off. Let’s say the page designer didn’t use headings or subheadings. Marsha’s screen reader might not be able to distinguish what is or is not important information, and she might not be able to navigate through the page as easily to find the instructions. This could frustrate Marsha and lead to her “bouncing” off the page, sending her to another website instead.
Accessibility Matters
In our scenario with Marsha, we can see how easy accessible design makes her user experience. The alternative scenario, with an inaccessible design, would be frustrating for Marsha. Having an inaccessible website can cause your organization to lose website visitors or new customers.
As Devin shared in his video above, accessible websites are a portal for blind people that puts them on equal footing with seeing people and grants them access to information, news, shopping, and talking to others. When a business or organization takes initiative to make its website accessible, it means a lot for blind users.
Are you ready to make a difference on the web? Contact us today to learn more about how we can help make your website accessible.
