滑出式侧边栏无障碍适配：aria-controls关联异常排查与修复

问题描述 #

我正在为一款App的滑出式侧边栏做无障碍适配，该侧边栏隐藏时仍保留在DOM中。为确保屏幕阅读器（SR）在侧边栏关闭时不读取其内容，我添加了aria-hidden属性。在为按钮设置aria-controls和aria-expanded属性时，发现Chrome DevTools的Elements>Accessibility面板中，当侧边栏处于aria-hidden="true"状态时，aria-controls无法正确关联到侧边栏；而侧边栏展开时关联正常。这种关联缺失是否存在问题？若存在，该如何修复？

演示代码 #

JavaScript #

const control = document.querySelector("#control")

control.addEventListener('click', () => { 
  const aside = document.querySelector("#sidebar")
  let isSidebarHidden = aside.getAttribute('aria-hidden') === 'true'
  
  aside.setAttribute("aria-hidden", !isSidebarHidden);
  aside.classList.toggle("hidden")
  control.setAttribute("aria-expanded", isSidebarHidden)
  control.innerText = isSidebarHidden ? "close sidebar" : "Open sidebar"
})

CSS #

aside {
  height: 100px;
  background: lightblue;
}

body {
  display: flex;
}

.hidden {
  visibility: hidden;
}

HTML #

<body>
  <aside aria-hidden="false" id="sidebar">
    <div>Here comes the sidebar</div>
  </aside>
  <main>
    <button id="control" aria-controls="sidebar" aria-expanded="true">
      close sidebar
    </button>
  </main>
<body>

问题分析与解决方案 #

关联缺失的影响 #

这种关联缺失确实存在问题：当屏幕阅读器用户聚焦到控制按钮时，部分阅读器（如NVDA、VoiceOver）可能无法通过aria-controls找到对应的侧边栏元素，即便按钮的aria-expanded状态能正确传达侧边栏的展开/折叠状态，也会丢失“控件与目标元素关联”这一关键语义，影响用户对界面结构的理解。

修复方案 #

核心思路是确保控件与目标元素的关联语义在任何状态下都准确传达，具体有两种可行方案：

方案1：动态切换aria-controls属性

当侧边栏关闭时，移除按钮的aria-controls属性；当侧边栏展开时，重新添加该属性，让关联仅在目标元素可交互时存在：

control.addEventListener('click', () => { 
  const aside = document.querySelector("#sidebar")
  let isSidebarHidden = aside.getAttribute('aria-hidden') === 'true'
  
  aside.setAttribute("aria-hidden", !isSidebarHidden);
  aside.classList.toggle("hidden")
  control.setAttribute("aria-expanded", isSidebarHidden)
  
  // 动态切换aria-controls
  if (isSidebarHidden) {
    control.setAttribute("aria-controls", "sidebar");
  } else {
    control.removeAttribute("aria-controls");
  }
  
  control.innerText = isSidebarHidden ? "close sidebar" : "Open sidebar"
})

修改后DevTools中的关联会始终保持正确，屏幕阅读器也能准确识别控件与目标的关联状态。

方案2：替换visibility: hidden为绝对定位偏移隐藏

visibility: hidden会让元素从视觉和无障碍树中双重隐藏（配合aria-hidden="true"时），改用绝对定位将侧边栏移出视口，既能隐藏视觉内容，又能让元素在无障碍树中保留（仅通过aria-hidden="true"阻止读取），这样aria-controls的关联会一直存在：

.hidden {
  position: absolute;
  left: -9999px;
  top: auto;
}

这种方式下，侧边栏仍在DOM中但视觉不可见，aria-hidden="true"阻止屏幕阅读器读取内容，同时aria-controls的关联不受影响，DevTools中会始终显示正确的关联关系。

额外优化建议 #

• 给侧边栏添加合适的role属性，比如role="navigation"（如果是导航类侧边栏），增强语义化。
• 侧边栏展开时，自动将焦点移动到侧边栏内的第一个可交互元素，提升键盘导航体验。

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