tabindex 跨浏览器(翻译)

原文Cross-Browser Tabindex Woes

适当运用tabindex这个有用的工具,可许多浏览器处理这个属性不稳定;来挑战这个问题;

tabindex 基础知识

tabindex是html元素的属性,允许你操作元素的tab顺序;一般,在web页面点击tab键将按照可交互元素呈现在文档流的顺序逐一获取焦点。一旦该元素获取焦点,可以通过键盘操作页面:激活链接、点击提交按钮、或给input输入信息

使元素focusable

设置元素属性tabindex="0"可以使它focusable,无论它是不是可交互元素。这个对于完成一个form或者应用组件是相当有用的;但是这样做潜在的风险是:使元素没有正确的WAI-ARIA属性,影响使用屏幕阅读器的人的使用;

连续的 tabindex

比0大的tabindex值,指定元素在页面中的tab顺序。    设置`tabindex="1"` 的元素会在第一次点击tab的时候被focus,继续点击tabindex值更高的元素会被focus,也包括其他键盘事件可focus的元素(tabindex="0",url。。。);如果文档中出线多个相同值的tabindex元素,按照这些元素在document当中的顺序依次;

这种十分有规律的行为在实际场景中并不一定符合你的设想;在特别繁重的动态页面很难确保顺序如你所想的,如果自定义tabsindex,可能不到

从tab队列移除

这个类型的     

各个浏览器处理tabindex的相同方式

测试

发生了什么?