6

I have a login form shown below, and I am trying to figure out the correct tabbing for it for the best accessibility and user-experience. This seems like a very common design, but I haven't found a good solutions that says how to tab-order fields.

enter image description here

For the curious, the bootstrap HTML is this:

<form class="form-signin" method="post" action="/login">
    <label>Username or Email:</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-user fa-lg fa-fw"></i></span>
      <input name="username" type="text" class="form-control" required autofocus>
    </div>
    <label>Password:</label>
    <a href="/forgot">(Forgotten your password)</a>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-lock fa-lg fa-fw"></i></span>
      <input name="password" type="password" class="form-control" required>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">
        Sign in</button>
</form>

Based on the default ordering the tab order is:

1. Username field
2. Forgot password link
3. Password field
4. Sign in.

This seems to cause issues, as a tab from the username hits the "Forgot password" link, which means an extra tab to start typing the password. But the other two solutions I've tried have other issues.

This pattern, means an extra tab to get to the sign in button. But this might not be a concern as I'm guessing most users will just hit enter? But if not, tabbing from the password field and hitting enter will fire off the link.

1. Username field
2. Password field
3. Forgot password link
4. Sign in.

Alternatively, this pattern puts the link after the normal flow, but the forgot password link tab location is further from the visual and semantic location of the link.

1. Username field
2. Password field
3. Sign in.
4. Forgot password link

Am I overthinking this? Is the Forgot password link even in the right place? Is there a best approach for how to place these links in document flow to prevent these kinds of problems?

5

In my experience, many keyboard users expect the following tab order for a typical login form:

1. Username field
2. Password field
3. Submit button

They’ll often blindly

  1. enter the username
  2. press Tab
  3. enter the password
  4. press Enter (or Tab followed by Enter)

Now, when the "Forgotten your password" link appears somewhere inbetween, they’ll unintentionally focus this link. This means, they either type the password although the field is not focused, or they open the "Forgotten your password" page instead of submitting the form. Both scenarios are painful (especially when the password is complex, and when the entered password is lost when navigating back).

→ So I think (1) you should definitely choose a tabbing order where the "Forgotten your password" comes after or before these three focusable elements. (This goes for other things as well, e.g., "Stay signed in" checkboxes.)

While it would be technically possible to have this link visually appear in a different place than the tabbing order suggests, this can be confusing for users that don’t use the login form blindly (e.g., they might expect to have to press Tab two times to skip this link).

→ So I think (2) you should move this link to a different place (so that the tabbing order is in line with the visual placement).

(Side note about your markup: You should associate the label elements with their respective input elements, otherwise this form isn’t accessible.)

2

Looking just at the tab order, it would be most appropriate for the following:

1. Username
2. Password
3. Forgot password link
4. Sign in.

The rationale being that a user who is going to be using the tab key to place the cursor will be more towards the "expect" end of the spectrum than the "novice" end. They will want to jump to the appropriate fields quickly and will not want to deal with the forgot password link, as the usage of that link will be less than the fields themselves. Pressing return to submit will also be more common amongst these users.

Given this tab order, I would suggest the following element flow:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Also remember that not everyone is using the tab key. You can read more about tab vs. mouse movement between fields in the following question:

What is the usage rate for users navigating form input fields via the 'tab' key vs. mouse clicks?

Of course in the case of mouse use the tab order is useless so you want to organize the UI based on the planned entry pattern of user. This brings you to username & password being your primary elements, with Sign In 3rd and the forgot password link last (because it is going to be the least used).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy