從 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"作為項目的屬性。