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

[aarongustafson]

---

title: I want to revive the CSS nav-index property, for tab order management in the age of Flexbox and Grid
date: 2020-12-11T19:47:19.830Z
submitter: PRIVATE
number: 5fd3ccc7219e7737d9442cfa
tags: [ ]
discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/
status: [ discussing || in-progress || complete ]
related:

• title:
  url:
  type: [ article || explainer || draft || spec || note || discussion ]

---

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 inadequte 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 enable focus trapping with pure CSS:

• {nav-index:1}
  dialog * {nav-index:2}
  dialog > :first-child:not(:focus) {nav-index:0}

---

If posted, this will appear at https://webwewant.fyi/wants/5fd3ccc7219e7737d9442cfa/

[aarongustafson]

During triage today: We’d to broaden the scope of this a bit to discuss sequential navigation and the interplay between CSS & HTML.

[aarongustafson]

Complexities:

1. Every element is (potentially) interactive
2. WebVR makes this even more complicated