何时使用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声称最好同时实施两者。

编辑：上述链接的网站已不再活跃。

- Ralph David Abernathy

---

文章链接看起来很棒，答案取决于您搜索的兼容选项。当您同时使用两者时，范围最广。您还可以查看https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute - gevorg

Answer 1

当约翰·福利奥特在2012年写那篇文章时，这是非常正确的。你需要两者。

但今天已经不再是这样了。我可以拿你的例子，在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/

- aardrian

---

请参考以下类似问题的答案：https://dev59.com/PloT5IYBdhLWcg3w4SpQ#38059790 - aardrian

如果您想避免本地浏览器验证，aria-required可能会很有用。 - Drazen Bjelovuk

Answer 2

HTML5现在拥有所需的属性，但对于仍不支持HTML5的用户代理来说，aria-required仍然很有用。

参考：MDN上使用aria required属性的文章

- Bernd Bauer