WebAIM - Web Accessibility In Mind

E-mail List Archives

What's the best way of announcing the value of the <input> text field in real-time

for

From: Date: Apr 5, 2021 1:13AM

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?