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

【问题标题】：aria-* attributes are not valid or misspelledaria-* 属性无效或拼写错误
【发布时间】：2019-08-02 03:05:06
【问题描述】：

我通常在 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-label 似乎是正确的
aria-controls = "..." 似乎包含一个 id 列表，所有这些 id 都存在于 DOM 中（虽然我不确定，如果它们不存在于 DOM 中，可访问性检查是否应该失败并动态添加）

失败的原因是什么？

【问题讨论】：

链接指向 Azure 负载均衡器。可以更新一下吗？
这是我测试的页面的链接。
更新为指向正确的地方

标签： accessibility wai-aria lighthouse

【解决方案1】：

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

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

我承认错误信息本来可以更清楚，例如通过指出aria-role 无效。

【讨论】：

哇！面对手掌。
伟大的收获！很容易错过那个。