更改 html 的焦点

Question

I have a page that has a form with a submit button. Once I click the submit button I would like for the focus to go to the "success" or "failure" message. Right now the screen reader doesn't leave the button once it is pressed. It stays on the "Press Continue button" and I have the then navigate off with my arrows. I would like for it to focus on the

tag that takes the place of the button on the screen and read the message after pressing Continue.

<form>
<h1> Start Password Reset> </h1>
<input placeholder="Email">
<input type="submit" name="Continue" value="Continue">
<p id="success"> Success Message Here </p>
<p id="failure"> Failure Message Here </p>
</form>

Answer 1

Focus normally applies to actionable elements. A status message like this is not actionable. Focusing it (which requires marking it with a focus indicator, for accessibility) could confuse users into believing that they can activate it.

I get the impression that you want to direct attention to the message, and nothing more than that. If so, you could style it so it attracts attention, and you could also locate it in a live region so that assistive technologies will notify users about the message.

For that purpose you could make the live region initially empty, and then fill it with one or the other message after the user activates the button.

Applying the attribute role="status" to a “p” element makes it such a live region.

Giving that “p” element an id="xyz" attribute and the button an aria-controls="xyz" attribute will also explicitly associate the eventual message with the button.

If the button disappears after being activated, you will need to choose the most useful and intuitive element to move the focus to, which would normally be an element that the user can do something with.