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.)
Twitter: coolfields
Good article Glenda – as always.
Catering for keyboard accessibility is I think one of the commonest accessibility issues on a site. On some sites with ‘flyout’ or ‘exploding’ menus none of the links within the extra links panel are reachable by keyboard which means that whole swathes of a site many never be seen/experienced.
Best wishes
Graham
Twitter: accessibleweb
I am fortunate in having no difficulties using a “rodent” but I often prefer to use tab for things like navigation lists and forms, possibly because I originally used computers before mice became generally available.
I would assume that in this case it was an oversight or a change that missed out tabindex 4 – it seems bizarre otherwise to go from 3 to 5, but as you say, it is generally better not to specify tabindex at all but instead make the structure of the site logical so that it works the same way when laid out in a linear way (e.g. without any CSS).