avok00 avok00 - 2 months ago 20
CSS Question

tabindex in CSS

Is it possible to control tabindex with CSS and if yes, which browsers support it and on which elements?


I should say, my goal is to catch keydown events on a div. I saw this page http://www.quirksmode.org/js/events/keys.html# that tests keyboard events and it shows that the only way keydown fires on anything other than document and body or some kind of form element or link is to have tabindex declared on it. But I read on W3C site:

The following elements support the
tabindex attribute: A, AREA, BUTTON,

So I am a little confused, what to do in order to be standarts compliant and make my use case work?


My whole use case is a div with a lot of content with an artificial scroll bar. I am able to scroll it with mouse events but no luck with the keyboard so far.


No. CSS is for styling your HTML elements (i.e. controlling how they appear to users), and tabindex certainly has nothing to do with that.

If you structure and lay out your pages properly, most browsers will, on their own, figure out and put together a series of tab indices for your focusable elements. That obviates the need for tabindex in most cases.

tabindex is more of an accessibility tool and thus it doesn't depend solely or fully on the layout of your pages (e.g. will blind users be aware whether or not form elements are processed "top-down"?). In other words, it's used more to define the logical order of form elements than their visual order. And while tabindex applies to every user on every supported browser, it's more helpful to those who primarily use the keyboard to navigate your pages, a significant portion of whom is going to be of users with special accessibility needs. The typical user usually navigates using their mouse, not their keyboard, so won't need to rely on tabindex to be able to use your pages efficiently.