We always try and be as pragmatic as we can at Open, offering solutions that solve the problem at hand as simply as possible. For mobile screen reader users role="text" can be used by developers in a way that improves their experience.
Even though role="text" is not scheduled for inclusion in ARIA1.1, it still seems to have support in mobile browsers. And it can be used to improve the sometimes fragmented reading experience within mobile screen readers.
A problem
Content blocks will often use <span>, <strong>, or other HTML elements to annotate or style separate sections of paragraphs or headings, etc.
This is a legitimate use, but mobile screen readers (Voiceover, Talkback) have a tendency to announce each segment separately when users swipe right or left through the content. It also happens when using hidden ‘screen reader text’ to add context to elements.
This can be quite/mildly/very (delete as appropriate) annoying, and gives the user a bit of jerky experience.
A solution
Use role="text" around all the elements that you want to be announced in one go.
For example:
<span role="text">I haven't smoked for <span class="highlight">20</span> years.</span>
Things to watch out for
Using role="text" changes the semantic meaning of the element, so it needs to be used with caution.
Example:
<h2 role="text">Log on <span class="sr-text"> step 2 of 3</span></h2>
Here, although the entire text will be read out as one block, the role="text" will override the semantic meaning of the heading, so the heading effectively disappears from the page for screen reader users. To get round this, use:
<h2><span role="text">Log on <span class="sr-text"> step 2 of 3</span></span></h2>
Now the text will all be read out at the same time, and screen readers will still recognise the element as a heading.
Also…
It’s important to realise that this solution is a bit of a hack.
And, since role="text" is not yet a fully published standard there is a risk that it may not work. But screen readers should gracefully ignore the role="text" if they don’t recognise it.
If you are interested in more solutions
Open Inclusion offer developer accessibility training where you can learn from Graham, author of the above or other accessibility developers. We also act as expert consultants on projects where we can can assist identify issues and provide direct solutions support. Please contact us if you would like to know more.
