Fix a Tabindex Issue in Registration and Sign-Up Forms

If pressing Tab in a registration form moves focus from the password field to a Show password link instead of the Confirm password field, set that link’s tabIndex to -1 with JavaScript. The link drops out of the Tab order, so focus goes straight to the next field.

The problem

When user navigates the registration form using TAB key from one field to the next one, after he enters the password, he presses TAB and it shifts focus to “Show password” instead of “Confirm password” – this can lead to user not noticing and start typing the password again and clicking the submit button etc. To avoid confusion it is better to increase the tab order of these “show password” controls to last order.

How tabindex changes the order

The tabIndex property sets an element’s place in the keyboard order. Elements with a positive value come first, lowest number first, followed by everything else in source order. In this example, myAnchor3 gets focus first and myAnchor1 last:

document.getElementById("myAnchor1").tabIndex = "3";
document.getElementById("myAnchor2").tabIndex = "2";
document.getElementById("myAnchor3").tabIndex = "1";

The fix

Positive values are hard to keep in order as a form changes, so the fix uses -1, which takes the element out of the Tab order completely. Run it after the form is on the page. a.password_preview is the Show password link on the original site, so change the selector to match yours:

document.querySelector("a.password_preview").tabIndex = "-1";

After the fix, Tab moves from the password field straight to Confirm password. The link can still be clicked, but keyboard users can no longer reach it with Tab.

Related articles

• showing whether the two passwords match as the user types: another helper for the same fields
• adding a confirm password field to the WooCommerce registration form: with server-side validation