为什么 Foundation 建议在主要内容中添加 tabindex="0"?
Why does Foundation recommend adding a tabindex="0" to main content?
在 Foundation's docs on creating skip links 中,他们建议将 tabindex="0"
添加到表示要跳转到的主要内容的元素中。我有点不明白他们为什么会这么说。据我所知,这会导致一个额外的元素在通过文档切换时获得焦点,即使实际上与该元素没有任何关系。
原因可能是与不支持锚定到 id
的旧版浏览器兼容?还是另有原因?
更新: 应该很快就不会再说上面的了,但那是因为I changed it回复这里的答案:P
这似乎是为了能够快速导航到页面最重要的部分的简单原因。按 tab
时将首先选择此元素,选择将从那里继续,而不是在 DOM.
的顶部
使用锚定 id
s 用于当用户单击内部 link 或需要通过 JS 触发时使用。使用 tabindex="0"
已内置于大多数浏览器中。
通常主要内容会被赋予一个 id
,跳过 link 用于将用户的焦点跳转到主要内容。但是,这种直接的方法 doesn't work in Internet Explorer 9。您需要使用 javascript focus()
将焦点设置到主要内容。并且tabindex=0
用于使一个本身不能接收焦点的元素成为可聚焦的。
您应该将 tabindex
设置为 -1 值,以便元素以编程方式可聚焦但不包含在 Tab 键顺序中(与 0 值相反)。
如果您的锚定位到一个无法聚焦的元素,那么 window 将滚动到该元素,但下一次按下 tab
键将聚焦跳过 link 后的下一个元素按钮。
例如根据 W3C 参见 definition of focusable:
The element's tabindex focus flag is set.
在 Foundation's docs on creating skip links 中,他们建议将 tabindex="0"
添加到表示要跳转到的主要内容的元素中。我有点不明白他们为什么会这么说。据我所知,这会导致一个额外的元素在通过文档切换时获得焦点,即使实际上与该元素没有任何关系。
原因可能是与不支持锚定到 id
的旧版浏览器兼容?还是另有原因?
更新: 应该很快就不会再说上面的了,但那是因为I changed it回复这里的答案:P
这似乎是为了能够快速导航到页面最重要的部分的简单原因。按 tab
时将首先选择此元素,选择将从那里继续,而不是在 DOM.
使用锚定 id
s 用于当用户单击内部 link 或需要通过 JS 触发时使用。使用 tabindex="0"
已内置于大多数浏览器中。
通常主要内容会被赋予一个 id
,跳过 link 用于将用户的焦点跳转到主要内容。但是,这种直接的方法 doesn't work in Internet Explorer 9。您需要使用 javascript focus()
将焦点设置到主要内容。并且tabindex=0
用于使一个本身不能接收焦点的元素成为可聚焦的。
您应该将 tabindex
设置为 -1 值,以便元素以编程方式可聚焦但不包含在 Tab 键顺序中(与 0 值相反)。
如果您的锚定位到一个无法聚焦的元素,那么 window 将滚动到该元素,但下一次按下 tab
键将聚焦跳过 link 后的下一个元素按钮。
例如根据 W3C 参见 definition of focusable:
The element's tabindex focus flag is set.