I’ve been playing around with ways of expanding abbreviated text on mobile using both <abbr> and <span> specifically to see how well supported voice output is. I ran a few mobile browsers and voice output software over a test case for abbr and span listing abbreviated days of the week using <abbr>, <span> and as is (i.e. Mon, Tue etc).
The results in the table below lists what is ‘spoken’ by each browser / voice output pairing:
|Mobile Safari / iOS VoiceOver||Opera Mini / iOS VoiceOver||Opera Mini / Android / Talkback||Android/ Talkback||Android/ IDEAL Web Reader||Nokia/ Talks|
|Uncoded||Monday, Tuesday, Wed, Thursday, Friday, Sat, Sun||NA||NA||NA||Mon, Tue, Wed, Thu, Fri, Sat, Sun||Mon, Tuesday, Wed, Thursday, Friday, Sat, Sun|
|ABBR||Monday, Tuesday, Wed, Thursday, Friday, Sat, Sun||NA||NA||NA||Mon, Tue, Wed, Thu, Fri, Sat, Sun||Mon, Tuesday, Wed, Thursday, Friday, Sat, Sun|
|Span||Monday, Tuesday, Wed, Thursday, Friday, Sat, Sun||NA||NA||NA||Mon, day, Tuesday, sday, Wed, nesday, Thursday, rsday, Friday, day, Sat, urday, Sun, day||Mon, day, Tuesday, sday, Wed, nesday, Thursday, rsday, Friday, day, Sat, urday, Sun, day|
Note: Android’s browser and Talkback (from the Google EyesFree Project run by TV Raman) still don’t support ‘web view’ so was not included in the test case. Equally, Opera Mini does not support speech output either on iOS with VoiceOver or Android with Talkback so was not included. I will revisit this if things change. The IDEAL Web Reader is a self voicing browser available for free on in the Android Market place.
- It looks like text-to-speech (TTS) engines for VoiceOver and Talks expand words they know (i.e. Mon to Monday) but ignore text that are words in their own right (i.e. wed, sat, sun). Nuance, the speech engine for VoiceOver, has the strongest support for automatically expanding words whereas the Nokia TTS has slight inconsistencies.
- <abbr> and <span> don’t seem to be supported by mobile Safari, the IDEAL Web Browser or the Nokia browser as all three failed to expand the days of the week that were not already expanded by TTS.
- Using <span> results in the hidden text being read out in addition to the long and short forms of the days of the week.
If looking for a solution that works seamlessly across desktop and mobile browsers it looks like <abbr> and <span> is not it. What works best for screen readers on desktop browsers is <span> however this seems to have the worst support on mobile.
At least two screen reader users (@blindgeek and @kirankaja12) have mentioned that TTS expanding text can be quite annoying, presumably because it gets things wrong and confused. As a developer I’m not sure there is much that can be done about it especially given it can not be over ridden with <abbr> or <span>. The best advice is to avoid abbreviations where possible and keep written text plain and simple on mobile,