For Screen Readers: How to markup a group of text items to be read as one item? Should I even try?
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.