Twitter: raymondcamden


Address: Lafayette, LA, USA

Remember tabindex?

05-21-2014 2,775 views HTML5 6 Comments

A quick tip. I just ran into a form that looked, a bit, like this:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>

<body>

<form method="post">
	<p>
	<label for="username">username</label>
	<input type="text" name="username" id="username">
	</p>

	<p>
	<label for="password">password</label>
	<input type="password" name="password" id="password"><br/>
	<a href="">Learn about secure passwords!</a>	
	</p>

	<p>
	<label for="password2">confirm password</label>
	<input type="password" name="password2" id="password2">
	</p>

</form>

</body>
</html>

Nothing special - but notice the link after the password? If you use the tab button to move through the form, you end up on the link itself after entering the password.

If you are a fast typist like me, it is easy to miss. Don't forget that HTML has a handy attribute for this, tabindex. Fixing it is actually pretty easy. In the past I knew I could use consecutive numbers in my form fields to direct the tabbing, but apparently just using a negative value on the field you don't like is enough to fix it... like so:

<a href="" tabindex="-1">Learn about secure passwords!</a>

So yeah - don't forget it. (As a certain site I just visited did. ;)

6 Comments

  • Commented on 05-22-2014 at 4:17 AM
    Hey, that is a nice little tip. Did not know that about tab indexing.
  • Commented on 05-22-2014 at 7:27 AM
    This is something I try to remind folks about often - HTML has quite a bit too it and it's probably something we all need a refresher on. :)
  • Larry C. Lyons #
    Commented on 05-22-2014 at 1:35 PM
    Just a heads up Ray, tabindex is also used by screen readers and other accessibility aids. As the WebAim site notes:

    Because tabindex="-1" removes the element from the default navigation flow, care should be taken to ensure that it is not assigned to any element that should be keyboard navigable, such as a link or button that sighted users can click on with the mouse.

    http://webaim.org/techniques/keyboard/tabindex
  • Commented on 05-22-2014 at 1:39 PM
    Good point there. I suppose in that case, using positive numbers with that link being last may be a better alternative.
  • Larry C. Lyons #
    Commented on 05-22-2014 at 2:14 PM
    t really depends. If the item is in the flow and is a widget, then tabindex="0" or "-1" is entirely appropriate. For instance the Assets.gov site http://assets.cms.gov we made full use of tabindex and the web ARIA properties and roles to make the site fully accessible, and almost fully response (the side menus suck unfortunately). FWIW this framework and library is availed as a cdn or as a download.

    In the example you use, it may be easier for all users if the link was above the first field. In fact that may work better because you can use a sentence to describe the link and hook that into the labledby attributes for both fields.
  • Commented on 05-30-2014 at 2:46 PM
    I still use tabinex on pretty much all forms I build, especially those that are not laid out in a traditional way, but have to be followed in a specific order (client requirement).

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty