0

When the screen reader user navigates through the page and clicks on the reset button. the values in the input box are cleared but the screen reader is not reading anything. We are expecting that the screen reader should be announced as "reset done" Could you please provide the resolution? aria-role=status will it work here? What are the changes that developers should be made here? there is no status display as reset is done on the screen. Any sample website for reset status accessible for screen reader users.

Victor
  • 17
  • 5

1 Answers1

0

One way to inform the user of a reset of the form is to include an element that is only visible for screen readers and then inject text into this element on reset. The element can have role="status" that informs the user of changes in this element and aria-atomic to read all changes. It could look something like this:

<p id="info" role="status" class="visuallyhidden" aria-atomic="true"></p>

And then use a script that manipulates the content of this element on reset.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic

Ossian Sandberg
  • 1
  • 1