javascript - 如何标签过去关闭的模式链接？ #a11y

Question

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

采用以下操作列表代码示例，这些操作将打开相应的模式。理想情况下，您将能够按顺序浏览操作列表 - 但由于模态内部有链接，因此选项卡体验并不理想。基本上，您会先点击“操作 1”，然后再按 Tab 键 6 次，然后再点击“操作 2”，因为模态中包含 5 个链接。

<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 或至少从选项卡和屏幕阅读中隐藏 anchor 标记的最佳方法是什么？我尝试将 disabled 添加到 anchor ，并在模态处于非事件状态时将 aria-focusable="false" 添加到模态......但它没有给我想要的跳过链接的效果。

感谢您解决此问题的帮助。

Answer 1

aria-focusable="false"仅适用于屏幕阅读器并且没有得到很好的支持，这就是您为此苦苦挣扎的原因。

您有几个强大的选择:-

1. 使用display: none关于item__modal modal然后当您添加modal--active时将其覆盖为 display: block (或其他，弯曲等)- display: none父元素上的 是健壮的，并且总是会使其子元素无法聚焦。这始终有效，并且是最好的选择。

2. 设置tabindex="-1 “在每个链接上(遗憾的是，您无法将其添加到父链接，因为它仍然可以在某些屏幕阅读器上被覆盖)并在模式打开时将其更改为 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 键

上述选项是唯一可靠的选项，因为屏幕阅读器用户很少通过 tab 进行导航。 key 。

例如，NVDA 用户将使用 1-6 按标题级别 (H1 - H6) 和 K 进行导航。通过链接导航以了解页面。

最终选项(不推荐)

您可以拦截 Tab 键按下并管理焦点，但您需要添加 aria-hidden="true"出于相同的原因，链接到每个链接(当模式处于事件状态时，将其更改为 aria-hidden="false"。

最后一个选项至少为您提供了使用 opacity: 0 的选项如果您确实需要的话，可以隐藏项目等。