Exclude input element from tab order in IE

Question

In my vue.js-based Single Page Application I have a checkbox that is not visible. I have to set opacity to zero due to UX reasons. 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. How I can safely exclude the invisible checkbox from the taborder to realize a fully accessible UI?

Answer 1

Actually this is a bug with IE11 that causes endless frustration (normally with SVG images gaining focus they shouldn't).

The answer is to add the attribute focusable="false" to the checkbox. 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.

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 .

Quick Reference

Use display: none if you can.

If not use visibility: hidden if you can.

If not (and you must use opacity: 0 ) then use focusable="false" as an attribute on the item.