Designing With an Accessibility-First Approach

Technology is supposedly the grand equalizer, but UX (user experience) is only as good as its accessibility. 

In our ongoing mission to ensure that is accessible to all, here are some of the key components we consider as we improve and refine our product.

But first, it’s worth taking a moment to laud the role that audiobooks play in making reading accessible. Audiobooks enable blind and visually-impaired folks to read, and also prove useful to those with mobility and cognitive disabilities who cannot use print books or ebooks.

Too often, there is online discourse about how “audiobooks don’t count” and that “reading print books is the only way,” but, as author Alicia Elliott puts it, this mindset ultimately gatekeeps reading—and what’s the point of that?

Outside of disabilities, audiobooks allow those who are busy—with work, family, and the myriad of challenges life presents—to incorporate reading into their lives.

But it’s not just enough to say “audiobooks allow visually-impaired people to read, yay!” and call it a day; the tech itself needs to be accessible and usable. Here’s how we are working to meet these standards, and how we aim to improve.

Working with a consultant

You might recognize the name Robert Kingett, our totally blind accessibility consultant, from our blog—he has previously written about the challenges that Audible Exclusive audiobooks pose to listeners like him. (To learn more about Audible Exclusive audiobooks and their harmful impact, take a quick trip over here.)

Whenever we are developing or revising a new feature, we will first send it to him for review. If it’s a more complex feature, we bring him in early to discuss our approach and get his thoughts on anything we should look out for. As an avid audiobook listener himself, Robert also reaches out whenever he notices something that could be improved on our website and app.

Portrait of Robert

The importance of alt text

Alternative (alt) text is a short written description of an image. “It is extremely important because it tells a non-sighted user what an image conveys, giving them a better understanding of the content,” notes Nick Johnson,’s co-founder and Creative Director. “This is especially crucial if the image contains text or a headline. We aim to use alt text on all images in our products.”

Making the website accessible

On our website, we strive to use clear, consistent coding practices with proper structure and hierarchy of content. We make sure to utilize accurate alt and ARIA tags, and have consistent behavior across all our products. Another key element is making sure we have proper color contrast and type sizes for readability. That being said, “it’s always a work in progress,” says Nick. “No doubt we have forgot an ARIA tag, alt tag, or other things. The goal is to constantly improve.”

Making the apps accessible has both an iOS app and an Android app. Apple products include VoiceOver, a built-in, gesture-based screen reader that gives audible descriptions of what’s on a screen—from battery level to which app your finger is on. Our iOS developers Irwin Coleman and Waleed Johnson have added custom router actions, which allow listeners to swipe and access certain shortcuts on pages: playing an audiobook, deleting files, hearing a synopsis, and more. “It’s an ongoing process where we welcome feedback and suggestions,” says Waleed. “We will continue to expand our accessibility support in future releases.” Additionally, both our iOS and Android apps have added Dark Mode and horizontal rotation over the past few years.

For our Android app, developer Avery Johnson utilizes Android’s haptic feedback, gesture navigation, and TalkBack, another built-in accessibility service. TalkBalk is made more usable by adding content descriptions on all images and icons, and audio hints on input fields. Another thing to consider are design elements like colors and button sizes. “Our team has been auditing the app with Talkback, keyboard navigation, colorblind filters, and various screen and text size settings to make sure every user can use our app smoothly. We use vector based icons throughout the app to ensure scalability. I’m also experimenting with building more accessible animated elements, and it has been very promising so far. While the app isn’t perfect (yet), we are constantly working to improve accessibility and usability for all our users,” says Avery. app with icon

The intersection of aesthetics and accessibility

While there have been major strides in making content accessible, there are countless websites that opt for slick (and often not screen reader-friendly) designs over usability. “Designing with accessibility impacts every aspect of the look and feel, from the colors chosen and type size to the structure and presentation of content,” says Nick. But this is a welcome challenge: “The best part is that when you make a page easier to use for one audience, it tends to make it easier to use for all audiences.”

“The best part is that when you make a page easier to use for one audience, it tends to make it easier to use for all audiences.”

Nick Johnson, Co-founder and Creative Director

So what tends not to be accessible? Design that is really interactive or heavily dependent on tech. Fortunately, doesn’t have many features like this on our products. We’re in the process of auditing our website and apps that do possess these features, and have built an accessible version for our independent bookstore map.

NNELS logo

The ongoing work of auditing content

Auditing our content “has been a long and slow process, mainly of trial and error,” says Nick. “Over time, our design and coding practices have evolved to a point where they are fairly accessible right out of the gate. When it comes to new features, the design team always has accessibility in mind when we start the project, and then our dev team makes sure to add the appropriate accessibility functionality while building features. To ensure our content is accessible, we partner with the National Network for Equitable Library Service (NNELS) and The WGBH National Center for Accessible Media (NCAM) for professional audits.”

Our mission to make as accessible as possible to all is an evolving process, and it is one that we value deeply. If you ever discover something lacking on our website or apps, please do tell as at!

One thought on “Designing With an Accessibility-First Approach

Leave a Reply

Your email address will not be published. Required fields are marked *