Welcome to Accessible Content

This site is a collection of code experiments to test various content on screen readers to see how various UX patterns work given the challenge of different screen readers

The majority of CSS you'll find used in this application is from Bootstrap 5, but the underlying UX practices of how the screen reader interacts with the DOM should hold true regardless of how you style your content.

The problem of screen readers

So it's probably best we start off with a statement: We MUST make sure that vulnerable users get the same behaviours as our able bodied ones.

Whether they're using a screen reader because they're partially sighted, or whether they have motor impairments, your vulnerable customers deserve equal treatment. BUT... then you've got the challenge of screen readers.

JAWS

It's the de facto standard for Windows, this may be more for historic reasons than functional ones, however JAWS has this great quirk which means it behaves differently depending on which version number you're using.

NVDA

I guess as a response to the rather high price tag attached to JAWS, NVDA was developed as an open source project, it's comprehensive and has a nifty developer tool allowing you to read what it's speaking, saving you from the never ending sound of a generated voice.

VoiceOver

Apple's fantastic screen reader with bundles of functionality across all of their devices, which of course behaves differently depending which version of MacOS you're on, and of course which version of iOS you're on, and completely differently on your Mac vs an iPhone, and even differently between Safari on Mac and Chrome on Mac, with no reliable iOS simulator.

And lets not even get to the fact that the MacOS shortcut key is on the touch bar.

TalkBack

The Android screen reader which absolutely behaves completely differently depending on Android version, which device you're using, which app you're using, and frankly if it feels like behaving that day.

Personally, I've found it pretty solid when developing and testing with it, but as I don't use it day-in day-out I simply have to defer to what I'm told.

Surely, when developing these screen readers, they'd cast a thought towards the web and have the screen reader track what the user has focus on, maybe even work with the W3C to get some features built into the spec specifically for screen readers ... that'd be novel!

Powered by Angular | JamStack | Netlify

View code on GitHub