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

问题描述 投票:0回答:1

我知道名称和ID在将其包含到Web表单元素中时具有关键的重要性,所有这些属性(例如名称,ID,角色,aria-xxx,标题)都应该始终包含在html元素中吗?

所以,每个文章,每个部分,每个导航菜单项都必须具有所有这些属性?还是其中的某些元素与某些元素相关,例如针对Webform的“名称”或针对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">

如您所见,我提出要求并必须使用咏叹调,而且还扮演一个角色,可能会发生冲突?我知道角色attribute = textbox不是正确的角色,但这只是为了说明我的疑问。预先感谢。

html validation attributes accessibility id
1个回答
2
投票

这是一个好问题。 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或其他网站上轻松搜索它们。我要在这里指出的是,某些属性使它们变得多余。

    • 让我们以上面的代码段为例。 <input required aria-required="true" />。必需属性是在HTML 5中引入的,对于屏幕阅读器来说已足够。因此,如果您针对的是现代浏览器(很有可能),则添加aria-required是多余的。但是,如果您要针对不支持HTML 5的浏览器,那么使用它会很有用,因为这些浏览器会忽略required属性。
    • 从您的摘录中展示出同样观点的另一个示例是aria-labelledBy在这里也是多余的。那是因为您已经借助<label>属性用for元素标记了输入。简而言之,如果本机HTML元素和属性还不够,则aria属性很有用。

总之,每个属性都有其不同的用途。并不是所有的代码都需要一直显示,这取决于您的代码结构,所使用的HTML元素,定位的浏览器等。

希望这会有所帮助! :)

© www.soinside.com 2019 - 2024. All rights reserved.