<img src="https://certify.alexametrics.com/atrk.gif?account=bIEZv1FYxz20cv" style="display:none" height="1" width="1" alt="">
Skip to content
Blog / Latest Articles

4 Web Accessibility Guidelines for App Developers

by Jazmin Cano Accessibility Product Manager

The year is 1972, and television history is made. Julia Child’s cooking show, ‘The French Chef,’ includes closed captioning for the first time.

“The producers wanted to reach a broader audience, including deaf and hard-of-hearing viewers. Nowadays, the FCC requires closed captioning on 100 percent of new television programming and 75 percent of older programming.” Of course, this was only the beginning of a more inclusive future…

Access now is a lot faster than it once was. Claire Stanley, Advocacy and Outreach Specialist at the American Council for the Blind, gives an example: “Tech has opened the door to so many things. Books, for instance — 10 years ago to get a book you might have to wait for the Library of Congress to convert it to audio. Now, because of Kindles and e-readers, the day a book comes out, I can buy it.” The Americans with Disabilities Act of 1990 has paved the way for now over thirty years of incremental changes.

Advancements in technology have created awesome opportunities for those who are disabled, allowing many more to engage in the world. ADA’s effect on tech has been significant over the past thirty years, but there’s still work to do.

Of course, web development is a fast-moving field. Best practices are constantly evolving — but access for people with disabilities simply can’t be treated like an add-on for a website or application. “Accessibility itself is good web development, and shouldn’t be an afterthought in the development process. It is a way of building robust platforms that are useful for everyone, not just a minority population,” Carly Gerard and Max Bronsema write.

Web accessibility can still unfortunately be overlooked even with the best of intentions, though. So if you’re creating online experiences, what are some simple steps you can take to prioritize accessibility for your users? Here is a list of the top four web accessibility guidelines for app developers. 

4 Ways to Immediately Improve Web Accessibility 

It's important to remember that having an accessible product doesn’t begin at the download step itself. Teams need to think about the entire journey that leads to a person using their product. This includes social media content as well as their website.

1. Add alternative text to every image

Say a product is advertised using an image on Instagram and Twitter. If that image does not have alternative (alt) text added to it, someone using a screen reader will not know what the image is and may keep scrolling past that post. People shouldn’t be excluded from knowing what the content is about! Here are resources that give practical guidance for creating useful alt text for all images.

2. Properly label links and buttons for screen readers

When a website has a button that’s not descriptive, it probably won’t get clicked. Say the product is accessed through a download button, but the button just says “button” to a screen reader user. What in the world are they clicking on? It’s probably best to not click it all.  It should be labeled to say “Download product exe”. Similarly with links, if the link doesn’t tell the screen reader user where it takes them, they may not click it. Instead of saying “link”, it could say “Documentation”. Check out this page for more information on how to properly label your buttons, links, and much more.

3. Use heading levels to convey hierarchy of the content

Heading levels are often used for styling purposes on many web pages and blogs, and teams need to remember that headings are there to specifically communicate the organization of the website or online experience. Users of screen readers use headings to familiarize themselves with the content on the page and navigate to sections that interest them. Not using headings properly causes confusion and a less than pleasant experience. Here’s a helpful guide on how to use heading levels.

4. Take into account color and contrast in your visual design 

Designs should take into consideration people with color blindness. Information presented through use of color only is problematic if the colors are indistinguishable from each other to many people. There are also fonts to consider. Here are some best practices to keep in mind as a designer.

Nick Babich writes for UX Booth, “They say beauty is in the eye of the beholder. As designers, we need to remember that the same is true of color and all visual abilities. It’s estimated that 4.5% of the global population experience color blindness (that’s 1 in 12 men and 1 in 200 women), 4% suffer from low vision (1 in 30 people), and 0.6% are blind (1 in 188 people). It’s easy to forget that we’re designing for this group of users since most designers don’t experience such problems.”

Improving Web Accessibility for All

There are certainly many more web accessibility practices to keep in mind — here are some of the more specific accessibility considerations High Fidelity takes into account for developers using our Spatial Audio API, for example.

We’ve also written about why it’s important to incorporate web accessibility in virtual events. As spatial audio becomes increasingly mainstream, virtual environments and events that integrate immersive audio will only rise in popularity, too — and we want to ensure developers who use assistive technologies can easily use our Spatial Audio API to build these awesome online experiences. Here’s a bit of other awesome research, too, on how spatial audio can help people who are blind. Want to implement 3D audio in your app? Create a free dev account below to try it out.

Although sustaining progress in digital accessibility is not always easy, your users will thank you.  “Aditus enim omnes aditus” — access for one, access for all. 

Published by Jazmin Cano June 24, 2021

Which spatial audio solution should you use?

icon-api
Spatial Audio API

Ideal for Web-based Applications

Find out more
icon-local-spatializer
Local Spatializer

Ideal for Native Applications

Find out more
blog-circles

Don't Miss Out

Subscribe now to be first to know what we're working on next.

By subscribing, you agree to the High Fidelity Terms of Service

Ready to build?

Integrating spatial audio into your project is a snap. Here's everything you need to get started:
book-icon

Documentation

Detailed docs covering how our API works and sample code.
examples-icon

Guides + Examples

Complete guides and walkthroughs covering all you’ll need to get started.