何时对输入元素使用 required 属性与 aria-required 属性？

Question

我正在尝试使表单易于访问。我应该让我的输入同时具有required 和aria-required 属性，还是只有一个？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" required>

还是这样？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-required="true">

还是这样？

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" aria-required="true" required>

文章Accessible HTML5 Forms – Required Inputs 声称最好同时实现。

Answer 1

当 John Foliot 在 2012 年写那篇文章时，这是非常真实的。两者都需要。

今天已经不是这样了。我可以拿你的例子，把它放在in a CodePen，然后在 JAWS 和 NVDA 中检查它（抱歉，今天没有 VoiceOver）：

<label for="textbox1">Input</label>
<input id="textbox1" type="text" name="Text Box" required>

您会很高兴知道 NVDA 和 JAWS 都会根据需要公布该字段。

简而言之，您不再需要aria-required。只需使用required。

您可以在 Steve Faulkner（ARIA 规范的编辑之一）自 2015 年撰写的这篇文章中阅读更多关于您可以转储的 ARIA 属性：http://html5doctor.com/on-html-belts-and-aria-braces/

Answer 2

HTML5 现在有 required 属性，但 aria-required 仍然是 对于还不支持 HTML5 的用户代理很有用。

参考：Using the aria required attribute post on MDN