For Screen Readers: How to markup a group of text items to be read as one item? Should I even try?

Question

How might I mark up the following component in accordance with WCAG 2.1 guidelines, accessibility best practices, and with as much assistive technology compatibility as possible (I don't want to target just JAWS, NVDA, or VoiceOver)?

Or do screen reader (and other assistive technology) users even care about this particular interaction?

---

As a sighted user, I visually consume the following as one piece of information:

But as a screen reader user, when navigating by "item", each piece of marked-up text is read individually.

The text is heavily marked up for stylability, semantics, and to convey hidden text for screen reader users only, which is common place in the industry.

The markup looks something like this (Note: the behavior is noticed with any combination of tags though, so don't comment on semantics in this specific example):

<data value="0.99">
    <span class="sr-only">Sale:</span>
    <mark>$0.99</mark>
    <span class="sr-only">discounted from</span>
    <s>$1.00</s>
</data>

So the screen reader user experience is as follows:
Note: currency readout varies by reader and user settings.

[User executes "Read current item" command]

Sale:

[User executes "Read next item" command]

Ninety-nine cents

[User executes "Read next item" command]

discounted from

[User executes "Read next item" command]

One dollar

This seems counter intuitive and potentially annoying, because it exposes implementation details about my markup to the user that they don't necessarily need to know or care about.

---

By contrast, if I had chosen not to mark up the price for semantics or style, and used just plain text to convey the same information to all users, it would be read by screen readers as one item:

<span>Sale: $0.99 discounted from $1.00</span>

So the screen reader experience is as follows:
Note: currency readout varies by reader and user settings.

[User executes "Read current item" command]

Sale: Ninety-nine cents discounted from One dollar

This feels like a much better experience and is more congruous with how a sighted user would visually consume the information, and how I might want all users to consume the information.

Answer 1

(expanding comment into answer:)
For mobile users you can use the nonstandard role="text" on the parent element. It's hacky and only works on WebKit, but that is fine since in my recollection, only VoiceOver will (incorrectly) break a line in parts when it encounters an inline element. NVDA, JAWS and (I believe) TalkBack will read the line at once correctly, but like @andrewmcpherson commented, please test using a variety of several screen readers.

Using role="text" does not (and thankfully, cannot) break granularity selection, so if users want to read the text by line, word or character, they can keep doing that on demand by using the screen reader's shortcuts (the Rotor on iOS, for example). Using this role only groups children together when navigating between items (left/right swipe on iOS).

I'd also consider whether adding "Sale:" first is even useful, you're already saying "discounted from" so adding Sale duplicates this, and can create audio clutter when browsing through many items.

Answer 2

How to markup a group of text items to be read as one item? Should I even try?

Put this way, the question is a bit misguided, because:

as a screen reader user, when navigating by "item",

Screen readers can read chunks of text in different granularity, according to user preference. This can a paragraph, a line, a word, or a character, at a time. Experienced screen reader users can switch granularity quite often.

Some elements can cause a screen reader to pause or halt. There's no getting around this if you want the coloured background for the sale price, and strikethrough for the original price.

This feels like a much better experience and is more congruous with how a sighted user would visually consume the information, and how I might want all users to consume the information.

Emphasis mine, there. It's good that you're thinking about how to provide an equivalent experience for screen reader users, but beware of trying to force a particular experience on someone. After all, you don't know why they are using a screen reader. Maybe they are blind, maybe they aren't..