Angular 8中如何设置组件表单的tabindex焦点切换顺序

不需要调整现有DOM结构、不需要手动调用focus()方法，仅通过合理配置tabindex属性就能完全实现你要求的焦点切换和读屏顺序，具体方案如下：

实现原理 #

原生Tab导航的优先级遵循固定规则：

• 设置了正整数tabindex的元素，会按数值从小到大的顺序优先被Tab选中，优先级高于所有默认tabindex=0的原生交互元素
• 不要给非交互类容器（比如组件宿主标签、header/footer外层标签）设置正整数tabindex，否则容器本身会抢占焦点，导致读屏器无法直接读取内部表单内容，额外增加操作成本

具体配置方法 #

给四个区块的交互元素分配互不交叉的tabindex数值区间，严格匹配你要求的导航顺序：

• 第一优先级（首个聚焦）：header内所有可交互元素（logo链接、导航按钮等），tabindex从1开始按交互顺序依次递增
• 第二优先级（第二个聚焦）：right-component内所有表单控件（输入框、选择器、提交按钮等），tabindex接在header元素的最大tabindex值之后按交互顺序依次递增
• 第三优先级（第三个聚焦）：left-component内所有表单控件，tabindex接在right-component元素的最大tabindex值之后按交互顺序依次递增
• 第四优先级（最后聚焦）：footer内所有可交互元素（备案链接、关于页面入口等），tabindex接在left-component元素的最大tabindex值之后按交互顺序依次递增

主组件模板不需要调整原有DOM顺序，保留原有结构即可，参考代码框架：

<!-- header区域：内部第一个交互元素设置tabindex="1"，其余交互元素tabindex按顺序+1 -->
<header></header>
<!-- left-component区域：内部所有交互元素的tabindex值，要大于right-component内所有元素的tabindex值 -->
<left-component></left-component>
<!-- right-component区域：内部第一个交互元素的tabindex值，要大于header内所有元素的tabindex值，其余交互元素按顺序+1 -->
<right-component></right-component>
<!-- footer区域：内部第一个交互元素的tabindex值，要大于left-component内所有元素的tabindex值，其余交互元素按顺序+1 -->
<footer></footer>

屏幕阅读器适配补充 #

给四个区块添加无障碍标识，保证读屏器在焦点进入时能准确识别区块范围：

• 给每个区块的根元素添加role="region"属性
• 给每个区块配置对应的aria-label属性，比如header设置aria-label="站点头部导航"、right-component设置aria-label="右侧表单区域"、left-component设置aria-label="左侧表单区域"、footer设置aria-label="站点底部信息"

避坑提醒：不要图省事给所有外层容器设置统一的正整数tabindex，这种做法会让焦点落在无交互意义的容器上，不仅需要多按一次Tab才能进入内部表单，还会导致读屏器读取内容错乱，是无障碍开发中的典型反模式。

内容的提问来源于stack exchange，提问作者santhosh patrudu