WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dynamic price change on radio button selection

for

From: Birkir R. Gunnarsson
Date: Dec 11, 2019 8:00PM

You oul wait a second or two to update the price after the radiobutton
focus change, you can do that pretty easily using Javascript.
Couple that with aria-live="polite" and I think that's your best bet.
Dan's idea, adding the price into the label, is ideal if it can be implemented.
YOu could try to use aria-describedby to point to the price and see ow
it's treated b screen readers
<label>option 1
<input type="radio" name="grp" aria-describedby="price">
</label>

label>option 2
<input type="radio" name="grp" aria-describedby="price">
</label>

<di aria-live="polte" id="price" aria-atomic="true">Price: <span
id="newPrice"> </span></div>

Thi could end up resulting in multiple announcements by screen
readers, and too much isnot necessarily any better, but you could try
it.
AT a more fundamental level, make sure the updated price comes, in
content order, after the radio buttons that affect it. That way it is
discoverable for users regardless of which option they selected.
IN that case the live region is a nice ad for the accessible
experience, but you are not relying on it to conform to WCAG.



On 12/11/19, Radhika Takyar < <EMAIL REMOVED> > wrote:
> Have tried aria-live = polite as well. It is working the same way!
>
>
> Regards,
> Radhika
>
>> On Dec 11, 2019, at 3:26 PM, Aditya via WebAIM-Forum
>> < <EMAIL REMOVED> > wrote:
>>
>> Hello Radhika,
>>
>> Use aria-live=polite. That way it will wait until the focus change event
>> announcement is done and then it announces the price change.
>>
>> "Assertive" will announce it right away but since focus change is also
>> happening, you probably are running into a race condition.
>>
>> Hope it works! Please let us know if it does :)
>>
>> Sent from my iPhone
>>
>>> On Dec 11, 2019, at 12:17 PM, Swift, Daniel P. < <EMAIL REMOVED> > wrote:
>>>
>>> Could you include the information in the label itself. Something like:
>>>
>>> [] Enroll Monthly for x
>>> [] Pay a one-time rate for x
>>>
>>> Would that work? It sounds like you might have a total which you are
>>> updating and I wonder (if there are no other variables), would the above
>>> example work?
>>>
>>> Dan Swift
>>> Senior Web Specialist
>>> University Communications and Marketing
>>> West Chester University
>>> 610.738.0589
>>>
>>>