Leaving Blog Comments: The Rodent versus The TAB

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.

aWeber blog comment form

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:

  • Piechart showing poll results 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.)

2 Responses to Leaving Blog Comments: The Rodent versus The TAB
  1. Graham Armfield
    Twitter:
    June 10, 2011 | 1:54 am

    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

  2. Richard - Accessibleweb
    Twitter:
    June 10, 2011 | 2:05 am

    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).

Leave a Reply to Graham Armfield

Wanting to leave an <em>phasis on your comment?

Trackback URL http://blogaccessibility.com/leaving-blog-comments-the-rodent-versus-the-tab/trackback/