如何制表过去关闭的模态链接？ #a11y

Question

此处为一般辅助功能问题。我正在寻找通用方法，但也会注意到这是在 React 应用程序中，因此需要考虑有状态性。

以下面的代码示例为例，操作列表会打开相应的模态框。理想情况下，您可以按顺序在操作列表中切换 - 但由于模态框内部有链接，因此切换体验并不理想。基本上，由于模态中包含 5 个链接，您点击 'action 1' 然后再点击 6 次 Tab 键然后点击 'action 2'。

<li class="list__item">
   <!-- modal trigger -->
   <a href="#" class="modal">Action 1</a>

   <!-- modal containing links -->
   <aside class="item__modal modal" id="modal-interview-1">
      <a href="#>Sample 1</a>
      <a href="#>Sample 2</a>
      <a href="#>Sample 3</a>
      <a href="#>Sample 4</a>
      <a href="#>Sample 5</a>
   </aside>
</li>
<li class="list__item">
   <!-- modal trigger -->
   <a href="#" class="modal">Action 2</a>

   <!-- modal containing links -->
   <aside class="item__modal modal" id="modal-interview-2">
      <a href="#>Sample 1</a>
      <a href="#>Sample 2</a>
      <a href="#>Sample 3</a>
      <a href="#>Sample 4</a>
      <a href="#>Sample 5</a>
   </aside>
</li>

关于方法的问题，在禁用选项卡时，从 DOM 或至少从制表符和屏幕阅读中隐藏锚标记的最佳方法是什么？我已经尝试将 disabled 添加到锚点，并在它处于非活动状态时将 aria-focusable="false" 添加到模态...但它没有给我跳过链接的预期效果。

感谢您对这个问题的帮助。

Answer 1

我非常喜欢 inert 属性。它目前仍处于草稿阶段（我听说它在 Chrome 中可以在旗帜后面找到）。你可以polyfill the attribute

本质上，您会设置 inert，因为该元素是隐藏的，所有技术都会表现得好像链接不存在一样。 polyfill 页面上有一个 really good demo 可以更好地说明这个想法。我认为它会解决您的问题。

Answer 2

aria-focusable="false" 仅适用于 readers 屏幕并且没有得到很好的支持，这就是为什么你为此苦苦挣扎。

您有几个可靠的选择：-

在 item__modal modal 上使用 display: none，然后在添加 modal--active 时将其覆盖到 display: block（或其他任何内容，flex 等） - parent 元素上的 display: none 是健壮的，并且总是使它 children 无法聚焦。这将始终有效，并且是最佳选择。

在每个 link 上设置一个 tabindex="-1"（遗憾的是你不能将它添加到 parent，因为它仍然可以在某些屏幕上被覆盖 readers) 并在模式打开时将其更改为 tabindex="0"。

<aside class="item__modal modal modal--active" id="modal-interview-1">
   <a href="#" tabindex="-1">Sample 1</a>
   <a href="#" tabindex="-1">Sample 2</a>
   <a href="#" tabindex="-1">Sample 3</a>
   <a href="#" tabindex="-1">Sample 4</a>
   <a href="#" tabindex="-1">Sample 5</a>
</aside>

这将在所有浏览器中一致地工作。

不只是 Tab 键

以上是唯一可靠选项的原因是屏幕 reader 用户很少通过 tab 键导航。

例如，NVDA 用户将使用 1-6 按标题级别 (H1 - H6) 导航，并使用 K 按 links 导航以感受页面。

最终选择（不推荐）

您可以拦截 Tab 键按下并管理焦点，但出于同样的原因，您随后需要将 aria-hidden="true" 添加到每个 link（并将其更改为 aria-hidden="false" 当模式处于活动状态时。

最后一个选项至少可以让您选择使用 opacity: 0 隐藏项目等，如果您真的需要的话。

如何制表过去关闭的模态链接？ #a11y

How to tab past closed modal links? #a11y

html

javascript

accessibility

wai-aria

reactjs

不只是 Tab 键

最终选择（不推荐）