我知道name和id在将它们包含到web表单元素中时具有关键重要性,所有这些属性,如name、id、role、aria xxx、title,都应该始终包含在html元素中吗?
所以,每一篇文章、每一节、每一个导航菜单项都必须具有所有这些属性?或者其中一些将与某些元素相关,比如web表单的"name"或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">
正如你所看到的,我需要AND咏叹调,也需要一个角色,可能会有冲突吗?我知道角色属性=文本框不是正确的,但只是为了说明我的怀疑。提前谢谢。
这是个好问题。TLDR是否定的,您不必为所有HTML元素添加所有这些属性。有关更详细的解释,请查看以下文本。
你提到的每一个属性都扮演着不同的角色。让我们以你提到的那些为例:
-
id:用于给元素一个唯一的标识符。对于使用JavaScript
getElementById
进行引用很有用,对于使用同一页面中的其他属性进行引用也很有用(比如<label for="first-name">
如何通过id引用输入元素(。 -
name:主要用于读取表单元素的数据。在表单通过传统POST调用发布到服务器的某个时间点,
name
属性将表示服务器将从网页接收的键/值对的键。现在,人们依赖Web API调用和AJAX调用,但它们仍然在使用。 -
角色:这对屏幕阅读器和辅助工具很有用。当HTML元素的原始标记元素没有在页面中描绘其真实语义时,您应该在HTML元素上设置角色。一个常见的例子是人们使用
div
元素来构建表。在这种情况下,您需要为构成表的各个div元素添加表、网格、行、单元格等角色。如果您使用构建表的原生HTML元素(、等(,则角色将是多余的。 -
ariaxxxx:也用于屏幕阅读器和辅助技术。由于多种原因,使用了许多类型的aria属性。网上不乏参考资料;您可以在MDN或其他网站上轻松搜索它们。这里我要注意的是,有些属性会使它们变得多余。
- 让我们以上面的片段为例。
<input required aria-required="true" />
。所需的属性是在HTML5中引入的,对于屏幕阅读器来说已经足够了。因此,如果您的目标是现代浏览器(这很有可能(,那么添加aria-required
是多余的。但是,如果您的目标浏览器不支持HTML5,那么拥有它是很有用的,因为这些浏览器会忽略required
属性 - 从您的代码片段中获得的另一个示例展示了相同的观点,即
aria-labelledBy
在这里也是多余的。这是因为您已经通过for
属性将输入标记为<label>
元素。简而言之,如果原生HTML元素和属性还不够,aria属性是有用的
- 让我们以上面的片段为例。
总之,每个属性都有其不同的用途。并非所有这些都需要一直存在,这取决于您的代码结构、您正在使用的HTML元素、您正在瞄准的浏览器等。
希望这能有所帮助!:(