为什么 Tabindex 不能与 Firefox 一起使用？答案

【问题标题】：Why Won't Tabindex Work with Firefox?为什么 Tabindex 不能与 Firefox 一起使用？
【发布时间】：2011-04-20 07:10:35
【问题描述】：

我正在尝试使用 tabindex 文本输入属性来允许用户在此页面上的字段之间切换：https://seatgeek.com/login/。这适用于所有浏览器（甚至在 IE 中！），除了 Firefox。我使用的是 Firefox 3.6.10。

【问题讨论】：

嗯，感谢数据点 re:OS。我在 Windows 7 上。你不能通过光标的位置来判断焦点在哪里吗？
这对我有用，没有问题。还有 3.6.10，还有 Windows 7。
我很高兴至少有一位开发人员关心喜欢使用键盘的人。今天的大多数程序员似乎认为鼠标是计算机的唯一接口。
@Tergiver：我不敢苟同。这个网站根本不关心那些必须使用键盘的人！最重要的是outline: none;，还有几十个规则，其中只定义了 :hover 而不是等效的 :focus 和 onmouseover 事件相同的东西，没有 onfocus
@Tergiver ：它不能正常工作，除了两个主要的表单元素将通过两次第一次按下 Tab 键（对不起我的英语）。然后表格的其余部分尽可能难以访问，并且（对我而言）不是真正符合人体工程学的。

【解决方案1】：

这里有类似的东西，我发现这可以在 Firefox/Mac 上解决它

解决方案不是在 Firefox 中，而是在 Mac OS X 偏好设置中。

Apple 菜单 > 系统偏好设置 > 键盘和鼠标 > 键盘快捷键

和在“全键盘访问”下选择“所有控件”。

对于较新的 macOS 版本：

Apple > System Preferences > Keyboard > Shortcuts > Accessibility > All Controls（在窗格底部）

对于更新的 macOS 版本：

Apple > System Preferences > Keyboard > Shortcuts > “使用键盘导航在控件之间移动焦点”（在窗格底部）

之后您可能需要重新启动 Firefox

【讨论】：

一直在搜索以找出为什么我的网站无法通过 Firefox 进行键盘访问。在这里，我以为我是白痴。非常感谢，就像宝石一样工作。
我冒昧地将页面的相关部分（即解决方案）添加到此答案中，以防链接失效。现在，如果我们只能让@Jack7890 回到这里并接受这个......
假设 OP 在 Mac 上，这个解决方案很棒。
仅供参考，最新版本的 OS X 中的当前路径是 Apple > System Preferences > Keyboard > 快捷方式 > 辅助功能 > 所有控件（在窗格底部）
额外提示：如果未启用“全键盘访问”的“所有控件”选项，您可以通过按 Opt+Tab 让 macOS 切换所有控件。

【解决方案2】：

您好，这可能不是一个完美的答案，但它是一种解决方法

最新的 Mozilla firefox (81.0.1) 您实际上可以使用选项卡导航到它，但如果有任何文本，它就不会读取它。所以你可以做的是标记/跨越文本并使用带有 id 的 aria-labbeledby，它将类似于下面的示例。

<div tabindex="0" aria-labelledby="xyz123">
 <label id="xyz123">
  There were errors processing the question
 </label>
</div>

【讨论】：

【解决方案3】：

由于篇幅较长，我决定将其发布为“答案”而不是“评论”。不过，这两者的定义有点边缘。

它适用于我，在 Ubuntu 10.04 上使用 Firefox 3.6.10。话虽如此，似乎没有应用 :focus 样式（或者，更可能的是，他们已经完成了通常的 outline: none; 以删除 :focus 指示），这很烦人。

你的状态栏显示了吗？如果没有，您将无法知道焦点在哪里。以防万一：

View -> ✓ Status Bar

如果做不到这一点，我不确定为什么它对你不起作用。

【讨论】：