Here’s another little trick to make things easier for keyboard-only users. Use a:focus when styling your links. This is how we’ve done it:

a:focus,
ul li a:focus{
background-color:#333;
color:#fff;
text-decoration: none;}

Trying tabbing through this page and see how well the links show up. Try tabbing through links on a lot of other blogs and soon you won’t have any idea where you are on the page and what link might be coming up next.

Note: I’m not sure if Internet Explorer 7 is much different from previous versions, but a:focus never worked before. So if IE is still the same as it used to be, just substitute a:active for the same effect.

If you, like me, get around the Net and write your blog posts with the aid of a mouse, it’s easy to forget that a lot of Web users, because of various disabilities, actually cannot use a mouse. So how do they cope? Well, they have to use the keyboard instead.

Now, you might not think this is too difficult. It’s easy enough to learn a few keyboard shortcuts, isn’t it?

However, I found recently that quite a lot of Blogsome blogs have a built-in problem when it comes to catering for keyboard users, and I’m going to tell you two things. Firstly, what the problem is. And secondly, how to fix it. Because the solution is really quite simple.

First, the problem. Keyboard users navigate around your blog by using, among other things, the TAB key. It’s on the left, just above the CAPS LOCK key. Most times you probably only hit it by accident, but for a lot of your visitors the TAB key is an essential tool.

I discovered that if a keyboard user wants to leave a comment on a Blogsome blog, the TAB key would jump over the box on the comments form where users usually put what they want to say.

Why not check your own Blogsome blog and find out if our simple changes could help you? The picture below shows a big red X in the area the TAB key missed out before I made a few alterations to this blog’s code.

Hmm, I thought. This could cause a keyboard user to give up on leaving a comment. Hell, they might not even visit your blog again. Ever. Especially as there would be no way to leave a comment to tell you about your dratted comment form.

Luckily, a few changes to the tabindex numbers in the comments.html file sorted the trouble out. Copy and paste the code below into the comments.html file on your own blog and you too can have a fully accessible, TAB-able comments form just like ours.

<div id="comms">
<h2 id="comments">{comments_number zero="Comments" one="1 Comment" more="% Comments"}
{if $post->comment_status == 'open'}
<a href="#postcomment" title="Leave a comment" tabindex="1">&raquo;</a>
{/if}
</h2>
{if $comments != ''}
<ol id="commentlist">
{foreach from=$comments key=key item=comment}
{globalvar var='comment' value=$comment}
<li id="comment-{comment_ID}">
<cite>{comment_type} {_e text="on"} {comment_date} @ <a href="#comment-{comment_ID}">{comment_time}</a> {edit_comment_link link='Edit This' before=' |'}<br />{_e text="by"} {comment_author_link},<br />
</cite>
{comment_text}
</li>
{/foreach}
</ol>
{else} <!-- this is displayed if there are no comments so far -->
<p>{_e text="No comments yet."}</p>
{/if}
<p style="font-size:0.8em;" tabindex="2">({comments_rss_link link_text='<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post only.'})</p>
<h2 id="postcomment">{_e text="Leave a comment"}</h2>
{if 'open' == $post->comment_status}
<p>{_e text="Line and paragraph breaks automatic, e-mail address never displayed, <acronym title='Hypertext Markup Language'>HTML</acronym> allowed:"} <code>{allowed_tags}</code></p>
<p><b>Note:</b>Your comment will be moderated and will appear as soon as possible. Please do not repost. </p>
<form action="{$siteurl}/wp-comments-post.php" method="post" id="commentform">
<p>
<input type="text" name="author" id="author" class="textarea" value="{insert name=var var=comment_author}" size="28" tabindex="3" />
<label for="author">{_e text="Name"}</label> {if $req != ''} {_e text='(required)'} {/if}
<input type="hidden" name="comment_post_ID" value="{$post->ID}" />
<input type="hidden" name="redirect_to" value="{$redirect_to}" />
</p>
<p>
<input type="text" name="email" id="email" value="{insert name=var var=comment_author_email}" size="28" tabindex="4" />
<label for="email">{_e text="E-mail"}</label> {if $req != ''} {_e text='(required)'}{/if}
</p>
<p>
<input type="text" name="url" id="url" value="{insert name=var var=comment_author_url}" size="28" tabindex="5" />
<label for="url">{_e text="<acronym title='Uniform Resource Identifier'>URI</acronym>"}</label>
</p>
<p>
<label for="comment">{_e text="Your Comment"}</label>
<br />
<textarea name="comment" id="comment" cols="60" rows="4" tabindex="6"></textarea>
</p>

{if $captcha_image_URL != "" && $blog_user_level == -1}
{$captcha_hidden_form_fields}
<p>
<input type="text" name="captcha_value_typed" tabindex="7">
<img src="{$captcha_image_URL}" align="center"> <br>
Anti-spam measure: please retype the
above text into the box provided.
</p>
{/if}
<p>
<input name="submit" type="submit" tabindex="7" value="{_e text="Say It!"}" />
</p>
</form>
{else} <!-- comments are closed -->
<p>{_e text="Sorry, the comment form is closed at this time."}</p>
{/if}
</div>