Product Accessibility: Building an Inclusive Product in 2021

Today is Global Accessibility Awareness Day (GAAD), and we’re excited to officially announce our Accessibility Statement: “High Fidelity is committed to ensuring digital accessibility for people with disabilities. We value diverse life experiences and believe diverse groups of people will create products inclusive of those life experiences…” Read more here.

Virtual environments with spatial audio are only becoming increasingly popular, and we’re on a mission to ensure developers who use assistive technologies can easily use our Spatial Audio API to build web apps and in-game voice chat. 

GAAD was born from a blog post back in 2011, published by a developer named Joe Devon. He wrote, “This will be a day of the year where web developers across the globe try to raise awareness and know-how on making sites accessible. On this day, every web developer will be urged to test at least one page on their site in an accessibility tool. After fixing up the page, they are urged to blog about what they changed and inspire others to follow suit.”

The Web Content Accessibility Guidelines 2.1 (WCAG) uses four areas to determine if web or app content is accessible. These are:

• Perceivable: Users must be able to perceive the information being presented.
• Operable: Users must be able to operate the interface.
• Understandable: Users must be able to understand the information as well as the operation of the interface.
• Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

One billion people worldwide have disabilities. The more we can get people talking, thinking, and learning about digital access and inclusion, the better.

So, what does it mean to build an accessible product? What should developers consider, and how has High Fidelity specifically incorporated accessibility practices to make our products more inclusive? Let’s dive in.

Accessibility Considerations For Developers

Currently, 61 million adults in the United States live with a disability (of which there are many kinds). If a developer does not identify as having a disability when building a product, they should be mindful that with age, that may change, and they could have different needs when using their product in the future. It is important to design not just for oneself, but for others — who are different.

1. Give users options to customize the experience.

Example options include captions, transcription, the colors on the screen, the font type and size, assist-modes, and more. We’ve done testing with users who are blind with our example applications, and received feedback that we should allow the user to skip sections that aren’t required, such as changing their avatar’s color. This way, someone using a screen reader doesn’t have to navigate through each item just to get to the next section. When developers build with these options in mind, it may help more people than they expected, too. For example, the video game Uncharted 4: A Thief’s End saw 9.5 million players use an accessibility option. If you’re a developer, do it because you know people need it — but also because it simply makes the experience better for all.

2. Provide clear information to users.

In addition to customizing the experience, make sure the product provides clear information to everyone. For example, in an example application we created, we tested with users inside of a large, navigable virtual world where they could walk around and chat with people in spatial audio. We received great feedback to provide clearer cues so people who are blind, have low vision, or are without hearing can better comprehend this virtual environment.

Some of the design changes we implemented in consideration of people who are blind or with low vision include:

• Adding the sound of footsteps to indicate movement.
• Indicating direction of travel and facing by giving each direction its own unique audio pitch. (Sighted users see a compass at all times.)
• Communicating the environment’s features by using sounds as a landmark. We added birdsong to a beach area on the map so people had more than one way to describe a meeting location: “We can meet at the beach,” or “We can meet where the birds are.”

For more information on how spatial audio can help people who are blind, check out this blog post.

A design change considered for people who use screen magnifiers:

• Instead of needing to pan across the screen to see who is near them in a large virtual world (especially if there are many people around), give the option to navigate with a vertical list to see the names of people around them in order of closest to furthest. 

And for those with hearing loss:

• Transcription is an option that would allow someone to read what is being said. With proper design considerations, the transcription would display who is speaking and where the person is located whose voice is being transcribed. For example, here is a speech-to-text API that transcribes speech into text using an API powered by Google’s AI technologies.

3. Implement good keyboard navigation.

Implementing good keyboard navigation means a person can use the product without the use of a mouse or trackpad. A bonus that comes from doing this right is that it will improve accessibility for several different kinds of assistive technologies, too. Screen readers are used with a keyboard, some screen magnifiers (such as Zoomtext) use a screen reader, and alternative navigation such as switch devices and Dragon NaturallySpeaking also need keyboard accessibility.

A related consideration here for those who do use a keyboard, but who may not be able to precisely click on a very specific and small area: Ensure target sizes are large enough for users to easily activate them whether with mouse or finger on a touch device.

4. Label every single item, including icons, buttons, links, and other interactive elements.

These labels are used by assistive technologies to help people navigate through the product. For example, for those who are sighted, people will see when others are near them in a virtual environment, and may be able to click on them to find out who they are. When testing in the same virtual environment with those who cannot see, people suggested to assign a “heading level” to each individual. The overall visual design isn’t changed, but by including these headings for people, sight isn’t needed to detect who is nearby.

Test For Accessibility With Different Assistive Technologies and Tools

Testing with as many different assistive technologies, people, devices, operating systems, browsers, and hardware as you can (as is applicable for your product) is a good place to begin. After all, you’ve already spent time on app design or site SEO to drive traffic. Testing with different tools will only help further ensure it reaches more people effectively. At High Fidelity, we’ve tested with users of screen readers, screen magnification, and alternative navigation.

Assistive technologies we’ve tested with include:

• JAWS
• NVDA
• Talkback
• VoiceOver
• ZoomText
• On-screen keyboard
• OS Magnification
• Switch System
• Dragon NaturallySpeaking

Tools we test with:

• Headings Map
• Wave Evaluation Tool
• WCAG Contrast Checker

Build an Inclusive Web Application with Spatial Audio

Once a developer has access to our Spatial Audio API (you can begin by creating a free developer account here, or sign up below), we strongly encourage implementing these accessibility guidelines in all products, too. Research even shows that being more inclusive is good for your wellbeing! “The picture is a really positive one for being open to diversity and open to people not like yourself. Our analysis of the results showed that wellbeing and openness to change are strongly linked to inclusiveness — the more inclusive a person is, the better their wellbeing — in all of the areas we measured,” Ben C. Fletcher writes.

Remember: Features first designed to aid people with disabilities often end up benefiting everyone. Additionally, you can read more here about why it’s important to incorporate accessibility in virtual experiences. 

Integrating high quality spatial audio into your web app helps make it more accessible for those who are blind, too. When we’ve tested our Spatial Audio in virtual environments, many have remarked that it mimics real life. Just as folks are able to locate each other in the physical world with sound, people are able to do so using our audio virtually.

Happy creating! Don’t forget to tell us about the inclusive, awesome products you build with us. You can tag us on social (@HighFidelityXR) and in our developer Discord channel (the link to join is in your “Welcome” developer email).