Accessible Markup: Provide a pronunciation tip to screenreaders
Last weekend concluded my team’s contribution to Knowbility’s Open AIR competition, building an accessible website for Texas ROSE, who advocates for electric utility customers. I encountered an interesting challenge, while I was testing the site with a screenreader: It pronounced their Twitter handle, @TexasROSEorg, as one unintelligible word.
Deque, a provider of accessibility solutions, provided help-desk Q&A support during the rally by answering the hashtag #dequeAIR. I reached out to them (Phrasing a tech support question in 140 characters really focuses the mind.), and got great help from @ChrisCM2006.
Here’s the problem. The screenreader pronounces @TexasROSEorg as if it were a word. Putting a title attribute on the anchor tag did not help, nor did wrapping it with an abbr tag with a title attribute. It just read the contents of the tag, like this:
But I want to make it sound like “Texas Rose org.” Now, this is a good moment to take a sidebar on accessibility, which is that calling something “accessible” is a personal and subjective assessment. What works for one person can completely flout another. Meeting the needs of as many different audiences as possible is complex and difficult, and always involves trade-offs. So if you are a screenreader user, please tell me whether it is helpful, or a hindrance, to have the Texas ROSE Twitter handle pronounced as three words instead of one.
The solution is to tell the screenreader to ignore the one-word version, and to include a three-word version that is pushed way off the visible screen.
Here’s the markup:
Inside the anchor tab, there is a span with the attribute “aria-hidden=true” wrapping the version for text-consuming users. The aria-hidden attribute tells the screenreader to skip the contents of that span, so it is not read out loud. The three-word version that follows is read by the screenreader, and to avoid showing this version in the text, it is given a CSS class that sets its position far off the viewable frame.
Here’s the CSS definition of the offscreen class:
Why use the positioning trick instead of “display:none” or “visibility:hidden”? Many screenreaders will not read content that is hidden via display or visibility, but will read content that is inline but “appears” to be off the page.
The result is a that sounds like this:
I was pleased that I got the screenreader to pronounce the Twitter handle the same way I would have said it out loud. I do hope that it creates intelligible words for screenreader users, as well. It’s only “accessible” if it actually suits what people need.
I had a fantastic time being part of Headspring’s team and competing in and learning from Open AIR. It was a well run event and a great opportunity to be nerdy for a worthy cause.