网站无障碍疑问:页面文本内容是否需要支持Tab键访问?
Tab键页面访问规则及可聚焦元素规范
Tab键运行核心规则
Tab键的默认行为是遍历页面的可聚焦交互元素,遍历顺序完全由元素的tabindex属性和DOM结构顺序决定:
tabindex="0":元素使用默认聚焦优先级,按照DOM节点的先后顺序被Tab键遍历,所有原生可交互元素默认都自带该属性tabindex="正整数(1~32767)":元素优先级高于所有tabindex="0"的元素,数值越小遍历顺序越靠前,不推荐随意使用正数值tabindex,会打乱绝大多数用户的默认浏览预期tabindex="-1":元素无法通过Tab键触发聚焦,但可以通过JS的focus()方法手动触发聚焦,适合需要临时唤起焦点的场景
普通文本无法通过Tab访问是完全符合浏览器默认行为的,静态文本不属于需要加入Tab遍历序列的元素范畴,读屏用户可通过方向键逐行/逐段浏览的快捷操作读取静态文本内容,无需额外将静态文本加入Tab遍历列表。
需要支持Tab键访问的元素范围
所有用户可交互、需要触发对应操作的元素都必须支持Tab访问,包括但不限于:
- 带
href属性的<a>链接元素 - 所有表单控件:输入框、单选框、复选框、下拉选择器、提交按钮、重置按钮等
- 各类按钮元素:原生按钮、自定义图标按钮、悬浮操作按钮等
- 自定义交互组件的触发器:标签页切换按钮、折叠面板展开/收起按钮、轮播图控制按钮、模态框关闭按钮、拖拽手柄等
- 媒体播放器的可操作控件:播放/暂停按钮、进度条、音量调节控件等
注意:如果是使用非原生标签实现的自定义交互组件(比如用
<div>封装的按钮),必须手动设置tabindex="0"让它可被Tab聚焦,同时还要绑定对应的键盘操作事件(回车、空格触发点击逻辑),才能符合无障碍规范要求。
内容的提问来源于stack exchange,提问作者Parth Parikh
相关产品推荐
相关产品推荐

