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