“显示全部”按钮的ARIA-controls属性合法取值及使用问题

报错原因 #

你收到的Lighthouse报错是因为aria-controls的取值必须为页面上真实存在的元素ID，不可为空、不可指向不存在的ID。你之前给显示全部按钮绑定了不存在的对应分组ID，所以触发了规则校验。

两种公认合法的处理方式 #

• 方案1：保留aria-controls，赋值为所有分组的ID，空格分隔
  aria-controls本身支持同时关联多个元素，你只需要把所有类别分组的ID按空格分隔填写到属性中即可，比如你三个分组的ID为cat001、cat002、cat_etc，则属性写法为：

  <button aria-controls="cat001 cat002 cat_etc">显示全部</button>
  

  该写法完全符合WAI-ARIA规范，Lighthouse不会再触发报错，屏幕阅读器也可以正确识别该按钮控制所有分组的显隐状态。
• 方案2：直接移除aria-controls属性
  aria-controls并非按钮的强制必填属性，当按钮的控制逻辑明确、文本标识清晰时（按钮本身明确标注为“显示全部”，同时搭配aria-pressed或aria-expanded属性标识当前全局显隐状态），完全可以不设置该属性，不会存在可访问性缺陷，也不会触发Lighthouse的规则报错。

注意事项 #

如果选择方案1，需要确保所有写入aria-controls的ID都和页面上对应分组的ID完全匹配，无拼写错误、无缺失，否则仍然会触发校验错误。

内容的提问来源于stack exchange，提问作者KnightHawk0811