I want to revive the CSS nav-index property, for tab order management in the age of Flexbox and Grid

Submitted by PRIVATE

This idea is currently being discussed.

With the proliferation of Flexbox and Grid layout, it is imperative, accessibility wise, to be able to control tab order via CSS.

We already have a property that does this - nav-index - that died an untimely death and is only supported by Opera (as far as I know) right now.

Currently, tabindex attribute is completely inadequate to handle responsive layout, and the if you need one element to be the first in tab order, you cannot do it because the default tabindex is 0, and any negative value makes the element inaccessible.

And the alternative of assigning a tabindex for every other focusable element on the page is a ridiculous proposition.

Having nav-index also enables focus trapping with pure CSS:

* {nav-index:1}
dialog * {nav-index:2}
dialog > :first-child:not(:focus) {nav-index:0}
Tagged
CSS Accessibility
Votes
0
What are votes for and how are they tallied?