什么是 tabindex="-1"?在引导程序中 [英] What's the tabindex="-1" in bootstrap for

问题描述

Bootstrap 3 中的 tabindex 属性有什么用?

尽管他们几乎在所有模态中都使用了它们，但它的文档没有说明任何关于它们的信息.

我只发现了这个关于它的用途，并没有说太多

<块引用>

键盘和辅助技术用户的可访问工具提示

对于使用键盘导航的用户，尤其是辅助技术的用户，您应该只向可聚焦键盘的元素添加工具提示，例如链接、表单控件或任何带有 tabindex=0"的任意元素.属性.

我发现 我无法按 esc 隐藏一个如果 tabindex 属性不是 -1，则为模态.

• 按下 esc 键后模态关闭(带 tabindex)
• 按下 esc 键后模态没有关闭(没有 tabindex)

解决方案

tabindex 属性明确定义页面内可聚焦元素(通常是链接和表单控件)的导航顺序.它还可以用于定义元素是否应该是可聚焦的.

[Both] tabindex=0" 和 tabindex=-1" 具有特殊的含义，并在 HTML 中提供不同的功能.0 值表示该元素应按默认导航顺序放置.这允许本机不可聚焦的元素(例如

、 和

)接收键盘焦点.当然，通常应该为所有交互元素使用链接和表单控件，但这确实允许其他元素可聚焦并触发交互.

tabindex=-1" 值从默认导航流中删除元素(即，用户无法使用 Tab 键访问它)，但它允许它接收编程焦点，这意味着可以通过链接或脚本设置焦点.**这对于不应该被标签化的元素非常有用，但可能需要有重点放在他们身上.

一个很好的例子是模态对话窗口 - 打开时，焦点应设置在对话框上，以便屏幕阅读器开始阅读，键盘开始>在对话框中导航.因为对话框(可能只是一个

元素)在默认情况下不可聚焦，分配它 tabindex=-1" 允许将焦点设置到它呈现时编写脚本.

-1 的值在使用箭头键或其他快捷键的复杂小部件和菜单中也很有用，以确保小部件中只有一个元素可导航使用 Tab 键，但仍允许将焦点设置在小部件内的其他组件上.

来源: http://webaim.org/techniques/keyboard/标签索引

这就是为什么您需要在模态

上使用 tabindex=-1"，以便用户可以访问常用的鼠标和键盘快捷键.希望有所帮助.

What's the tabindex attribute in Bootstrap 3 for?

Its documentation doesn't say anything about them although they use them practically in all modals.

I've only find this regarding its use, which doesn't really say much

Accessible tooltips for keyboard and assistive technology users

For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links, form controls, or any arbitrary element with a tabindex="0" attribute.

And I found out I can't press esc to hide a modal if the tabindex attribute is not -1.

• Modal closing after pressing esc key (with tabindex)
• Modal not closing after pressing esc key (without tabindex)

解决方案

The tabindex attribute explicitly defines the navigation order for focusable elements (typically links and form controls) within a page. It can also be used to define whether elements should be focusable or not.

[Both] tabindex="0" and tabindex="-1" have special meaning and provide distinct functionality in HTML. A value of 0 indicates that the element should be placed in the default navigation order. This allows elements that are not natively focusable (such as <div>, <span>, and <p>) to receive keyboard focus. Of course one should generally use links and form controls for all interactive elements, but this does allow other elements to be focusable and trigger interaction.

A tabindex="-1" value removes the element from the default navigation flow (i.e., a user cannot tab to it), but it allows it to receive programmatic focus, meaning focus can be set to it from a link or with scripting.** This can be very useful for elements that should not be tabbed to, but that may need to have focus set to them.

A good example is a modal dialog window - when opened, focus should be set to the dialog so a screen reader will begin reading and the keyboard will begin navigating within the dialog. Because the dialog (probably just a <div> element) is not focusable by default, assigning it tabindex="-1" allows focus to be set to it with scripting when it is presented.

A value of -1 can also be useful in complex widgets and menus that utilize arrow keys or other shortcut keys to ensure that only one element within the widget is navigable with the tab key, but still allow focus to be set on other components within the widget.

Source: http://webaim.org/techniques/keyboard/tabindex

This is why you need tabindex="-1" on the modal <div>, so users can access common mouse and keyboard shortcuts. Hope that helps.

这篇关于什么是 tabindex="-1"?在引导程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！