2

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:

enter image description here

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.

  • 1
    I'd keep Andrew's answer below in mind. My guess is that JAWS/NVDA users read line by line and will experience all this as a single line regardless. For mobile users you can use the nonstandard role="text" on the parent element. 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. – Victor May 14 at 15:43
  • 🎉🎊💯👌✋🙏@Victor Please post this as an answer, so I can accept. This is exactly what I was looking for. The linked resource directly applies to my scenario. Thank you. – gfullam May 14 at 16:35
  • 1
    The article Victor links to is very interesting, but as he points out it is not part of the ARIA standard. It using this, you should do further testing with a variety of screen readers. Not just to test that it works, but more importantly that it doesn't prevent a user from reading at the word/character granularity. Prices, in particular, are a good example of something that a user may well want to double-check by reading it one character at a time. The text role has been deferred to ARIA 2.0, so it may get standardized eventually, but I'd we wary of using it for now. – andrewmacpherson May 15 at 0:53
  • Some more background on role="text". It seems that only WebKit has implemented it so far. Role=”text” is (presently) kinda not a thing, sorta. – andrewmacpherson May 15 at 0:56
  • @andrewmacpherson That's all good advice and I plan to do exactly that. Thorough testing among several browser-screen reader combinations is already part of my workflow. I also found the article you referenced and it is helpful. – gfullam May 15 at 18:38
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.

  • The part about "Sale" is a good idea; it's less verbose for screen readers, and could also work well as a visible badge, so there's less difference between the two experiences. – andrewmacpherson May 15 at 19:30
0

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..

  • I understand and agree with all the points you make. Yet, I am bothered by the fact that implementation details needed for sighted users are exposed to screen reader users. I like the idea of pursuing a group of items, if possible, because it would theoretically allow AT users to interact with individual items in the group if they choose, or to quickly pass on to the next item if they choose. As it stands now, this group of text isn't read as a line, paragraph, or other comparable single unit of related information, yet it definitely is one item and I can't seem to convey that via AT. – gfullam May 14 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.