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:

Follow 
<a href="http://twitter.com/TexasROSEorg"><span aria-hidden="true">@TexasROSEorg</span><span class="offscreen">Texas ROSE org</span></a>
for electric utility news that affects you.

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:

.offscreen {
  position:absolute; 
  left:-10000px; 
  top:auto; 
  width:1px; 
  height:1px; 
  overflow:hidden;
}

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 Texas ROSE org 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.

Related Articles:

About Sharon Cichelli

I am a Headspring Senior Consultant, developing custom enterprise software for our clients and leading training classes on the latest Microsoft technologies. I blog about .NET development, best practices in agile software development, and my nerdy hobbies.
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • scichelli

    Oh, ha, I should mention that the link to Texas ROSE goes to the “before” site. Their new site will go live after the Open AIR judging is complete.

  • http://www.facebook.com/cribas Carlos Ribas

    Cool post!  This reminds me of a recent customer encounter.  I received an e-mail from a blind user, asking for some bugfixes.  Apparently, iOS 6 had changed some behavior and my app was interacting with that new behavior in a weird way, causing annoying alerts on every tap.   It was so amazing to me to realize that people are using my product in a way I had no idea was even possible.  We exchanged some e-mails, mostly so my customer could teach me how to use the device in accessible mode, then I spent a couple of hours going through it and adding voice-over hint text where needed, fixing weird ordering, and of course correcting that issue with the annoying alerts.  When I released the next update, that same customer emailed me again thanking me for the fixes and improvements.  Awesome.

    • scichelli

      Oh, that’s awesome, Carlos. Cool that your customer was open to talking with you about it. I’d love to be able to chat with someone and get that kind of insight. :) I’m having trouble imagining how one would use an iPhone without seeing it; this is really intriguing.

      • http://www.facebook.com/cribas Carlos Ribas

        Indeed.  He had been using my app for quite some time and just coping with a few minor issues but then iOS 6 really hobbled it, so he reached out.  Super cool.  I felt the same way about using an iPhone without seeing it.  It is actually pretty well done.  If you have one and want to try it out, shoot me an e-mail and I’ll share how to enable it :)

  • Taylor D Dewey

    Nice trick! I’d be interested in knowing how that works with SEO. I’m particularly concerned about the branding implications. I’m trying to influence the way a brand is pronounced by a screen reader, but I don’t want to have the incorrect spelling indexed. Ever.

    • scichelli

      Wow, neat question. Search engine crawlers are the most ubiquitous screen readers, if you see what I mean, so I get why this is on your mind. That link would appear to them as if the linked text were “@TexasRoseOrg Texas ROSE Org”, which is just what you’re trying to avoid.

      SEO is way outside my wheelhouse. I’m curious, what’s the ramification of having the incorrect spelling indexed? (I would have thought it would help people, who make misspellings, find your site more easily.)