这里的一般可访问性问题。我正在寻找通用方法，但也会注意到这是在 React 应用程序中，因此有状态是一个考虑因素。
以下面的操作列表的代码示例为例，这些操作将打开相应的模态。理想情况下，您将能够按顺序按 Tab 键浏览操作列表 - 但由于模态内部有链接，因此 Tab 键体验并不理想。基本上，由于模态中包含 5 个链接，您点击"操作 1"，然后在点击"操作 2"之前再按 6 次
。<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"......但它并没有给我跳过链接的预期效果。
感谢您对此问题的帮助。
aria-focusable="false"仅适用于屏幕阅读器，并且没有得到很好的支持，这就是您为此苦苦挣扎的原因。
您有几个强大的选择：-
在
item__modal modal上使用display: none，然后在添加modal--active时将其覆盖为display: block(或其他什么，flex等( - 父元素上的display: none是健壮的，并且总是会使其子元素无法聚焦。这将始终有效，并且是最佳选择。在每个链接上设置一个
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键进行导航。
例如，NVDA用户将使用1-6按标题级别(H1 - H6(导航，K按链接导航以获得页面的感觉。
最后一个选项(不推荐(
您可以截获 Tab 键按下并管理焦点，但出于相同的原因，您需要向每个链接添加aria-hidden="true"(并在模式处于活动状态时将其更改为aria-hidden="false"。
如果您确实需要，最后一个选项至少为您提供了使用opacity: 0隐藏项目等的选项。
我是inert属性的忠实粉丝。它目前仍处于草稿阶段(我听说它在 Chrome 后面的标志后面可用(。您可以对属性进行填充
从本质上讲，您将inert设置为元素是隐藏的，并且所有技术都将表现得好像链接不存在一样。polyfill 页面上有一个非常好的演示，可以更好地说明这个想法。我认为这会解决您的问题。