何时对输入元素使用 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 now has the required attribute, but aria-required is still useful for user agents that do not yet support HTML5.

参考：Using the aria required attribute post on MDN