更改html可访问性的焦点

我有一个页面，它有一个带有提交按钮的表单。单击提交按钮后，我希望焦点转到“成功”或“失败”消息。 现在，屏幕阅读器在按下按钮后不会离开。 它停留在“按下继续按钮”上，我有一个按钮，然后用我的箭头导航离开。 我想让它专注于取代屏幕上按钮的标签，并在按下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>

启动密码重置>
此处显示成功消息
此处显示故障消息

焦点通常适用于可操作的元素。这样的状态消息是不可操作的。对其进行聚焦（需要用聚焦指示器标记，以便于访问）可能会让用户误以为他们可以激活它

我得到的印象是，你想把注意力集中在这条信息上，除此之外没有别的。如果是这样的话，你可以设计它的样式以吸引人们的注意，你还可以将它定位在一个活动区域，以便辅助技术将消息通知用户

为此，您可以先将活动区域设置为空，然后在用户激活按钮后用一条或另一条消息填充该区域

将属性role=“status”应用于“p”元素使其成为活动区域

给“p”元素一个id=“xyz”属性和按钮一个aria controls=“xyz”属性也会显式地将最终消息与按钮关联起来

---

如果按钮在激活后消失，您需要选择最有用和直观的元素来移动焦点，这通常是用户可以使用的元素。

您是否使用AJAX来处理表单提交？如果是这样，只需执行

document.querySelector（“#success”）.focus（）

（或

document.querySelector（“#failure”）.focus（）

，并在成功和失败段落上添加

tabindex=“-1”

，以允许在提交成功或失败回调中将焦点移动到它们。（

tabindex=“-1”

允许编程聚焦，而无需将某些内容添加到页面的聚焦顺序中，这意味着有人无法对其进行tab，但您可以使用代码对其进行聚焦）感谢您的关注。这很有帮助。