【无障碍】tabindex

简介

tabindex是全局属性：用户操作tab键的顺序
——HTML标签元素都可以用的属性，比如说id、class等属性都是HTML的全局属性。
tabindex属性是一个与键盘访问行为息息相关的属性，或者说是用户体验息息相关的属性
场景：鼠标坏了/投屏的键盘操作
作用：管理键盘焦点，决定元素能否被选中

交互元素/可访问元素：常见的a、button、input：隐式可聚焦元素、内置键盘事件处理
https://allyjs.io/data-tables/focusable.html

document.activeElement 找到当前获得焦点的元素

css修改渲染顺序之后会不会影响tabindex顺序——还是会按照dom元素顺序

使用值

tabindex显示设置值：

1、负数：被忽略，-1和-9999的效果一致
-1的时候才能focus

如果不希望让可聚焦元素失去tab键获得焦点的话，不应该显式的设置tabindex的值为-1；反之，如果希望让可聚焦元素失去tab键获得焦点，只需要显式的设置tabindex的值为-1。
——最适用的场景是：dialog模态框

• ——不让聚焦？？？因为是div不能交互？？？——需要将焦点转移到用户操作之外更新的内容时

2、正数：放在自然的tab前面，从小到大排序。最大值：32767
显式的给DOM元素设置tabindex大于0是一个极坏的做法。
——更应该用页面布局解决
tab键聚焦元素的顺序是由DOM中元素的顺序决定的，而不是依赖视觉上的布局来决定

3、0:为了让非聚焦元素（比如div、span等）也能通过tab键获得焦点

部分CSS属性（改变文档流的CSS属性）会在渲染后页面效果上看上去tab键的混乱，但事实他还是依赖于DOM源的顺序进行切换
——flex布局之后还是按照order顺序来的

autofocus 可以让元素自动获得焦点
blur、focus事件会前后触发