..."> ..."/> ..."> ...">

HTML中“角色”属性的目的是什么?

JavaScript

Stafan西门凯

2020-03-16

我一直在某些人的工作中看到角色属性。我也使用它,但是我不确定它的效果。

例如:

<header id="header" role="banner">
    Header stuff in here
</header>

要么:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

要么:

<section id="main" role="main">
     Main content stuff in here
</section>

此角色属性是否必要?

此属性更适合语义吗?

它会提高SEO吗?

可以在此处找到角色列表,但是我看到有人组成了自己的角色是否允许或正确使用role属性?

有什么想法吗?

第1641篇《HTML中“角色”属性的目的是什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
乐伽罗古一 2020.03.16

据我了解,角色最初是由XHTML定义的,但已被弃用。但是,它们现在由HTML 5定义,请参见此处:https : //www.w3.org/WAI/PF/aria/roles#abstract_roles_header

角色属性的目的是确定要解析的软件作为Web应用程序一部分的元素(及其子元素)的确切功能。这主要是作为屏幕阅读器的可访问性,但是我也可以看到它对于嵌入式浏览器和屏幕抓取器很有用。为了对异常的HTML客户端有用,需要将该属性设置为我链接的规范中的角色之一。如果您自己制作,此“未来”功能将无法正常工作-评论会更好。

这里的实用性:http : //www.accessibleculture.org/articles/2011/04/html5-aria-2011/

小小飞云 2020.03.16

此角色属性是否必要?

答:是的

  • 当语言不定义自己的角色属性时,角色属性对于支持可访问的富Internet应用程序WAI-ARIA定义基于XML的语言中的角色是必需的
  • 尽管这是角色属性由协议和格式工作组发布的原因,但该属性也具有更通用的用例。

它为您提供:

  • 辅助功能
  • 设备适配
  • 服务器端处理
  • 复杂的数据描述等
阳光西门 2020.03.16

角色属性主要提高使用屏幕阅读器的人员的可访问性。在某些情况下,我们使用它,例如可访问性,设备适配,服务器端处理以及复杂的数据描述。要了解更多信息,请点击:https : //www.w3.org/WAI/PF/HTML/wiki/RoleAttribute

乐A 2020.03.16

我意识到这是一个老问题,但是根据您的确切要求,另一个可能的考虑是在https://validator.w3.org/上进行验证会生成如下警告:

警告:表单角色对于元素表单是不必要的。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android