Introducing 'Making Accessibility Visible' Series
Summary: This is the first entry in our Making Accessibility Visible series. Read Part 2: Heading Helpfulness here, Part 3: Image Alt Text here, Part 4: Missing Descriptions here, and Part 5: Keyboard Focus and Dialog Behavior here.
Unless you are using a screen reader to navigate websites and consume digital content, it’s really hard to imagine what that experience feels like. Yet, understanding how people who are blind or visually impaired use the internet is crucial in designing truly accessible websites and fixing issues that prevent them from fully interacting with your content.
At AudioEye we work with a team of testers to learn from their firsthand experiences of using assistive technologies, like screen readers, so we can better understand their unique challenges and continuously improve on our web accessibility solutions.
Today, we’re excited to share our learnings with you. We’re launching a new video series called Making Accessibility Visible that shows how people who are blind use the internet with screen readers. The videos illustrate when the experience works well, and when it doesn’t. We are also sharing details on each issue’s code to help you solve some of the accessibility issues on your site.
A screen reader is a software application that uses text-to-speech technology to read out loud digital content for people who are blind or visually impaired.
The series consists of five videos that cover the following common accessibility problems and what they mean for users who rely on screen readers to navigate content:
- Button and form field labels that are missing, not descriptive, redundant, placeholders, or presented as icons
- Headings that are missing, out of order, not descriptive, or used decoratively
- Image alt text that is missing, not descriptive, redundant, or is the image’s filename
- Missing announcements of user interface (UI) changes, such as expanding/collapsing accordion, open/close dialogs
- Keyboard navigation and focus order that is not intuitive, with missing interactions
To illustrate the issues above, the AudioEye development team built two demonstration websites that are visually identical, but offer drastically different experiences for screen readers. We then asked four testers to walk us through the experience of using screen readers to navigate both sites.
Each user completed the same set of tasks for both websites: first using the working site and then the broken one.
As participants completed the tasks, they commented on the experience and shared insights. In addition to providing user experience feedback, each participant also talked about their disability, their use of technology, and positive and negative experiences on the Internet.
We are tremendously grateful to all our participants on this project, and hope their experiences and insights will educate you on your journey of making digital content accessible to people with visual impairment.
When a website is designed and developed accessibly, people of all abilities can visit and consume the content successfully. And, that’s a win for everyone.
Ask a tester:
What’s one thing that is often misunderstood by people who don’t use screen readers?
“The concept of representing things with visual cues and icons. Sometimes I’ll see things where the icon will say ‘left arrow’ or ‘right arrow’. And I know what that means because I’ve used the internet for a long time, but other people might not understand that the left arrow can mean previous or next...”
- Leslie, she grew up reading and writing Braille and started using screen readers in college, so she could do homework more efficiently
Making Accessibility Visible Part 1: Missing Button Labels
In this video, AudioEye’s testers Sarah and Leslie show what it’s like to shop online using a screen reader. As they test two versions of the same site, they demonstrate the difference between properly labeled buttons and the ones with missing labels. Watch the video to learn what that difference means for people who use screen readers.
Code/technical notes from the video
Identify where to click in order to shop for new summer items.
The screen reader reads the button as “see what’s new button” when it is labeled and “button graphic no description” when it is not labeled.
Leslie and Sarah
Browser/assistive technology can’t determine an accessible name for the button because the only button content is the image of an arrow with no text alternative.
<div class="hero-copy center-content"> ... <button class="button secondary-button"><img class="button-arrow-icon" src="../assets/left-arrow-icon.svg"></button> </div>
The label “see what’s new” has been added to the button element. The arrow image was given the empty alt to effectively hide it from assistive technology. This is only one of many ways to solve a missing button label.
<div class="hero-copy center-content">
<button class="button secondary-button" aria-label="see what's new">
<img alt="" class="button-arrow-icon" src="../assets/left-arrow-icon.svg">
Read the next four installments in the series:
Ready to test your website for accessibility?
Facing My Fear of Walmart.com
Learn what surprised one screen reader user about shopping for groceries on Walmart.com
May 05, 2023
For Assistive Technology Users, Website Updates Often Mean New Hurdles
For many assistive technology users, website and app updates just mean new accessibility barriers to overcome.
April 26, 2023
6 Tips for Making Forms Accessible
Learn about the importance of form accessibility for screen reader users — and what to watch out for.
April 12, 2023