WebWeWant / webwewant.fyi

If you build websites, you inevitably run into problems. Maybe there’s no way to achieve an aspect of your design using CSS. Or maybe there’s a device feature you really wish you could tap into using JavaScript. Or perhaps the in-browser DevTools don’t give you a key insight you need to do your job. We want to hear about it!
https://webwewant.fyi
MIT License
76 stars 23 forks source link

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

Open aarongustafson opened 3 years ago

aarongustafson commented 3 years ago

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:

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:


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

aarongustafson commented 3 years ago

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

aarongustafson commented 3 years ago

Complexities:

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