更改 html 可访问性的焦点

Question

我有一个带有提交按钮的表单的页面。单击提交按钮后，我希望焦点转到“成功”或“失败”消息。 现在屏幕阅读器一旦按下按钮就不会离开。 它停留在“按继续按钮”上，然后我用我的箭头导航。 我希望它专注于

标签代替屏幕上的按钮并在按下 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

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

我的印象是您希望将注意力集中在消息上，仅此而已。如果是这样，您可以设置样式以吸引注意力，还可以将其定位在实时区域中，以便辅助技术将消息通知用户。

为此，您可以使活动区域最初为空，然后在用户激活按钮后用一条或另一条消息填充它。

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

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

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