滑出侧边栏的辅助功能

问题描述 投票：0回答：1

我目前专注于为应用程序制作的侧边栏的可访问性。它的行为类似于“滑出”，这意味着即使侧边栏不可见，内容仍然位于 dom 内。为了确保 SR 在关闭时不会穿过侧边栏，我添加了一个 aria-hidden。现在，在向按钮添加 

aria-controls
和 
aria-expanded
时，我在 chrome DevTools 中注意到了这一点 (
Elements > Accessibility
)：

Controls attribute empty

由于侧边栏是 aria 隐藏的，因此 

controls
属性未正确链接（这是有道理的）

按照这个逻辑，侧边栏打开时链接很好

enter image description here

这是出现问题的迹象吗？这个缺失的环节让我很担心。 如果是这样，我应该如何解决这个问题？

这是我所拥有的演示（请原谅糟糕的代码，它仅用于演示目的）

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"
})
aside {
  height: 100px;
  background: lightblue;
}

body {
  display: flex;
}

.hidden {
  visibility: hidden;
}
<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>

html accessibility wai-aria
1个回答
0
投票

如果该元素对任何人都不可见，则应使用 display:none 而不是 aria-hidden。

当元素必须“在屏幕上可见”，但“对屏幕阅读器和其他辅助工具隐藏”时，应使用属性 aria-hidden。 如果该元素对每个人来说都是隐藏的，无论上下文如何，是否有屏幕阅读器，那么您应该使用CSS display:none 或visibility:hidden。 CSS 显示：无确保所有内容都对每个人正确隐藏，无论使用/导航/操作网站/应用程序的方法如何。它的行为就像该元素不在 DOM 中一样，尤其意味着没有一个子元素可以获得焦点（请参阅下面的更多解释） 与 ARIA 的第一条规则配对，display:none 在质量上比 aria-hidden 更好（规则说：不要使用 ARIA，除非你真的需要/没有更好的选择）。 当使用 aria-hidden 而不是 display:none 时，该元素对屏幕阅读器和其他辅助工具是隐藏的，但技术上在屏幕上仍然可见并正常运行。 这特别意味着可聚焦的子项在使用选项卡导航时继续获得焦点。 对于屏幕阅读器来说，这产生了一个矛盾：聚焦的元素必须被宣布，但由于 aria-hidden 而不应该被宣布。此外，可以通过选项卡访问可聚焦的子项，但不能通过使用箭头键的虚拟/文档光标导航来访问。这会导致最终用户完全无法理解 UI。

    对于仅使用键盘的用户，如果某些东西必须在离开屏幕时获得焦点，是否会产生奇怪的视觉效果，或者根本看不到任何东西并且用户不知道焦点在哪里。
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.