简体繁体 English

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

[英]Exclude input element from tab order in IE

原文 2019-10-15 19:19:12 2 1 html/ vue.js/ accessibility

In my vue.js-based Single Page Application I have a checkbox that is not visible.在我基于 vue.js 的单页应用程序中，我有一个不可见的复选框。 I have to set opacity to zero due to UX reasons.由于 UX 原因，我必须将不透明度设置为零。 Unfortunately the input element is still part of the tab order.不幸的是，输入元素仍然是标签顺序的一部分。 To solve this issue I am setting the tabindex to -1 and this works flawlessly in Chrome as well as in Safari, but in IE11 it is still part of the tab order.为了解决这个问题，我将 tabindex 设置为 -1，这在 Chrome 和 Safari 中都能完美运行，但在 IE11 中它仍然是 tab 顺序的一部分。 How I can safely exclude the invisible checkbox from the taborder to realize a fully accessible UI?如何安全地从 taborder 中排除不可见的复选框以实现完全可访问的 UI？

1 个解决方案

Actually this is a bug with IE11 that causes endless frustration (normally with SVG images gaining focus they shouldn't).实际上，这是 IE11 的一个错误，它会导致无尽的挫败感（通常 SVG 图像会获得不应该获得的焦点）。

The answer is to add the attribute focusable="false" to the checkbox.答案是将属性focusable="false"添加到复选框。 It isn't technically part of the spec (think it was an IE only thing) I don't think but it should cause you no issues.它在技术上不是规范的一部分（认为它只是 IE 的东西）我不认为，但它应该不会给你带来任何问题。

I can see the use case for having opacity: 0 if you want to 'fade-in' the checkbox based on a particular setting / scenario, however if that isn't the case then visibility: hidden may be a much better option if you are unable to use display: none .我可以看到 opacity: 0 的用例，如果你想根据特定的设置/场景“淡入”复选框，但是如果不是这样，那么visibility: hidden可能是一个更好的选择，如果你无法使用display: none 。

Quick Reference快速参考

Use display: none if you can.如果可以，请使用display: none 。

If not use visibility: hidden if you can.如果不使用visibility: hidden 。

If not (and you must use opacity: 0 ) then use focusable="false" as an attribute on the item.如果不是（并且您必须使用opacity: 0 ），则使用focusable="false"作为项目的属性。