Back to blog

Introducing 'Making Accessibility Visible' Series

Posted October 05, 2021

AudioEye

Posted October 05, 2021

Introducing Making Accessibility Visible video series, illustration of speech to text in use

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:

  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. 

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

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.

<div class="hero-copy center-content">
...
  <button class="button secondary-button"><img class="button-arrow-icon" src="../assets/left-arrow-icon.svg"></button>
</div>

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.

<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">

</button>

</div>

Ready to test your website for accessibility? 

Share post

Topics:

Keep Reading