Remove Overflow Content from Tab Order

From Level Access Web Labs
Jump to navigation Jump to search

Level Access

Extra tab stop for otherwise non-focusable containers

Only on Firefox a container with the CSS property overflow-x or overflow-y set to hidden will gain focusability if that container actually has overflow (and therefore truncated) content. The effect is that an otherwise ordinary span or div can get the functional equivalent of tabindex="0" added. This phantom tabindex is not visible in the Inspector. Steve Faulkner has argued that this is actually a correct behavior that allows keyboard-only users to navigate content that has been truncated by a container:

Short note on improving usability of scrollable regions

Because Firefox is unique in this treatment of overflowing content clients it can cause confusion and unexpected extra tab stops for a non-obvious reason. To make Firefox behave the same as all other browsers (or at least Chrome, Safari and IE) add tabindex="-1" to the container which has the overflow property. This will override the native behavior of Firefox and cause no harm on other browsers.