The Visual and Non-Visual Experience

We have to consider the shared experience of our pages: visual and non-visual. We can begin to craft the non-visual experience with semantic structure and content. We can impact the visual experience with clear visual contrast, readable fonts, zoomable pages, and more.

We also want to think about the intersection of visual and non-visual: the areas where we describe what is on screen in alternative text, screen reader labels, and such.

We touched on accessible naming in the previous section on accessible name computation. One issue with relying on aria-label attributes is their content can become outdated for what’s on screen. aria-labelledby could be one technique to keep label content fresh, as it would often reference visible content like headings or other text.

A cautionary note

Many times, developers fire up a screen reader and want to make things perfect. It’s the screen reader equivalent of chasing pixel perfection. But it’s even harder to do with screen readers, partly because accessibility APIs on various platforms have unavoidable differences.

“Is there a way to tell a screen reader that you want a number to be read out as two thousand one hundred and fifty four?”

The recommendation is to leave screen reader defaults alone.

Rather than sinking a bunch of time into trying to craft the perfect screen reader announcement (such as for phone numbers, dates, etc.), get something working that’s good enough. Test it with users who rely on AT if possible.

Here’s a great article from Adrian Roselli (opens in a new tab) on this topic.

Bottom line: don’t try too hard to make labeling perfect for Assistive Technology...you could make the experience worse.