Have you ever encountered a website that didn’t behave as expected?
i have; take earlier this week as an example. I attempted to leave a comment about another accessibility issue on the aWeber Blog. I entered my name, hit the TAB key, entered my email, hit TAB, entered my website address, hit TAB, and landed on the Submit Comment button…
Wait, did I miss something?
With my joystick I moved my cursor back to the website field and tried to again, in case I hit TAB twice accidentally the first time around. Again, I skipped over the comment box.
Doing what I do as a Web Accessibility Consultant, I then checked the source code. My suspicion was confirmed. Here’s what I found:
- The Name field was set to tabindex="1"
- Email: tabindex="2"
- Website: tabindex="3"
- Submit Comment: tabindex="5"
Wait a minute, what happened to tabindex="4"?
No wonder the comment box was skipped right over. There was no associated tabindex, which determines the order in which elements are tabbed to. By the comment field not having a tabindex specified, there is no way to get to this field using only the keyboard.
I am not alone in using the TAB key when submitting blog posts. According to the unscientific twtpoll (as of 10:47am pacific time on June 9, 2011), out of 11 people:
- 1 person (9%) prefer using their mouse (or equivalent),
- 6 people (55%) prefer using their TAB key, and
- 4 people (36%) don’t have a preference; whichever is easiest at the time.
More than half over the people prefer using the TAB key over the rodent when leaving blog comments. This means the process needs to be completely keyboard operable.
Defining the tab order is only necessary when the default tab order is not ideal; otherwise, the tabindex should be avoided. (See Keyboard Accessibility: Altering the Default Tab Order Using tabindex for more information.)