For content creators and developers, it is essential to understand how blind people use the web, and how we can create websites that are both operable and understandable by people who are blind. This article provides information about how to make your website accessible to blind people and provide examples of real-world scenarios in which accessibility matters.
Blind People in the U.S.
Millions of people across the world 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 who have a visual impairment after correction, and 8 million who have uncorrected visual impairments.
Blindness does not come from one specific condition. To be considered “legally blind,” a person fits 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, 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.
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 act as an 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 works as it 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.
Another example of problems that screen reader users frequently experience is incorrectly coded elements that are give an action via JavaScript but are not keyboard focusable. If an element is not keyboard focusable, only people who can use a mouse are able to reach and interact with that element.
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 fully interact with your website.
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.
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 they were 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, also known as POUR. This 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 types of ability levels to access it.
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 that are laid out are testable and pose a real problem for people with disabilities. 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.
Example Scenario: How Accessibility Helps Blind Web Users
We frequently find that 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. Marsha is a schoolteacher who needs to find new educational games for her third-grade class and she is blind.
Marsha is able to search for fun educational games for her students using a screen reader and her keyboard. When Marsha finds a web page with a title that sounds like the perfect new game for her students, she is able to send commands to click on that page.
When the page opens, Marsha’s screen reader will pull 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 have any headings or subheadings. Marsha’s screen reader might not be able to distinguish what is or is not important information, and Marsha might not be able to navigate through the page as easily in order to find the instructions. This could frustrate Marsha and force her off of 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 Marsh, and how it can cause your organization to lose website visitors or new customers.
As Devin shared in the video, above, accessible websites are a portal for blind people that puts them on equal footing with seeing people and grants them access to accessing 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.
