在具有可滚动内容的模式对话框中(就a11y而言)，建议使用哪种方式来处理tabindex？
在具有可滚动内容的模式对话框中，建议使用自定义的键盘导航来处理tabindex，以提高可访问性（a11y）。
自定义的键盘导航可以通过以下步骤实现：
- 确保对话框中的所有可交互元素都具有正确的tabindex属性，以确保它们可以通过键盘进行导航。tabindex属性定义了元素在键盘导航中的顺序。
- 监听对话框的键盘事件，例如keydown或keyup事件。
- 当用户按下Tab键时，检查当前焦点元素是否是对话框中的最后一个可交互元素。如果是最后一个元素，则将焦点移动到对话框的第一个可交互元素上，以实现循环导航。
- 当用户按下Shift + Tab键时，检查当前焦点元素是否是对话框中的第一个可交互元素。如果是第一个元素，则将焦点移动到对话框的最后一个可交互元素上，以实现循环导航。
通过自定义的键盘导航，可以确保在具有可滚动内容的模式对话框中，用户可以方便地使用键盘进行导航，而无需依赖默认的tabindex顺序。这样可以提高可访问性，并提供更好的用户体验。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云无障碍云服务：https://cloud.tencent.com/product/a11y
- 腾讯云Web应用防火墙（WAF）：https://cloud.tencent.com/product/waf
- 腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
相关·内容
我使用库micromodal.js来处理我的(可访问的)模式对话框的功能。在阅读了有关a11y最佳实践的建议后，我了解到模式应该获得一个tabindex="-1"，以便在模式对话框中“捕获”跳格用户(或屏幕阅读器)。 我使用它的一个模态有
浏览 28提问于2020-11-24得票数 1
回答已采纳
6回答
我使用的是CKEditor版本3.3.1，也尝试了最新的Version4.3，但也面临着同样的问题。现在的问题是，每当我试图将CKEDITOR加载到位于jQuery对话框中的Textarea，CKEditor就会正确加载，但是当我尝试创建一个超级链接时，它会打开link框，但是Link (输入字段、下拉列表等供参考
请看附在屏幕上的画面。请指导我，如何解决这个问题。
浏览 11提问于2014-04-30得票数 7
回答已采纳
3回答
你知道为什么NVDA在切换html中的文本时会读取可点击的单词吗?示例：NVDA将读取clickable testing
浏览 0提问于2016-10-19得票数 4
2回答
“回顶”链接可访问性
、、、
我在一个网页上工作，用户必须滚动很多。<a class="btn-primary" href="#top"><svg focusable="false"><use xlink:href="
浏览 4提问于2022-08-16得票数 0
1回答
如何正确设计带有操作的列表项
、、、、
这可能是一个基于意见的答案，而不是固定的答案，但我认为问这个问题并从更有经验的开发人员那里获得意见并不是坏事。我在我的应用程序回收器视图中实现，回收器视图中的每个项目都应该有一些操作，例如
删除，提醒，旋转，更改图标和其他一些。目前，我通过滑动操作和上下文操作模式实现了删除和更改图标逻辑(单击带有删除按钮的app bar更改为“新”应用程序栏)。使用弹出菜单(项目上的三个点，并打开带有操作的小菜
浏览 2提问于2020-10-22得票数 0
回答已采纳
明天我将介绍我选择进程内消息队列实现的理由，但我无法清楚地表达我的理由。我的联合设计师建议我们实现一个简单的异步队列，只使用一个基本的作业列表和一个互斥锁来控制访问，我建议在嵌入式模式下使用ActiveMQ。就我个人而言，ActiveMQ给我留下了非常深刻的印象，我想用一些好的、坚实的论据<e
浏览 5提问于2009-04-17得票数 4
回答已采纳
2回答
下面是一个非常简单的页面： </div> </div></body>我希望对话框真正表现为模态此外，对话框中的输入字段应该集中在打开上。
这是不可能的。焦点是在其他地方
浏览 1提问于2014-05-23得票数 0
回答已采纳
3回答
我正在开发一个新的网站，该网站目前被配置为全高(即100%可用浏览器窗口)应用程序。在布局方面，它是这样的- 。在操作上，这将是一个半内部数据输入应用程序。几乎所有页面都是数据输入表单或摘要页面
就我个人而言，我认为这是一个非常漂亮的应用程序。然而，其他一些开发人员正在将这种设计与<e
浏览 0提问于2011-12-30得票数 2
回答已采纳
此元素的内容是有效的XML，通常符合不同的XSD，但就我们的目的而言，它是任意有效的XML。如果数据被传递为“原始”(这是客户端希望发送的方式)，则SomeXmlElement在反序列化后为null。用CDATA包装(嵌套cdata ugh)
xs:架构中</em
浏览 1提问于2015-07-29得票数 1
回答已采纳
1回答
我正在开发基于react的移动屏幕阅读器应用程序。用例是，对于包含菜单项的对话框，我必须保留一个按钮来关闭对话框，该按钮将位于对话框的顶部。我必须将它的tabIndex设置为0才能使其可访问，这会导致消除按钮成为第一个可聚焦的项目。
期望的是，在屏幕阅读器将焦点放在第一个菜单项上之后，应该可以访问解除按钮。如何解决这个问题？
浏览 1提问于2019-12-31得票数 0
3回答
我已经写了一个网站，它使用jQuery来显示模式弹出窗口。它基本上覆盖了整个屏幕的可视区域，然后在覆盖图的顶部显示包含实际弹出窗口的DIV。这个项目的其中一个要求与可访问性有关。我的模式容器被包装在一个div中，如下所示：
<div id="modalcontainer" tabindex="0" class="popup&
浏览 62提问于2012-03-28得票数 23
回答已采纳
被认为是网站的良好实践吗？使用模式窗口让我担心的一件事是，它非常像一个弹出窗口，它可能会让用户感到沮丧，或者因为它具有侵入性而导致用户简单地关闭它。你知道有什么关于用户偏好和使用率的研究吗？除了在JavaScript关闭时让模式窗口链接加载新页面中的内容之外，还有什么可访问性问题吗？您是否喜欢使用模式窗口的网站
浏览 48提问于2008-10-15得票数 18
回答已采纳
1回答
这是一个与/媒体7.2.X中设置媒体样式:如何在媒体7.1.2？相关的问题。📷📷
是否有方法将图像包装在到媒体/fid页面的链接中？
浏览 0提问于2012-11-27得票数 7
回答已采纳
我知道我能做的：
优点:也许是最快的方法优点:有效，可能比选项2要好一点，因为你直接从孩子开始。缺点:仍在迭代元素
(我想到的解决方案)因为有一个固定<e
浏览 0提问于2013-03-15得票数 0
回答已采纳
1回答
我知道Bootstrap不鼓励重叠的情态词。我很快就黑了一个网站来帮助解决整个冠状病毒的问题，所以我关注的是速度，而不是所有的东西都是完美的。因此，今天有人指出了一个错误。我现在的问题是，在重叠模态的情况下，在第一个模态之上打开的第二个模态会导致第一个模态的内容保持不可滚动，即使第二个重叠模式被关闭。以下是一个实时网站：
单击以跟随模式<
浏览 4提问于2020-04-04得票数 0
回答已采纳
3回答
定位模态窗口
、、、
我有一个网页，有一个很长的产品清单。在每个产品旁边都有一个查看产品详细信息的链接。详细信息显示在模态窗口中。这样做的目的是让你在facebook上看照片时能体验到同样的行为：
如果模态窗口的高度大于用户可以向下滚动的视口高度(滚动条现在正朝着模态窗口，而不是background)when中的页面工作)，则模态窗口被关闭，用户在产品列表中的位置与打
浏览 5提问于2011-05-29得票数 4
回答已采纳
我发现当对话框打开时，焦点并不像描述的那样完全“陷阱”。他们说当用户按tab键时：
当焦点放在对话框中的最后一个可聚焦元素上时，将焦点移动到对话框中的第一个可聚焦元素。但是，对话框元素的MDN示例允许用户“退出”模式并输入浏览器框架。在我的例子中，使用铬后，确认按钮按下标签将焦点“查看网站信
浏览 0提问于2020-11-03得票数 3
回答已采纳
我有一个具有RadWindow (本质上是一个ChildWindow)的功能性MVVM模式SL应用程序，我想在我的视图中删除使用其ShowDialog显示窗口的代码隐藏。该按钮既有使用MVVMLight RelayCommand处理设置状态的ViewModel命令，也有视图中的事件处理程序。
最终的解决方案/模式将重用20+次，因此比代码隐藏更好
浏览 1提问于2011-06-29得票数 1
回答已采纳
我使用wxNotebook来表示应用程序中的两个选项卡。在第一个选项卡中，我有一个wxScrolledWindow，它从工作线程接收数据并显示数据。问题是，当数据从工作线程接收并显示在第一个选项卡上(就wxButtons而言)时，按钮是不可滚动的。但是当我切换到第二个选项卡，然后再次切换回tab1时，按钮就可以滚动了。我已经附上了我的情况的截图。
浏览 7提问于2021-07-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
