Introducing 'Making Accessibility Visible' Series

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.

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:

1. Button and form field labels that are missing, not descriptive, redundant, placeholders, or presented as icons
2. Headings that are missing, out of order, not descriptive, or used decoratively
3. Image alt text that is missing, not descriptive, redundant, or is the image’s filename
4. Missing announcements of user interface (UI) changes, such as expanding/collapsing accordion, open/close dialogs
5. 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. 

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

Task prompt

Identify where to click in order to shop for new summer items.

Results description

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.

Testers featured 

Leslie and Sarah

Broken element

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.

Working element

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.