辅助功能 - 如何在元素上设置自定义选项卡焦点顺序

Posted 2023-03-25

【中文标题】辅助功能 - 如何在元素上设置自定义选项卡焦点顺序

【英文标题】：Accessibility - How to set custom tab focus order on elements

【发布时间】：2022-01-01 07:50:07

【问题描述】：

我的用例是一个传统的表单页面。我的页面在右上角包含几个按钮，后面是表单输入字段。

当使用无鼠标导航和按选项卡时，标准行为会首先显示在浏览器选项卡和浏览器 URL 上，然后按元素顺序进入我的实际网页（右上角的按钮进入表单域）。

但是，似乎更好的可访问性将在最后一个表单字段上按下选项卡直接跳转到页面右上角的“保存”按钮，而不必循环浏览浏览器选项卡，然后再次浏览器 URL。所以本质上，我想“跳过”在特定元素（我的页面上的最后一个可聚焦元素是最后一个表单字段）上按 Tab 键后关注元素的传统顺序，以便它转到我想要的另一个特定元素。有没有办法使用 html/CSS/JS 设置这种行为？

【问题讨论】：

试过标签索引？

tabindex

【参考方案1】：

有两种方法可以解决这个问题。

第一个是tabindex。您可以控制所有元素的顺序，但您必须非常小心。它可以使标签顺序更加混乱。 tabindex 越大，元素在 tab 顺序中的优先级越高。因此，您可以将tabindex='2' 放在所有表单元素上，将tabindex='1' 放在按钮上，而将其余元素留在页面上 不带tabindex。 （多个元素可以有相同的 tabindex 值。浏览器将按它们各自的 DOM 顺序在它们之间切换。）

处理这个问题的第二种方法是使用 DOM 顺序本身，然后使用 CSS 将元素移动到您想要的位置。所以 DOM 可以先有表单元素，然后再有按钮。然后，您可以使用 CSS 将按钮放在右上角。这将是首选方法，因为它不像 tabindex 那样“危险”。