blocks|key|883862|text|我是inert属性的忠实粉丝。它目前还在草稿中(我听说它可以在Chrome的旗子后面使用)。你可以填充属性|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|883863|本质上，您将inert设置为元素是隐藏的，所有技术都会起到链接不存在的作用。多填充页面上有一个很好的演示，可以更好地说明这个想法。我想这能解决你的问题。|883864|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/GoogleChrome/inert-polyfill|1|https://rawgit.com/GoogleChrome/inert-polyfill/master/demo.html^0|2|5|1D|4|0|0|6|5|1B|5|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

I'm a big fan of the <code>inert</code> attribute. It's currently still in draft (I've heard that it's available in Chrome behind a flag). You can <a href="https://github.com/GoogleChrome/inert-polyfill" rel="nofollow noreferrer">polyfill the attribute</a>

In essence, you'd set <code>inert</code> as the element is hidden and all technologies would act as though the links aren't there. There's a <a href="https://rawgit.com/GoogleChrome/inert-polyfill/master/demo.html" rel="nofollow noreferrer">really good demo</a> on the polyfill page that will better illustrate the idea. I think it would solve your issue.

blocks|key|1728659|text|aria-focusable="false"只适用于屏幕阅读器，而不是很好的支持，这就是为什么您为此而挣扎的原因。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1728660|你有几个强有力的选择：-|1728661|在display:+none上使用item__modal+modal，然后当您将modal--active覆盖它添加到display:+block+(或其他什么，flex等)中时，父元素上的display:+none是健壮的，并且总是使其子元素不可聚焦。这将始终有效，是最好的选择。|ordered-list-item|1728662|在每个链接上设置一个tabindex="-1“(遗憾的是，您不能将它添加到父链接中，因为它仍然可以在某些屏幕阅读器上被覆盖)，并在模式打开时将其更改为tabindex="0"。|1728663|这将在所有浏览器上一致工作。|1728664|这不仅仅是选项卡键|1728665|上述选项之所以是唯一健壮的选项，是因为屏幕阅读器用户很少使用tab键导航。|1728666|例如，NVDA用户将使用1-6按标题级别(H1+-+H6)导航，K通过链接导航以获得页面的感觉。|1728667|最后选择(不建议)|1728668|您可以拦截选项卡键并管理焦点，但出于同样的原因，您需要将aria-hidden="true"添加到每个链接中(并在模式处于活动状态时将其更改为aria-hidden="false"+)。|1728669|如果你真的需要的话，最后一个选项至少可以让你选择使用opacity:+0隐藏物品等等。|1728670|entityMap^0|0|M|0|0|1|D|H|H|14|D|1N|E|2N|D|0|A|C|23|C|0|0|0|U|3|0|W|1|0|0|S|I|1Z|J|0|Q|A|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|K|3|L|5|J|7|1H|8|@$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1M|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1N|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1U|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1V|8|@$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|20|8|@$9|21|A|22|B|C]]|D|@]|E|$]]|$1|10|3|-4|5|6|7|23|8|@]|D|@]|E|$]]]|11|$]]

<code>aria-focusable="false"</code> is only for screen readers and not well supported, which is why you are struggling with that.

You have a couple of robust options:-

<ol>
<li>Use <code>display: none</code> on the <code>item__modal modal</code> and then when you add the <code>modal--active</code> override it to <code>display: block</code> (or whatever, flex etc.) - <code>display: none</code> on a parent element is robust and will always make it's children unfocusable. This will always work and is the best option.</li>
<li>Set a <code>tabindex="-1</code>" on each link (sadly you can't add it to the parent as it can still get overridden on some screen readers) and change it to <code>tabindex="0"</code> when the modal opens.

<pre><code>&lt;aside class="item__modal modal modal--active" id="modal-interview-1"&gt;
 &lt;a href="#" tabindex="-1"&gt;Sample 1&lt;/a&gt;
 &lt;a href="#" tabindex="-1"&gt;Sample 2&lt;/a&gt;
 &lt;a href="#" tabindex="-1"&gt;Sample 3&lt;/a&gt;
 &lt;a href="#" tabindex="-1"&gt;Sample 4&lt;/a&gt;
 &lt;a href="#" tabindex="-1"&gt;Sample 5&lt;/a&gt;
&lt;/aside&gt;
</code></pre></li>
</ol>

This will work consistently across all browsers.

<h2>It isn't just the tab key</h2>

The reason the above are the only robust options is because screen reader users rarely navigate by the <code>tab</code> key. 

For example a NVDA user will use 1-6 to navigate by heading levels (H1 - H6) and <code>K</code> to navigate by links to get a feel for the page.

<h2>final option (not recommended)</h2>

You could intercept the tab key presses and manage focus, but you would need to then add <code>aria-hidden="true"</code> to each of the links for the same reason (and change it to <code>aria-hidden="false"</code> when the modal is active.

This last option does at least afford you the option of using <code>opacity: 0</code> to hide the items etc. if you really need to.

General accessibility question here. I'm looking for general approach, but will also note that this is in a React app so statefulness is a consideration.

Take the following code example of a list of actions, which open corresponding modals. Ideally, you would be able to tab through the list of actions in sequence - but because the modals have links inside, the tabbing experience is not ideal. Basically, you hit 'action 1' and then tab 6 more times before hitting 'action 2' due to the 5 links contained in the modal.

<pre><code>&lt;li class="list__item"&gt;
 &lt;!-- modal trigger --&gt;
 &lt;a href="#" class="modal"&gt;Action 1&lt;/a&gt;

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

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

The question on approach what is the best way to handle hiding the anchor tags from the DOM, or at least from tabbing and screen reading, when a tab is disabled? I've tried adding <code>disabled</code> to the anchors, and adding an <code>aria-focusable="false"</code> to the modal when it's inactive... but it's not giving me the desired effect of skipping the links.

Thanks for your help with this issue.

How to tab past closed modal links? #a11y

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

这里的一般无障碍问题。我正在寻找一般的方法，但也会注意到，这是在一个反应应用程序，所以状态是一个考虑。下面是一个操作列表的代码示例，它打开相应的模式。理想情况下，您可以按顺序浏览操作列表--但是由于modals内部有链接，标签体验并不理想。基本上，你点击‘动作1’，然后再标签6次，然后点击‘行动2’，因为5个链接包含在...

问如何通过关闭的模式链接标签？#a11y
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何通过关闭的模式链接标签？#a11yEN