E-mail List Archives
Thread: What's the best way of announcing the value of the <input> text field in real-time
Number of posts in this thread: 3 (In chronological order)
From:
Date: Mon, Apr 05 2021 1:13AM
Subject: What's the best way of announcing the value of the <input> text field in real-time
No previous message | Next message →
Hello, I'm testing the accessibility of the shopping platform webpage now.
I'm checking the page you can read product details and then order that product. A form container you can select the product options and select quantity is in there.
If you selected all of the required options, the Quantity Numeric text field with the increase and decrease quantity buttons will be shown on your display.
The trouble is the announcement of input value when you pressing the increase or decrease quantity button.
I know some techniques. it's not bad, but not cool too, I think.
List of technique that I know
- get value by javascript and then insert text at the invisible Live-Region to notify a value of the quantity text field.
- get value by javascript and then put it in the "aria-describedby" or "aria-label" attribute value of their buttons.
I think it's not a bad technique in my opinion. And this is my best.
But, our developers always ask us again like "Is there any other ways more easy and cool?".
I think I know why they ask us like this. They're always suffering from a manpower shortage and a lack of time. Most of their projects are large and wide, And in severe cases, They fix the very old pages. I wanna help them reduce their working process even a little bit.
Do you have any ideas except the above list?
From: Mark Magennis
Date: Thu, Apr 08 2021 1:57AM
Subject: Re: What's the best way of announcing the value of the <input> text field in real-time
← Previous message | Next message →
Have you considered using the ARIA spinbutton role? https://www.w3.org/TR/wai-aria-practices-1.1/#spinbutton
I've never used this myself so I don't know how well it is supported by browser/AT combinations but I imagine that a screen reader would likely announce changes to the aria-valuenow property.
Mark
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of ???
Sent: 05 April 2021 08:13
To: = EMAIL ADDRESS REMOVED = < = EMAIL ADDRESS REMOVED = >
Subject: [EXTERNAL] [WebAIM] What's the best way of announcing the value of the <input> text field in real-time
Hello, I'm testing the accessibility of the shopping platform webpage now.
I'm checking the page you can read product details and then order that product. A form container you can select the product options and select quantity is in there.
If you selected all of the required options, the Quantity Numeric text field with the increase and decrease quantity buttons will be shown on your display.
The trouble is the announcement of input value when you pressing the increase or decrease quantity button.
I know some techniques. it's not bad, but not cool too, I think.
List of technique that I know
- get value by javascript and then insert text at the invisible Live-Region to notify a value of the quantity text field.
- get value by javascript and then put it in the "aria-describedby" or "aria-label" attribute value of their buttons.
I think it's not a bad technique in my opinion. And this is my best.
But, our developers always ask us again like "Is there any other ways more easy and cool?".
I think I know why they ask us like this. They're always suffering from a manpower shortage and a lack of time. Most of their projects are large and wide, And in severe cases, They fix the very old pages. I wanna help them reduce their working process even a little bit.
Do you have any ideas except the above list?
From:
Date: Sat, Apr 10 2021 5:20AM
Subject: Re: What's the best way of announcing the value of the <input> text field in real-time
← Previous message | No next message
Hello, Mark. I read your good suggestion well. Thanks a lot.
It's a very cool solution. I've been forgetting the spin-button role.
I tried making a custom spin-button. It's settled to a certain extent.
But, I have one concern.
I made the two buttons and native input, and then I put a spin button role attribute in the two buttons. and I put the "aria-valuetext" attribute value for announcing the quantity when they're clicked.
By the way, I saw the WAI-ARIA Authoring Practice page. My buttons are working very well, but my implementation way is different from the spin button of Authoring Practice.
the Authoring Practice example page is the custom date-picker input with the up and down button that not pressable for Mobile AT.
They hid that buttons from the Accessibility Tree by using "aria-hidden". And, the Spin button role was using on the div that's custom input.
I think I know why they made it like that. I think They focused on implementing the PC(Windows, Mac) native number input as the same thoroughly. So I don't know if my implementation method is allowed standardly.