语义 HTML 元素的 DOM 位置提供的默认 Tab 键顺序为
但有时您可能需要修改 Tab 键顺序。正在移动
是理想状态，但可能不可行。在这些情况下
可以使用 tabindex HTML 属性明确设置元素的制表符
排名。
tabindex可应用于任何元素，但不一定要应用于
适用于所有元素，且采用一系列整数值。包含
tabindex，您可以为可聚焦页面元素指定明确的顺序，
在 Tab 键顺序中插入原本无法聚焦的元素，并移除相应元素
从 Tab 顺序开始。例如：
tabindex="0"：在自然 Tab 键顺序中插入元素。该元素可以
可通过按 Tab 键聚焦于元素，而可通过调用
其 focus() 方法。
tabindex="-1"：从自然 Tab 键顺序中移除某个元素，但该元素
仍可通过调用 focus() 方法来获得焦点。
tabindex="5"：任何大于 0 的 tabindex 均将该元素置于前面
自然 Tab 键顺序。如果多个元素的 tabindex 大于
大于 0，则制表符顺序从大于零的最小值开始
并向上运行。
对于标题、图片或文章等非输入元素来说尤其如此
标题。如果可能的话，最好排列源代码，以便 DOM 序列提供
逻辑 Tab 顺序。如果您确实使用了 tabindex，请将其限制为使用自定义互动类
按钮、标签页、下拉菜单和文本字段等控件；也就是说，
用户可能希望提供输入的内容。
请仅向互动式内容添加 tabindex。即使内容非常重要（例如关键图片），屏幕阅读器用户无需
添加焦点。
在页面级别管理焦点
有时，必须使用 tabindex 才能提供顺畅的用户体验。例如：
。
所有内容同时可见。这可能意味着导航链接
无需刷新网页即可更改可见内容。
在这种情况下，请确定所选内容区域，并为其指定 tabindex
-1 并调用其 focus 方法。这样可确保相应内容不会出现在
自然 Tab 键顺序。这种技术称为“管理焦点”，可保留
使用户感知的情境与网站的视觉内容保持同步。
管理组件中的焦点
在某些情况下，您还必须在控件级别管理焦点，例如使用 自定义组件
例如，select 元素可以获得基本焦点，但一次
可以使用箭头键显示其他可选选项
如果您构建自定义 select 元素，请务必复制该元素，
因此键盘用户仍然可以与您的控件互动。
知道要实现哪些键盘行为可能很困难。通过 无障碍富互联网应用 (ARIA) 创作 做法 该指南列出了组件类型及其支持的键盘操作类型。
或许，您要处理的自定义元素 类似于一组单选按钮，但采用了独特的外观 行为
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
要确定他们需要哪种键盘支持，请查看 ARIA 创作做法 指南。 第 2 部分包含一系列设计模式，包括 电台特征表 群组、 与新元素最匹配的现有组件。
键盘上应该使用的常见键盘行为之一 向上/向下/向左/向右箭头键。要将此行为添加到新的 组件时，我们采用一种名为流动 tabindex 的技术。
流动 tabindex 通过将除以下项之外的所有子项的 tabindex 设置为 -1 来发挥作用
一个是当前有效的项
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
该组件使用键盘事件监听器来确定
用户按压；发生这种情况时，它会设置之前聚焦的子项的
tabindex 设置为 -1，将获得焦点的子项的 tabindex 设置为 0，并调用
对它应用“聚焦”方法。
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
当用户到达最后一个（或第一个，具体取决于他们所在的方向）时 移动焦点）子项时，焦点会环回到第一个（或最后一个） 子节点。
请尝试以下示例。在 通过开发者工具观察 tabindex 从一个单选按钮到下一单选按钮的流动情况。
模态窗口和键盘陷阱
最好避免手动管理焦点，因为这可能会导致复杂情况。 例如，尝试管理焦点和拍摄内容的自动补全 widget 但系统会阻止用户在完成该标签页之前离开该标签页。 这称为键盘陷阱，会让用户感到非常沮丧。
WCAG 第 2.1.2 节规定不得锁定或 被困在特定的网页元素上。 用户应当能够仅使用 键盘。
模态规则除外。不过，您仍应避免使用
tabindex。借助 inert，您可以
确保用户不会意外地与某个元素互动（这是有意为之
键盘陷阱）。使用 <dialog>
元素（默认为处于休眠状态）在阻止时为用户创建模态
点击和标签页外这样，用户就可以专注于
必选。