E-mail List Archives
Thread: Dynamic price change on radio button selection
Number of posts in this thread: 6 (In chronological order)
From: Radhika Takyar
Date: Wed, Dec 11 2019 10:06AM
Subject: Dynamic price change on radio button selection
No previous message | Next message →
Hi- I have a quick question around dynamic price change as you select the radio button option for one time but or other radio button for enroll for every month. We are using aria- live to announce the dynamic price change. But have been facing some issues.
1. On iOS web when selecting radio button , voice over is not announcing the price change happening on the page. Using aria- live = assertive.
2. And on desktop with NVDA on Chrome and Firefox screen reader is announcing the price change first and radio button label after that. As user is navigating between the radio button so should announce radio button label first and price change after that.
Anyone have any thoughts or remediation for the above issues mentioned above?
Looking forward to hear back from you! Thank you so much in advance.
Have a great day!
Regards,
Radhika
From: Swift, Daniel P.
Date: Wed, Dec 11 2019 11:17AM
Subject: Re: Dynamic price change on radio button selection
← Previous message | Next message →
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
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Radhika Takyar
Sent: Wednesday, December 11, 2019 12:07 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Dynamic price change on radio button selection
Hi- I have a quick question around dynamic price change as you select the radio button option for one time but or other radio button for enroll for every month. We are using aria- live to announce the dynamic price change. But have been facing some issues.
1. On iOS web when selecting radio button , voice over is not announcing the price change happening on the page. Using aria- live = assertive.
2. And on desktop with NVDA on Chrome and Firefox screen reader is announcing the price change first and radio button label after that. As user is navigating between the radio button so should announce radio button label first and price change after that.
Anyone have any thoughts or remediation for the above issues mentioned above?
Looking forward to hear back from you! Thank you so much in advance.
Have a great day!
Regards,
Radhika
From: glen walker
Date: Wed, Dec 11 2019 11:21AM
Subject: Re: Dynamic price change on radio button selection
← Previous message | Next message →
Just a quick thought without testing anything first, but I rarely use
"assertive". I hardly ever have a case where a message is so important
that it needs to come before everything else. Using aria-live=polite works
great in almost every situation.
Using assertive might be causing your #2 problem.
In general, aria-live works fine with VoiceOver, if implemented correctly.
On Wed, Dec 11, 2019 at 10:07 AM Radhika Takyar < = EMAIL ADDRESS REMOVED = >
wrote:
> Hi- I have a quick question around dynamic price change as you select the
> radio button option for one time but or other radio button for enroll for
> every month. We are using aria- live to announce the dynamic price change.
> But have been facing some issues.
>
> 1. On iOS web when selecting radio button , voice over is not announcing
> the price change happening on the page. Using aria- live = assertive.
>
> 2. And on desktop with NVDA on Chrome and Firefox screen reader is
> announcing the price change first and radio button label after that. As
> user is navigating between the radio button so should announce radio button
> label first and price change after that.
>
> Anyone have any thoughts or remediation for the above issues mentioned
> above?
>
> Looking forward to hear back from you! Thank you so much in advance.
>
> Have a great day!
>
> Regards,
> Radhika
> > > > >
From: Aditya
Date: Wed, Dec 11 2019 1:26PM
Subject: Re: Dynamic price change on radio button selection
← Previous message | Next message →
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 ADDRESS 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
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Radhika Takyar
> Sent: Wednesday, December 11, 2019 12:07 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Dynamic price change on radio button selection
>
> Hi- I have a quick question around dynamic price change as you select the radio button option for one time but or other radio button for enroll for every month. We are using aria- live to announce the dynamic price change. But have been facing some issues.
>
> 1. On iOS web when selecting radio button , voice over is not announcing the price change happening on the page. Using aria- live = assertive.
>
> 2. And on desktop with NVDA on Chrome and Firefox screen reader is announcing the price change first and radio button label after that. As user is navigating between the radio button so should announce radio button label first and price change after that.
>
> Anyone have any thoughts or remediation for the above issues mentioned above?
>
> Looking forward to hear back from you! Thank you so much in advance.
>
> Have a great day!
>
> Regards,
> Radhika
> > > > > > >
From: Radhika Takyar
Date: Wed, Dec 11 2019 1:39PM
Subject: Re: Dynamic price change on radio button selection
← Previous message | Next message →
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 ADDRESS 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 ADDRESS 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
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Radhika Takyar
>> Sent: Wednesday, December 11, 2019 12:07 PM
>> To: = EMAIL ADDRESS REMOVED =
>> Subject: [WebAIM] Dynamic price change on radio button selection
>>
>> Hi- I have a quick question around dynamic price change as you select the radio button option for one time but or other radio button for enroll for every month. We are using aria- live to announce the dynamic price change. But have been facing some issues.
>>
>> 1. On iOS web when selecting radio button , voice over is not announcing the price change happening on the page. Using aria- live = assertive.
>>
>> 2. And on desktop with NVDA on Chrome and Firefox screen reader is announcing the price change first and radio button label after that. As user is navigating between the radio button so should announce radio button label first and price change after that.
>>
>> Anyone have any thoughts or remediation for the above issues mentioned above?
>>
>> Looking forward to hear back from you! Thank you so much in advance.
>>
>> Have a great day!
>>
>> Regards,
>> Radhika
>> >> >> >> >> >> >> >
> > > >
From: Birkir R. Gunnarsson
Date: Wed, Dec 11 2019 8:00PM
Subject: Re: Dynamic price change on radio button selection
← Previous message | No next message
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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>>>
>>> -----Original Message-----
>>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>>> Radhika Takyar
>>> Sent: Wednesday, December 11, 2019 12:07 PM
>>> To: = EMAIL ADDRESS REMOVED =
>>> Subject: [WebAIM] Dynamic price change on radio button selection
>>>
>>> Hi- I have a quick question around dynamic price change as you select the
>>> radio button option for one time but or other radio button for enroll for
>>> every month. We are using aria- live to announce the dynamic price
>>> change. But have been facing some issues.
>>>
>>> 1. On iOS web when selecting radio button , voice over is not announcing
>>> the price change happening on the page. Using aria- live = assertive.
>>>
>>> 2. And on desktop with NVDA on Chrome and Firefox screen reader is
>>> announcing the price change first and radio button label after that. As
>>> user is navigating between the radio button so should announce radio
>>> button label first and price change after that.
>>>
>>> Anyone have any thoughts or remediation for the above issues mentioned
>>> above?
>>>
>>> Looking forward to hear back from you! Thank you so much in advance.
>>>
>>> Have a great day!
>>>
>>> Regards,
>>> Radhika
>>> >>> >>> at http://webaim.org/discussion/archives
>>> >>> >>> >>> >>> >>
>> >> >> >> > > > > >
--
Work hard. Have fun. Make history.