Making Elements Focusable with Tabindex
"... if we want to capture input from the keyboard, we'll need to use elements that can accept the focus: primarily links and form controls ... "
I quickly thought about simply adding the
tabindex attribute to an element and after some preliminary tests in FF2/Win and IE7/Win it seems that's all that is necessary to make an element focusable.
After some discussion with Derek Featherstone, I learned some interesting stuff (and hopefully I'm describing this accurately).
tabindex value can allow for some interesting behaviour.
- If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using
- If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document.
- Values greater than 0 create a priority level with 1 being the most important.
Hey, this is good stuff! Thanks for demystifying tabindex. (I've always been a little sketchy on what the values really mean.)
It's nice to know it's possible, but I can't think of scenario where you'd want to have a form element or link on the page, and not have it focusable via the keyboard.
Can anyone think of one?
Jesse: to clarify, it's a case where you might have a div (or other element not normally focusable by keyboard) that has mouse events attached to it. Giving it a tabindex will allow you to attach keyboard events to it, too, making it more accessible.
For example, let's say you wanted to create a tabbed interface for some information on the screen. The headings for each section could be the tabs. Having them as links doesn't make much sense since the links wouldn't go anywhere. But having them as keyboard focusable means you could set up onfocus events to bring the selected tab to the forefront.
Funny, I was playing around with this a few days ago.
Anyway, I am sure that there are scenarios that proper tabbing is important and can add up to usability. I personally found that it can be helpful not only for disabled people.
Just thought it might be worth pointing to the HTML spec for tabindex
From the HTML spec: "This value must be a number between 0 and 32767"
What happens if you leave the value blank? Would that emulate the action of a -1 value, or a zero? Would it even be valid code?
Derek, I checked out the W3C spec, and indeed it doesn't specify what a value of -1 should do. However, in both the Firefox Documentation and the IE Reference it is specified just as it is mentioned here.
Matt, if you include the tabindex attribute, but leave it blank (tabindex=''), it will behave like the attribute is not there. i.e. Focusable elements will be able to receive focus, and non-focusable elements won't be able to receive focus via the keyboard.
Good post, Jonathan.
I guess I meant, when would you ever want to use tabindex="-1". I can't think of a scenario.
But giving tabindex to non-links/form elements is a cool idea.
Lance: Cheers for clearing that up, you are saying it behave like a 0 (is focusable, but in natural flow).
"the W3C spec, ... doesn't specify what a value of -1 should do" - that's because it specifies a value of -1 as being outside the legal range. I believe it is then up to the browsers as to how to treat an illegal value. Ideally I suppose, they would simply ignore the attribute.
Matt, using tabindex='' is slightly different than using 0.
On a div:
If you set tabindex='0' it becomes focusable and in the natural flow, but if you set tabindex='' it is not focusable at all.
On an anchor:
If you set tabindex='0' there is no change from tabindex='' since anchors are normally focusable.
If it turns out to be useful, perhaps the W3C should add the -1 behavior to their recommendation.
Also worth mentioning is, AFAIK, Opera has a keyboard navigation system that emulates mouseovers on anything that has onmouseover attached to it, allowing it to give keyboard focusability as if one was using a mouse, which is simply a nice feature.
But in certain cases TabIndex = 0 does not set the cursor at the control when form gets activate.