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

您看到的大多数角色都定义为ARIA 1.0的一部分，然后又合并到HTML5中。一些新的HTML5元素（对话框，主要元素等）甚至基于原始的ARIA角色。

除了您的本机语义元素之外，还有两个主要原因要使用角色。

原因＃1。 在没有合适的宿主语言元素或出于各种原因而使用语义上不太合适的元素的情况下覆盖角色。

在此示例中，使用了链接，即使所得到的功能比导航链接更像按钮。

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

屏幕阅读器会将其作为按钮（而不是链接）来听，您可以使用CSS属性选择器来避免class-itis和div-itis。

*[role="button"] {  }

原因2。 备份本机元素的角色，以支持实现了ARIA角色但尚未实现本机元素的角色的浏览器。

例如，多年来，浏览器一直支持“主要”角色，但这是HTML5的相对较新的功能，因此许多浏览器尚不支持的语义

<main>

<main role="main">…</main>

从技术上讲，这是多余的，但对某些用户有帮助，并且不会损害任何用户。几年后，这种技术可能会变得不必要。

您还写道：

我看到有人组成了自己的。是否允许或正确使用role属性？

除非不包括实际角色，否则这是对属性的有效使用。浏览器将在令牌列表中应用第一个公认的角色。

<span role="foo link note bar">...</a>

在列表中，只有

link

note