我一直在某些人的工作中看到角色属性。我也使用它，但是我不确定它的效果。
例如：
<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属性？
有什么想法吗？
您看到的大多数角色都定义为ARIA 1.0的一部分，然后通过支持规范（例如HTML-AAM）合并到HTML中。一些新的HTML5元素（对话框，主要元素等）甚至基于原始的ARIA角色。
http://www.w3.org/TR/wai-aria/
除了您的本机语义元素之外，还有其他几个使用角色的主要原因。
原因＃1。在没有合适的宿主语言元素或出于各种原因而使用语义上不太合适的元素的情况下覆盖角色。
在此示例中，使用了链接，即使所得到的功能比导航链接更像按钮。
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->
屏幕阅读器用户将通过按钮（而不是链接）听到它，并且您可以使用CSS属性选择器来避免class-itis和div-itis。
[role="button"] {
/* style these as buttons w/o relying on a .button class */
}
[7年后更新：删除了*选择器以使一些评论者满意，因为在2020年不需要在属性选择器上使用通用选择器的旧浏览器怪癖。]
原因2。备份本机元素的角色，以支持实现了ARIA角色但尚未实现本机元素的角色的浏览器。
例如，多年以来，浏览器一直支持“主要”角色，但这是HTML5的相对较新的功能，因此许多浏览器尚不支持的语义<main>。
<main role="main">…</main>
从技术上讲，这是多余的，但对某些用户有帮助，并且不会损害任何用户。几年后，这种技术对于主要设备将可能变得不必要。
原因＃3。7年后（2020年）更新：至少有一位评论者指出，这对于自定义元素非常有用，并且正在进行一些规范工作来定义Web组件的默认可访问性角色。即使/曾经将API标准化，也可能需要覆盖组件的默认角色。
注意/回复
您还写道：
我看到有人组成了自己的。是否允许或正确使用role属性？
除非未包含实际角色，否则允许使用该属性。浏览器将在令牌列表中应用第一个公认的角色。
<span role="foo link note bar">...</a>
在列表中，只有link和note是有效角色，因此链接角色将被应用在平台可访问性API中，因为它首先出现。如果您使用自定义角色，请确保它们不与ARIA或您使用的宿主语言（HTML，SVG，MathML等）中定义的任何角色冲突。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句