aria-* 属性的替代方法答案

【问题标题】：Alternative approach to the aria-* attributesaria-* 属性的替代方法
【发布时间】：2021-02-22 03:00:59
【问题描述】：

假设我有以下 HTML 标记：

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href

我不想使用 aria-expanded="false" aria-controls="collapseExample" 之类的属性，但希望可以访问此锚标记，我该如何实现这一点？避免aria-* 属性。

【问题讨论】：

您将不得不提供一个更完整的示例来了解您要构建的内容，目前上面的 HTML 本身没有意义，因为您有 href role="button" 等.这一切都相互冲突。您是否想发布一个完整示例，说明上述内容试图实现的内容（如果需要和样式，可以使用基本 JS 功能的示例）以及它正在扩展的相关部分（看起来就是一个扩展部分？ ?，但很难说），以便我们可以帮助您正确构建它。但立即<button> 看起来更合适。
我猜 WAI-ARIA 的作者会说避免使用 aria-* 属性不是一个好习惯...

标签： html wai-aria wcag2.0

【解决方案1】：

没有原生 HTML 方式来指示可展开/可折叠元素，因此您必须使用 ARIA。

first rule of ARIA 表示如果有本地 HTML 方式来实现您的结果，那么请使用 HTML。如果没有，那么 ARIA 是下一个最好的选择。 ARIA 本身并不坏，但把它当作盐一样对待。少量的 ARIA 会增加风味，但过多的 ARIA 会破坏应用程序。

在这种情况下，aria-expanded 是表示可展开部分的最佳方式。

如果您真的不想要 ARIA 属性，您可以使用 visually hidden text 将元素描述为“展开”或“折叠”。我会不推荐这种方法，因为aria-expanded 具有更好的内置辅助功能支持。当您更改aria-expanded 的值时，屏幕阅读器将自动宣布“免费”状态更改。你不必做任何事情。如果您有视觉上隐藏的文本，则您将负责在状态更改时更改隐藏的文本并且您必须为屏幕阅读器发布通知（通常使用aria-live）。

不使用aria-expanded 的工作量很大。

关于aria-controls，不幸的是，该属性对您没有多大帮助。使用它在语义上是正确的，但大多数屏幕阅读器并没有真正用它做任何事情。为了好玩，看看这个 - https://heydonworks.com/article/aria-controls-is-poop/

【讨论】：

【解决方案2】：

如果您使用带有 href 的原生锚标记，它应该已经可以访问（屏幕阅读器会将其解释为链接，并且应该可以使用辅助技术点击）。

您可能希望标记锚标记以赋予它更用户友好的名称/描述，您可以使用aria-label 来完成此操作。或者，您可以使用一个aria-labelledby 标记来指向一个HTML 元素的ID，该元素的内部HTML 提供了锚标记的标签，尽管听起来aria-label 更适合您的用例。在此处查看 aria-label 文档：https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

如果您尝试构建可访问的软件，在很多情况下使用 aria 标签绝对是最佳实践，尽管您需要在正确的场景中使用正确的 aria 标签。例如，aria-expanded 应该与可展开/可折叠的菜单按钮一起使用，而不是像锚标记这样的东西。

【讨论】：

锚元素不是form labelable 所以，不，你不能使用label 元素来标记锚。
注意！我的答案已更新。谢谢！