更改 html 辅助功能的焦点
Changing focus for html Accessibility
我有一个页面有一个带有提交按钮的表单。单击提交按钮后，我希望焦点转到“成功”或“失败”消息。
现在屏幕 reader 在按下按钮后不会离开按钮。
它停留在“按继续按钮”上，然后我用我的箭头导航。
我希望它专注于取代屏幕上按钮的
标记，并在按下“继续”后阅读消息。
<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" 属性还将明确地将最终消息与按钮相关联。
如果按钮在激活后消失，您将需要选择最有用和最直观的元素将焦点移动到，这通常是用户可以使用的元素。
我有一个页面有一个带有提交按钮的表单。单击提交按钮后，我希望焦点转到“成功”或“失败”消息。 现在屏幕 reader 在按下按钮后不会离开按钮。 它停留在“按继续按钮”上，然后我用我的箭头导航。 我希望它专注于取代屏幕上按钮的
标记，并在按下“继续”后阅读消息。
<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" 属性还将明确地将最终消息与按钮相关联。
如果按钮在激活后消失，您将需要选择最有用和最直观的元素将焦点移动到，这通常是用户可以使用的元素。