how to make sure screen reader reads input field number one by one instead of trillions. ReactJS
I'm looking into accessibility where screen reader reads both aria label and value
I've added split and replace method which reads both number individually and in billions at same time. Does anyone know how to resolve this one?
4 Replies
Maybe add commas between the digits?
@unemployed iirc aria-label and friends should not be used on form controls and similar interactive elements, that accept user input, for that reason.
Try
aria-controls on the input field with an ID of some supporting (inline) element into which you write the space separated numbers.
That "announcer" can be positioned off-screen (.sr-only).
You might also add a role=status to the announcer to inform the SR that something inside will changed.
role=status involves a couple of supporting aria attributes that you might use to "tweak" what's happening, such as aria-live=assertive which should focus attention to that element and maybe make the SR shut-up about the changes in input.value
I also suggest to debounce the update of that "announcer" and toggle the aria-live as you go.
Hope this helps.Thats a great idea,
I will definitely use the given method.
Thank you 😊
ur welcome.
I'd be interested to learn if it actually worked as you expected.