Remember tabindex?

This post is more than 2 years old.

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>

&lt;p&gt;
&lt;label for=&quot;password&quot;&gt;password&lt;&#x2F;label&gt;
&lt;input type=&quot;password&quot; name=&quot;password&quot; id=&quot;password&quot;&gt;&lt;br&#x2F;&gt;
&lt;a href=&quot;&quot;&gt;Learn about secure passwords!&lt;&#x2F;a&gt;	
&lt;&#x2F;p&gt;

&lt;p&gt;
&lt;label for=&quot;password2&quot;&gt;confirm password&lt;&#x2F;label&gt;
&lt;input type=&quot;password&quot; name=&quot;password2&quot; id=&quot;password2&quot;&gt;
&lt;&#x2F;p&gt;

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

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Ty Whalin posted on 5/22/2014 at 1:17 PM

Hey, that is a nice little tip. Did not know that about tab indexing.

Comment 2 by Raymond Camden posted on 5/22/2014 at 4:27 PM

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

Comment 3 by Larry C. Lyons posted on 5/22/2014 at 10: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/technique...

Comment 4 by Raymond Camden posted on 5/22/2014 at 10:39 PM

Good point there. I suppose in that case, using positive numbers with that link being last may be a better alternative.

Comment 5 by Larry C. Lyons posted on 5/22/2014 at 11: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.

Comment 6 by Jaana Gilbert posted on 5/30/2014 at 11: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).