“显示全部”按钮的 ARIA-controls 属性答案

【问题标题】：ARIA-controls property for a 'show all' button“显示全部”按钮的 ARIA-controls 属性
【发布时间】：2023-12-23 18:29:01
【问题描述】：

背景故事：

我有一长串按类别分组的项目。每个类别都有一个按钮控件，还有一个用于“全部显示”。

视觉示例：

[按钮全部显示] [按钮 001] [按钮 002] [按钮等]

我正在使用 Google Lighthouse 进行测试，但我一直在尝试

[aria-*] 属性没有有效值

这显然是因为没有“显示所有”元素组，而是按钮仅显示所有可用的分组元素。

问题：

“显示全部”按钮上的“ARIA-controls”属性可接受的值是多少？还是我把它留给这个元素？

注意：

所有单独的类别按钮和组都很好，它们的 ARIA 属性都正确设置为组 ID，Lighthouse 没有错误。只有“显示全部”的按钮才是问题

【问题讨论】：

aria-controls 的值应该是它所控制的元素的唯一id。
如果没有看到任何代码，这里很难提出任何建议。
这可能是相关的*.com/questions/53729511/…
在aria-controls 上花费过多精力之前，您可能需要阅读heydonworks.com/article/aria-controls-is-poop。

【解决方案1】：

阅读 cmets 中的材料后，我得出的结论是，我无法为 ARIA 控件设置任何值，该值既是有效的 ID，也对使用 ARIA 的访问者有用。

我可以设置所有元素的所有 ID，这在技术上是有效的，但这对访问者来说在功能上没有用处。

最好的选择是确保按钮本身是解释性的，然后将 ARIA 留给这个单一的按钮元素。

Google Lighthouse 测试证实，在此元素上没有 ARIA 控件总比设置不正确要好。

【讨论】：