开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在具有可滚动内容的模式对话框中(就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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

无障碍网页设计（A11Y）：提升用户体验，践行社会责任

无障碍网页设计（A11Y）不仅是提升用户体验的关键举措，更是我们作为开发者、设计师和内容创作者，积极践行社会责任的重要体现。...在这篇文章中，将探讨无障碍网页设计的核心价值，分享一些实用的设计原则与技巧，并通过代码示例来展示如何将这些理念融入到实际项目中。一、无障碍设计的价值观与社会意义 1....因此，致力于无障碍设计实际上是在提升所有用户的整体使用感受，而非仅限于特定群体。二、无障碍设计实践指南与代码示例 1....使用tabindex属性管理焦点顺序，避免使用tabindex大于0的值，除非有特殊需求。图片 4....支持ARIA属性当HTML元素的语义不足以描述复杂界面时，可以使用ARIA（Accessible Rich Internet Applications）属性增强可访问性。

2451 0

现代图片性能优化及体验优化指南 - 图片资源的容错及可访问性处理

图片的可访问性处理可访问性（A11Y），在我们的网站中，属于非常重要的一环，但是大部分同学都容易忽视它。...在一些重交互、重逻辑的网站中，我们需要考虑用户的使用习惯、使用场景，从高可访问性的角度考虑，譬如假设用户没有鼠标，仅仅使用键盘，能否顺畅的使用我们的网站？...第二点比较有意思，在 A11Y 中，其实有一套 WAI-ARIA 标准。WAI-ARIA 是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。...简单来说，它提供了一些属性，增强标签的语义及行为：可以使用 tabindex 属性控制元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航可以使用 role 属性，来标识元素的语义及作用，譬如使用...图片的异常处理当图片链接挂了，加载失败了，我们比较好的处理方式应该是怎么样呢？处理的方式有很多种。在张鑫旭老师的这篇文章中 -- 图片加载失败后CSS样式处理最佳实践有一个不错的实践。

7211 0

前端优秀实践不完全指南

页面展示就整个页面的展示，页面内容的呈现而言，有一些小细节是需要我们注意的。...接下来还需要考虑，当图片链接挂了，应该如何处理。处理的方式有很多种。最好的处理方式，是我最近在张鑫旭老师的这篇文章中 -- 图片加载失败后CSS样式处理最佳实践[6] 看到的。...光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。让滚动操作结束后，元素停止在适合的位置。看个简单示例： ?...Web 字体 font-family 再探秘[19] 可访问性（A11Y）可访问性，在我们的网站中，属于非常重要的一环，但是大部分前端（其实应该是设计、前端、产品）同学都会忽视它。...简单来说，它提供了一些属性，增强标签的语义及行为：可以使用 tabindex 属性控制元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航可以使用 role 属性，来标识元素的语义及作用，譬如使用

8692 0

前端优秀实践不完全指南

页面展示就整个页面的展示，页面内容的呈现而言，有一些小细节是需要我们注意的。...处理的方式有很多种。最好的处理方式，是我最近在张鑫旭老师的这篇文章中 -- 图片加载失败后CSS样式处理最佳实践看到的。...光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。让滚动操作结束后，元素停止在适合的位置。看个简单示例： ?...Web 字体 font-family 再探秘可访问性（A11Y）可访问性，在我们的网站中，属于非常重要的一环，但是大部分前端（其实应该是设计、前端、产品）同学都会忽视它。...简单来说，它提供了一些属性，增强标签的语义及行为：可以使用 tabindex 属性控制元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航可以使用 role 属性，来标识元素的语义及作用，譬如使用

9852 0

对话框、模态框和弹出框看起来很相似，它们有何不同？

但就这些组件而言，解释的差异就可能会导致糟糕的用户体验。...（注意：在实际网站上，滚动背景仍然有效，但这是不应该的）并不是每个人都喜欢模态——作为一个 UI 概念，它们非常具有破坏性。只有当必要时，才应该使用该模式。如果你想问用户“您确定要删除所有这些吗？”...Popovers 可以具有背景，用以遮挡它之外的内容。但这并不代表 popovers 就具有模态特性了。...在Details/summary中，Scott O'Hara 建议这样做更为一致: 如果你的的目标是在不同的浏览器中创建绝对一致的披露组件行为，即确保所有的都暴露为展开/收缩按钮，那么你最好使用...定义弹出窗口您正在构建一个可切换提示符，用于在内容中显示复杂单词的定义。当定义图标被点击时，它会打开。您的用户可能想滚动到其他地方、阅读其他内容或执行其他操作。最好保持这种模式为非模态。

3.7K0 0

【译】W3C WAI-ARIA最佳实践 -- 控件

手风琴一般被用来减少页面滚动，当在单个页面中呈现很多内容模块时。通过以下术语来理解手风琴：手风琴标题：呈现内容模块的标签或缩略图，同时也用来展开内容，在某些实现中，也用来隐藏内容模块。...示例模态对话框例子键盘交互在以下的描述中，术语 tabbable element 是指 tabindex 值大于等于0的元素。注意：强烈不建议使用大于0的值。...NOTE 当对话框被打开时，根据内容的性质和大小放置焦点。在任何情况下，焦点都应该移动到对话框中的一个元素上。除非建议某个操作的情况，焦点应该被初始设置在第一个可聚焦的元素上。...如果对话框里面的内容非常多，聚焦第一个交互元素会导致起始内容滚出视窗，建议给对话框顶部的静态元素添加 tabindex="-1" 如果对话框内容是一个不容易逆转的流程的最后一步，例如删除数据或者完成资金交易...通常这种情况下使用警告对话框。如果对话框内容仅包含提供额外信息或是继续处理的交互，则建议将焦点设置为最有可能使用的元素上，例如 "OK" 或 "Continue" 按钮。

4.5K3 0

写前端代码时请多为残障人士思考之『Accessibility』

视力障碍可能会导致人们在日常日常活动（例如驾车，阅读，社交和步行）中遇到困难。这部分的人通常会使用一些辅助的功能来阅读屏幕，例如放大镜，屏幕缩放以及屏幕阅读器。...听力障碍的人可能听力水平低或甚至完全听不见声音，听力受损的人可能会使用ATs(请参阅针对患有听力、语音、言语或语言障碍的人的辅助设备)，不过在Web中并没有专门的ATs可以使用。...在MDN[5]上有为了认知障碍者总结的开发守则： •用多种方式展示内容，例如通过文本，语音或视频；•编写易于理解的内容，例如少用方言或者颜文字；•重要的内容要细心写；•尽量减少干扰，例如一些没什么用的功能与广告...•使所有功能都能通过键盘来操作。•为用户提供足够的时间用以阅读和使用内容。•不要设计会导致癫痫发作的内容。•提供帮助用户导航、查找内容、并确定其位置的方法。...在本文，我们讨论下前端里的WAI-ARIA规范，以下是规范里的三个主要特征：角色（Roles） WAI-ARIA角色是使用role属性在元素上设置的，类似于role属性[role]中定义的role属性

1.6K2 0

AngularDart Material Design 选择顶

可以手动（在模板中）或通过SelectionOptions实例指定选项。可以通过模板或通过检查选择模型将选项标记为已选择。...对于可访问性，应该包含在具有role =“listbox”和aria-multiselectable的元素中，除非将role设置为“option”以外的其他内容。...tabindex String 组件的选项卡索引。如果tabbable为true且disabled为false，则使用该值。...如果没有为空组定义emptyLabel，它将不会出现在列表中。通过SelectionOptions实现的ObserveAware接口支持异步建议。材料选择具有固定的最大高度和自动溢出。...slide String 弹出缩放的方向。有效值为x，y或null。 trackLayoutChanges bool 设置建议列表是否随输入框滚动。

6K2 0

PDF 文档编辑神器 Adobe Acrobat-最牛逼的PDF编辑器

页面显示在浏览文件时，可以选择不同的页面显示，或利用缩放菜单，可对显示内容进行缩放，以达到更好的浏览效果。...单页视图窗口只显示一页启用滚动窗口的页面可连续滚动双页视图窗口并排显示两页双页滚动窗口并排显示两页,连续滚动可点击图片放大查看阅读模式与全屏模式在阅读模式下，可以隐藏所有工具栏和任务窗格，以最大化屏幕上的查看区域...另外利用快捷键阅读模式（Ctrl+H）/全屏模式（Ctrl+L）也可快速切换或返回不同显示模式。...可点击图片放大查看各创建 PDF 方法的选择建议以上各方法可根据不同的情况进行选择使用。这里主要给两点选择建议。...如果有大量文档需要转成独立的 PDF 利用方法③，可批量处理。

2.4K2 0

Web 用户体验设计提升实践

页面呈现就整个页面的展示和页面内容的呈现而言，不同的展示方式，所得到的效果截然不同。这其中有非常多值得注意的细节。...光看定义有点难理解，简单而言，这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。让滚动操作结束后，元素停止在适合的位置。...路由菜单导航： [ ] 表格中的一些按钮跳转： [ ] 2.6 表单交互优化输入及选择于用户而言，是一项高交互成本的操作。下面提供了一些小的建议来减少用户输入出错、提升用户体验。...可访问性（A11Y）可访问性（accessibility，也被称为 “A11Y”）在网站中属于非常重要的一环，但是大部分前端（其实应该是设计、前端、产品）同学都忽视了它。...简单来说，WAI-ARIA 提供了一些属性，用于增强标签的语义及行为：可以使用 tabindex 属性控制元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航可以使用 role 属性，来标识元素的语义及作用

1.2K2 0

关于信息无障碍我们能做些什么

有些看不太清楚字的人会使用屏幕放大器来阅读文字，有些什么都看不见的人会使用盲文显示器来阅读文字，有些色盲患者会使用一些高对比模式来获得更好地体验，一些听力不太好的人在看视频的时候会选择带有字幕的视频.....强健性我们网站或者产品的内容是否能被多种User Agent使用？使用屏幕阅读器的用户可以正常读出来我们想表达的内容吗？使用IE的用户是不是压根就无法访问我们的网站呢？...，其实它是浏览器默认的Focus的样式，代表着这个元素默认是focusable的HTML默认的focusable元素，会自动插入到Tab键顺序中，并且内置了键盘事件处理，默认支持keyboard功能，基本的都可以在...还记得你的处理方式吗？...有着同样效果的 Chrome 插件 ax ，WAVE，只是提示error 的方式有些区别，基本都是类似的，还有可以自动化检查A11y问题的工具， pa11y同样可以集成到CI，其实工具有很多，可能只差一个开始

8912 0

现代图片性能优化及体验优化指南

：可以看到滚动条在向下滚动在不断的抽搐，这是由于下面不在可视区域内的内容，一开始是没有被渲染的，在每次滚动的过程中，才逐渐渲染，以此来提升性能。...async: 异步解码图像，加快显示其他内容。 auto: 默认模式，表示不偏好解码模式。由浏览器决定哪种方式更适合用户。...图片的可访问性处理可访问性（A11Y），在我们的网站中，属于非常重要的一环，但是大部分同学都容易忽视它。...第二点比较有意思，在 A11Y 中，其实有一套 WAI-ARIA 标准。WAI-ARIA 是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。...图片的异常处理当图片链接挂了，加载失败了，我们比较好的处理方式应该是怎么样呢？处理的方式有很多种。在张鑫旭老师的这篇文章中 -- 图片加载失败后CSS样式处理最佳实践有一个不错的实践。

1.5K3 0

停止滥用div! HTML语义化介绍

然而，它有些严重的问题：可访问性 - 许多a11y tools非常智能，会尽力解析页面结构，以帮助用户按照页面制作者的意图来引导用户，并为用户提供简单的跳转链接来指引他们到自己关心的页面部分。...如果每个人都有标准化的方法来标记web文档中常见结构，那么在不熟悉代码库的情况下，都可以很容易的浏览HTML文件并快速处理它应该展示的内容。如果只有一个这样的标准...... 我已经看过（并且使用过）这种模式很久了，以这种方式构造文档非常有意义，既可以读取HTML，又可以更加简单地在CSS中设置页面样式。...简而言之，如果要在目录中列出文档的一部分，请使用。如果没有，请使用或其它元素。内容指标很好，我们已经得到了一个坚固的页面结构。...，那这比原始例子的可读性高100倍，而且对于搜索引擎优化和可访问性目的而言，其效率将提高100倍。这些绝不是HTML中唯一的语义元素。

9804 0

IntelliJ IDEA 2019.3 这回真的要飞起来了，新特性抢先看！

为此他们推出了平滑滚动（Smooth scrolling）功能，让用户在使用鼠标滚轮查看内容时拥有更流畅的滚动体验。...关于平滑滚动，最令人印象深刻的莫过于在微软在 Edge 浏览器上提供的平滑滚动体验，不知道 IDEA 实现的效果如何，欢迎有志之士发回使用反馈 : ) ?...不过录制的 GIF 不能很好体现出“平滑滚动”的效果，可访问此链接进行观看。...在此前的版本中，当我们在全局搜索中使用文件掩码（file mask）进行搜索时，搜索结果的文件扩展名会被隐藏。如果搜索结果中存在多个具有相同名称但文件扩展名不同的文件，则可能会造成混淆。...改进对 Maven 的支持在 2019.3 版本中，IntelliJ IDEA 将能够自动配置打开、导入或创建 Maven 项目的设置，无需通过模态对话框（Modal Dialog）来手动配置设置。

1.5K2 0

【译】停止滥用div! HTML语义化介绍

然而，它有些严重的问题：可访问性 - 许多a11y tools非常智能，会尽力解析页面结构，以帮助用户按照页面制作者的意图来引导用户，并为用户提供简单的跳转链接来指引他们到自己关心的页面部分。...如果每个人都有标准化的方法来标记web文档中常见结构，那么在不熟悉代码库的情况下，都可以很容易的浏览HTML文件并快速处理它应该展示的内容。如果只有一个这样的标准...... 复制代码我已经看过（并且使用过）这种模式很久了，以这种方式构造文档非常有意义，既可以读取HTML，又可以更加简单地在CSS中设置页面样式。...简而言之，如果要在目录中列出文档的一部分，请使用。如果没有，请使用或其它元素。内容指标很好，我们已经得到了一个坚固的页面结构。...，那这比原始例子的可读性高100倍，而且对于搜索引擎优化和可访问性目的而言，其效率将提高100倍。这些绝不是HTML中唯一的语义元素。

1.8K2 0

C#学习笔记—— 常用控件说明及其属性、事件

必须隐藏或关闭模式窗体（通常是响应某个用户操作），然后才能对另一窗体进行输入。有模式显示的窗体通常用做应用程序中的对话框。...如果将MultiLine属性设置为true，则最多可输入32KB 的文本。Text属性可以在设计时使用【属性】窗口设置，也可以在运行时用代码设置或者通过用户输入来设置。...一般不使用 Button 控件的方法。Button 控件也具有许多如 Text、ForeColor 等的常规属性，此处不再介绍，只介绍该控件有特色的属性。以后介绍的控件也采用同样的方法来处理。...PictureBox控件的使用 13、PictureBox 控件的使用 PictureBox 控件又称图片框，常用于图形设计和图像处理应用程序，在该控件中可以加载的图像文件格式有：位图文件（.Bmp...需要注意的是：该对话框并不负责具体的打印任务，要想在应用程序中控制打印内容必须使用 PrintDocument 控件。关于这两个控件的详细使用方法读者可参阅相关资料或VisualC#的帮助文件。

9.7K2 0

【译】W3C WAI-ARIA最佳实践 -- 表单

复选框具有可访问标签，最好的方式是使用 aria-labelledby 关联可见标签: 将可见的内容放在角色为 checkbox 元素里面。...目标资源可以是外部的的，也可以是本地的，例如，当前页面内、页面外、应用。 NOTE 作者们强烈建议使用原生语言的链接元素，例如一个具有 href 属性的HTML A 元素。...菜单中的每个项目的 tabindex 设置为-1, 除了菜单栏中的第一个项目的 tabindex 设置为 0。...（见对话模式）如果激活按钮会关闭一个对话框，焦点通常会返回到打开该对话框的按钮上，除非该对话框执行的功能会遵从上下文的逻辑，去到一个不同的元素。...WAI-ARIA角色，状态和属性按钮具有的角色 button。 button 有一个可访问的标签默认情况下，可访问名称是从按钮元素内部的所有内容计算得来。

8.3K3 0

IntelliJ IDEA 2019.3这回真的要飞起来了，新特性抢先看！

为此他们推出了平滑滚动（Smooth scrolling）功能，让用户在使用鼠标滚轮查看内容时拥有更流畅的滚动体验。...关于平滑滚动，最令人印象深刻的莫过于在微软在 Edge 浏览器上提供的平滑滚动体验，不知道 IDEA 实现的效果如何，欢迎有志之士发回使用反馈 : ) ?...意图动作（Intention action）不会从建议列表中消失这是对现有功能的继续打磨，此次更新引入了一项更有用的改进 —— 即使我们选择了某个意图动作然后取消对话框，IDE 也会在对话框中显示意图操作...在此前的版本中，当我们在全局搜索中使用文件掩码（file mask）进行搜索时，搜索结果的文件扩展名会被隐藏。如果搜索结果中存在多个具有相同名称但文件扩展名不同的文件，则可能会造成混淆。...改进对 Maven 的支持在 2019.3 版本中，IntelliJ IDEA 将能够自动配置打开、导入或创建 Maven 项目的设置，无需通过模态对话框（Modal Dialog）来手动配置设置。

2.6K3 0

IntelliJ IDEA 2019.3这回真的要飞起来了，新特性抢先看！

为此他们推出了平滑滚动（Smooth scrolling）功能，让用户在使用鼠标滚轮查看内容时拥有更流畅的滚动体验。...关于平滑滚动，最令人印象深刻的莫过于在微软在 Edge 浏览器上提供的平滑滚动体验，不知道 IDEA 实现的效果如何，欢迎有志之士发回使用反馈 : ) 启用“Smooth scrolling”选项后，相比于启用前...不过录制的 GIF 不能很好体现出“平滑滚动”的效果，可访问此链接进行观看动态效果（https://youtu.be/MoVS6HOdeew）意图动作（Intention action）不会从建议列表中消失...在此前的版本中，当我们在全局搜索中使用文件掩码（file mask）进行搜索时，搜索结果的文件扩展名会被隐藏。如果搜索结果中存在多个具有相同名称但文件扩展名不同的文件，则可能会造成混淆。...改进对 Maven 的支持在 2019.3 版本中，IntelliJ IDEA 将能够自动配置打开、导入或创建 Maven 项目的设置，无需通过模态对话框（Modal Dialog）来手动配置设置。

1.3K6 0

2020 年 Web 开发展望

不仅以一种基本的方式编码（显而易见），而且以最流行的、用途最广泛的编程语言之一处于领先地位。它遍及 Web、桌面、移动设备、服务器甚至物联网（IoT），并且在开源中的主导地位还会增加。...就我个人而言，我认为 Svelte 将很难满足如此高的期望。希望我错了，因为它创建 UI 的方法非常新颖！我说的是它在额外的“编译步骤”中预处理代码，来提供更小、更高效的客户端包。...但它也可以在浏览器之外作为可移植模块使用。这很容易说明 WASM 将会继续向前发展。谁知道呢——也许几年后，我们将能够在浏览器中玩 AAA 级的游戏！...不同的品牌并不会都严格遵循 Google 制定的准则，而是会采用某些设计规范，并使用它们来形成自己的“独特外观”并在竞争中脱颖而出。...可访问性除了视觉内容外，可访问性（a11y）的重要性可能还会增加。Web 越来越多地被各种各样的人所占据，为所有人提供良好的体验应该是所有设计师的主要目标。

7291 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭