aria- *属性无效或拼写错误

Question

我一般在Chrome审核中使用Lighthouse测试网站的辅助功能。

我偶然发现了这个警告：

aria- *属性无效或拼写错误。

这是失败的元素：

<a class="issue-title muted-link" href="#" data-bi-name="issue-expander" aria-role="button" aria-expanded="false" aria-controls="issue-26732-body issue-26732-comments issue-26732-reactions issue-26732-reactions-menu" aria-label="Toggle issue">

这是任何人都感兴趣的链接。 Azure load balancer Feedback Section

对我来说，似乎aria- *名称和值是有效的。

• aria-role =“button”似乎是正确的。
• aria-expanded =“false”似乎是正确的。
• 咏叹调标签似乎是正确的
• aria-controls =“...”似乎包含一个id列表，所有这些id都存在于DOM中（虽然我不确定，如果它们在DOM中不存在并且动态添加，则可访问性检查会失败）

这可能是失败的原因是什么？

Answer 1

正确的拼写不是aria-role而是role。另请参阅HTML5.2中的ARIA Role Attribute。

aria-expanded，aria-controls和aria-label是正确的。

我承认错误信息可能更清晰，例如通过指出aria-role无效。