如何通过关闭的模式链接标签？#a11y
如何通过关闭的模式链接标签？#a11y
提问于 2020-01-03 16:55:29
这里的一般无障碍问题。我正在寻找一般的方法，但也会注意到，这是在一个反应应用程序，所以状态是一个考虑。
下面是一个操作列表的代码示例，它打开相应的模式。理想情况下，您可以按顺序浏览操作列表--但是由于modals内部有链接，标签体验并不理想。基本上，你点击‘动作1’，然后再标签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的最好方法是什么，或者至少避免选项卡和屏幕读取？我尝试过将disabled添加到锚中，并在不活动的情况下将aria-focusable="false"添加到模式中.但这并没有给我想要的效果跳过链接。
谢谢你在这个问题上的帮助。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-03 17:21:51
aria-focusable="false"只适用于屏幕阅读器，而不是很好的支持，这就是为什么您为此而挣扎的原因。
你有几个强有力的选择：-
- 在
display: none上使用item__modal modal，然后当您将modal--active覆盖它添加到display: block(或其他什么，flex等)中时，父元素上的display: none是健壮的，并且总是使其子元素不可聚焦。这将始终有效，是最好的选择。 - 在每个链接上设置一个
tabindex="-1“(遗憾的是，您不能将它添加到父链接中，因为它仍然可以在某些屏幕阅读器上被覆盖)，并在模式打开时将其更改为tabindex="0"。
这将在所有浏览器上一致工作。
这不仅仅是选项卡键
上述选项之所以是唯一健壮的选项，是因为屏幕阅读器用户很少使用tab键导航。
例如，NVDA用户将使用1-6按标题级别(H1 - H6)导航，K通过链接导航以获得页面的感觉。
最后选择(不建议)
您可以拦截选项卡键并管理焦点，但出于同样的原因，您需要将aria-hidden="true"添加到每个链接中(并在模式处于活动状态时将其更改为aria-hidden="false" )。
如果你真的需要的话，最后一个选项至少可以让你选择使用opacity: 0隐藏物品等等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59582380
复制相关文章
相似问题
腾讯云开发者
