从 IE 中的 Tab 键顺序中排除输入元素

Question

在我基于 vue.js 的单页应用程序中，我有一个不可见的复选框。由于 UX 原因，我必须将不透明度设置为零。不幸的是，输入元素仍然是标签顺序的一部分。为了解决这个问题，我将 tabindex 设置为 -1，这在 Chrome 和 Safari 中都能完美运行，但在 IE11 中它仍然是 tab 顺序的一部分。如何安全地从 taborder 中排除不可见的复选框以实现完全可访问的 UI？

Answer 1

实际上，这是 IE11 的一个错误，它会导致无尽的挫败感（通常 SVG 图像不应该获得焦点）。

答案是将属性focusable="false" 添加到复选框中。从技术上讲，它不是规范的一部分（认为它只是 IE 的东西）我不认为，但它应该不会给你带来任何问题。

如果您想根据特定设置/场景“淡入”复选框，我可以看到 opacity: 0 的用例，但是如果不是这种情况，那么visibility: hidden 可能会更好如果您无法使用display: none，请选择此选项。

快速参考

如果可以，请使用display: none。

如果不可以，请使用visibility: hidden。

如果不是（并且您必须使用opacity: 0），则使用focusable="false" 作为项目的属性。