HTML 中的名称、id、aria、角色属性

Question

我知道将 name 和 id 包含在 web 表单元素中时非常重要，所有这些属性，如 name、id、role、aria-xxx、title，是否应该始终包含在 html 元素中？

那么，每篇文章、每个部分、每个导航菜单项都必须具备所有这些属性吗？或者其中一些与某些元素相关，例如网络表单的“名称”或 javascript 定位的“id”？不幸的是，如果某些属性不受支持或不需要，浏览器不会向我返回验证消息。方向，请。

可以有形式吗？

<label for=”first-name”>First Name</label> <input type=”text” id=”first-name” name=”first-name” required aria-required=”true” role="textbox" aria-labelledBy="something">

如您所见，我将 required 和 aria-required 以及一个角色放在一起，可能是冲突吗？我知道角色属性=文本框不是正确的，但只是为了说明我的疑问。提前致谢。

Answer 1

这是个好问题。 TLDR 不是，您不必为所有 HTML 元素添加所有这些属性。更详细的解释，请查看以下文字。

您提到的每个属性都扮演着不同的角色。我们以你提到的那些为例：

• id：用于给元素一个唯一的标识符。对于使用 JavaScript getElementById 引用很有用，对于使用同一页面中的其他属性引用也很有用（例如 <label for="first-name"> 如何通过 id 引用输入元素）。

• name：主要用于读取表单元素的数据。在通过传统 POST 调用向服务器发布表单的某个时间点，name 属性将表示服务器将从网页接收的键/值对的键。如今，人们依赖于 Web API 调用和 AJAX 调用，但它们仍然在使用。

• 角色：这对屏幕阅读器和辅助工具很有用。当 HTML 元素的原始标记元素没有在页面中描绘它们的真实语义时，您应该将角色放在 HTML 元素上。一个常见的例子是人们使用div 元素来构建表格。在这种情况下，您需要为构成表格的各个 div 元素添加表格、网格、行、单元格等角色。如果您使用构建表格的原生 HTML 元素（、、、等），角色将是多余的。

• aria-xxxx：也用于屏幕阅读器和辅助技术。出于多种原因，使用了多种类型的 aria 属性。网络上不乏参考资料。您可以在 MDN 或其他网站上轻松搜索它们。我想在这里指出的是，某些属性会使它们变得多余。

  • 我们以上面的 sn-p 为例。 <input required aria-required="true" />。 required 属性是在 HTML 5 中引入的，对于屏幕阅读器来说已经足够了。因此，如果您的目标是现代浏览器（很有可能），添加 aria-required 是多余的。但是，如果您的目标浏览器不支持 HTML 5，那么拥有它很有用，因为这些浏览器会忽略 required 属性。
  • 从您的 sn-p 中提取的另一个示例来展示同一点是 aria-labelledBy 在此处也是多余的。那是因为您已经有了<label> 元素凭借for 属性标记的输入。简而言之，如果原生 HTML 元素和属性还不够用，则 aria 属性很有用。

总之，每个属性都有其不同的用途。并非所有这些都需要一直存在，这取决于您的代码结构、您使用的 HTML 元素、您的目标浏览器等。

希望这会有所帮助！ :)