Here's a tip for bloggers (particularly those who use Movable Type).

As most computer users know, the [tab] key can be used to move between fields and links on a webpage. If you go to any page and hit [tab] repeatedly, you'll eventually cycle through every selectable item and get back to where you started. The order that you visit each item is called the tab index order, and each item has a number called a tab index. Basically, these numbers start at 1 and go up to whatever the total number of items is on the page.

If you don't specify any tab indexes on your page (and you probably don't), then the browser will try to figure out what order to go in by itself. Sometimes this works fine, but sometimes it doesn't. Movable Type blogs have a particularly annoying feature in that when you hit [tab] from the main comment text box, you're taken all the way up to the first link at the top of the page rather than to the submit button, which is probably where you want to go after you finish typing your comment.

This can be fixed pretty easily, and here's how. In your comments template (you know how to find that, right?) do a search for the word "form", and you'll find the form that's used to submit comments. There are five (or more) input tags in the form, and what you want to do is add a "tabindex" attribute to each one, indicating the order in which you want to be able to tab through them.

For example, here's how mine look (notice the tabindex attibutes, in bold):

<form method="post" action="" name="comments_form" onsubmit="if (this.bakecookie[0].checked) rememberMe(this)">
<input type="hidden" name="entry_id" value="1139" />

<table border=0 cellpadding=0 cellspacing=0><tr>
<td width=180px align=left valign=top>
<label for="author">Name:</label><br />
<input tabindex="1" id="author" name="author" /><br /><br />

<label for="email">Email Address:</label><br />
<input tabindex="2" id="email" name="email" /><br /><br />

<label for="url">URL:</label><br />
<input tabindex="3" id="url" name="url" /><br /><br />
<!-- Security Code Check -->
<input type="hidden" id="code" name="code" value="12" />
<img border="0" src="" align="left"> Enter anti-spam<br /> code below:<br />
<input tabindex=4 id="scode" name="scode" /><br /><br />
<!-- end of Security Code Check -->

<td valign=top>
Remember personal info?<br />
<input type="radio" id="bakecookie" name="bakecookie" /><label for="bakecookie">Yes</label><input type="radio" id="forget" name="bakecookie" onclick="forgetMe(this.form)" value="Forget Info" style="margin-left: 15px;" /><label for="forget">No</label><br style="clear: both;" />

<label for="text">Comments:</label><br />
<textarea tabindex="5" id="text" name="text" rows="10" cols="50"></textarea><br /><br />

<i>Only press the "post" button once -- it's slow, but don't worry.</i><BR />
<input type="button" tabindex="8" onclick="window.close()" value=" Cancel " />
<input type="submit" name="preview" tabindex="7" value=" Preview " />
<input style="font-weight: bold;" tabindex="6" type="submit" name="post" value=" Post " /><br /><br />


You'll probably want to apply the same fix to your individual archives, since there are comments there as well.

If you look at my comments, you can use the [tab] key to see how this all works. It's a minor usability issue, but it does make leaving comments a little more convenient for your readers.



Email blogmasterofnoneATgmailDOTcom for text link and key word rates.

Site Info