Accessibility: Readout multiple spans in div as a single sentence

user_1023542 0
Viewed 1112

I am is sort of dilemma in here.

Stuck on a accessibility problem where I have multiple texts elements inside a div panel. Most screen readers read the elements individually.

I would like them to be read in single sentence.

Below is my minimal version of code:

<div>
  <span>My special coffee is</span>
  <b class="heading">Cappuccino</b>
  <span>. I can drink it all day</span>
</div>

After including role="text" for the parent element, it works nicely but text is not in the supported list of roles.

aria-describedby also didn't work here.

I am using NVDA screen reader software for windows.

What would be a standard recommend approach here?

accessibility html
2 Answers

How you can do it (but shouldn't)

This is how to do this 'correctly', along with an explanation of why you shouldn't do this.

If you aren't able to use the role="text" hack that we often have to use in this scenario then you will have to resort to adding a separate screen reader friendly version of the text that is visually hidden and then hide the original text using aria-hidden="true". Example at end of my answer.

This brings with it it's own problems because aria-hidden is not 100% supported by all browser / screen reader combos (but support is good) so you would get some users hearing this section twice.

In my opinion this is worse than a slight pause between words, but sometimes clients won't listen to reason so I understand if you end up having to do this.

My Advice

Use the role="text" hack as @QuentinC suggested, it is standard practice in accessibility due to certain limitations.

Either that or leave it alone and accept the fact that if this is the worst accessibility problem on your site nobody will mind it at all. Using aria-hidden in order to get something to be read correctly is not a good practice (at time of writing, they may eventually implement this).

Just so you are aware Deque / Axe are going to add this as an exception it seems, so that should give you some confidence that a lot of people agree with the role="text" method.

Example

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
<div aria-hidden="true">
  <span>My special coffee is</span>
  <b class="heading">Cappuccino</b>
  <span>. I can drink it all day</span>
</div>
<p class="visually-hidden">My special coffee is Cappuccino. I can drink it all day</p>

user_27028940

The role "text" isn't standard, but it's probably still the best solution here. At best the screen reader understand it and reads the text as a whole as you want it to be. At worst the screen reader won't understand it and will probably finally take a default role; the text won't be read as a whole, but will still stay readable.

IN any case, ARIA isn't appropriate here, since we are talking about simple text. ARIA is only used with form controls and other interactive components. It isn't guaranteed at all to be taken into account in normal non-interactive text.

user_19712160
Related