0

I have a situation like the below on a webpage:

"If you chose to travel on [Insert combobox with list of date options], then your ticket price would be [Insert updated price depending on date selected]"

In the above case, what success criteria are required to make this concept accessible? I am thinking:

  1. Add instructions to the combobox that the price on the page will update upon date selection (3.2.2 On Input)
  2. Add role="status" to the price so that the updated price is announced to screen reader users upon date selection (4.1.2 Name, Role, Value).
  3. Should aria-atomic="true" be added to the "role="status" too? I feel like reading the entire sentence could be exhausting every time a new date selection is made.

Any feedback would be greatly appreciated! Thank you so much!

zara
  • 1

1 Answers1

0

I would say that it isn't usual for shopping websites to be formulated in a fill in the gaps style like your example.

I mean that, rather than having a sentence
If [option] then [result]
usually the language is more direct, like: Select option: [option]
Result: [result]

With such a more direct formulation, the relationship, i.e. the fact that if you change an option, it will change the result, appears a lot more obvious, probably for all users. This is for your #1.

Note also that screen reader user, keyboard only user, user with dys troubles, or user with particular needs doesn't at all mean stupid. You don't necessarily need to be verbose for everything. In your case, it should be fairly obvious for anyone with a normal brain that the price of the ticket can vary depending on the date of the travel. You probably don't need to say it explicitly.

For your #2 and #3, as you have noticed, repeating the same sentence over and over again will quickly become annoying. However, maybe you can't only announce the changed value alone either. It can be useful to repeat the label before the updated value as well. It's quite optional when you have a single option updating a single value, but it's becoming absolutely essential if you have multiple options updating several values at the same time (otherwise typically the screen reader reads a serie of values but you quickly lose which is which)

IF you repeat the label at each change, it has to be as short as possible to avoid being annoying, but long enough to stay clear. In your case the label can just be "Price". If you can't arrange your markup to have an ARIA live region saying "Price: $12.34" in your regular UI, the recommended way is to create a special zone for screen reader messages. That zone can be put off-screen with CSS.

Technical important note: You must be very cautious on how you manipulate text inside ARIA live regions. Adding new DOM elements work very well everywhere, but changes to the existing DOM not always so well. What is announced or not can dramatically change depending on what DOM manipulations you do exactly. For example, a simple innerHTML += string might be harmful because interpreted exactly like innerHTML = innerHTML + string, causing the whole text to be repeated from the beginning, what wasn't intended. That's why you need to stay extremely simple: I recommend to only make additions at the end, or replace the whole text, but no other kind of manipulation.

QuentinC
  • 12,311
  • 4
  • 24
  • 37