Get rid of the dotted lines on links with image replacement

Update 2-26-2014

This is obviously an outdated article. Please do not follow the older advice on using outline:none and hiding focus. We need to provide some visual cue that a user has placed their focus on a link or button via the keyboard. The key is not to hide focus, rather to avoid generating the marching ants that went off screen with older methods of image replacement. The key is hide the text while not pushing it off-screen. Thierry Koblentz’s article Clip your hidden content for better accessibility is the gold standard on using hidden text while avoiding the off-screen outlines and making your site global-ready.

If you do decide to use outline:none, you must make sure that you re-define the focus style. This is normally done by duplicating the :hover style

:hover, :focus, :active {
    text-decoration:underline;
}

Original post

I don’t remember where I first found this tip (Hedger Wang?), but it’s a good one. If you are using image replacement, i.e. background images and negative text-indent, you may notice a dotted line appear when the link is clicked and waiting for the page to change (:focus). It’s outlining the text that happens to be wayyyyy off screen. It’s easy as pie to fix this issue.

CSS Fix

This will fix the problem in Firefox. Just drop this into your global.css file.

a:focus {
    -moz-outline-style: none;
}/*this avoids having image replacement sections display a dotted outline*/

JavaScript Fix

This will fix the issue in the other browsers.

var theahrefs = document.getElementsByTagName('a');
//fix dotted line thing when link is OnClicked
for(var x=0;x!=theahrefs.length;x++){
    theahrefs[x].onfocus = function stopLinkFocus(){this.hideFocus=true;};
}

Firefox search plugin for www.alistapart.com

Everyone has their bible. For some, it is the Holy Bible, for others, something not quite so reverent. As a child, our family life would come to a screeching halt when our bible arrived in the mail. Being the youngest, I usually got the National Enquirer after it had been scanned, read, and laughed about by the rest of the klan.

I’m all grown up now and my bible and gods are no longer the gossip rag and celebrity stalkers. Instead, I look up to my Rock Gods, such as NoMeansNo, Drive Like Jehu, and Ethel Merman. The omniscient National Enquirer has been replaced with web sites such as AListApart.com.

The AListApart path to enlightenment

Hardly a week goes by without doing a search on alistapart for the path to this or that standards-based method. A couple months ago, I created a search box plug-in for Firefox to make it much easier.

With the blessing of Jeffrey Zeldman, I present to you the www.alistapart.com search plugin for firefox.

The javascript to install the plugin is now working.

Standards-based web development resources made even easier

Chris Pederick of the all mighty Web Developer Toolbar mentioned a great service today on his blog. Rollyo allows you to create your own personal search page that is super easy to build.

I’ve jumped at the chance to build a firefox toolbar to search the best standards-based resources available (and my site to boot.) I simply created a Rollyo page and then created the Firefox search plugin to use it.

I don’t have time to create the super-easy javascript link right now, but here’s how you can install it in two minutes.

  1. Download these two files: standardistas.src, standardistas.gif
  2. Place them in your program files/mozilla firefox/searchplugins directory
  3. Restart Firefox.

Or…

Visit the new Rollyo – Standardista page and click on the Add to Firefox link on the right sidebar. This approach will give you a generic Rollyo icon in the search box.

Summary

In one simple search you can get the relevant information from all of these sites without having to swim through thousands of extraneous results.

I’ve added more standardistas to the list:

The Future

I begin working with Yahoo! in a week. I had planned on building a page using their search API in the near future. Go ahead and download this Firefox toolbar plugin. I will be adding this to the mozdev archive and when I make the new Yahoo! version, your toolbar will actually update itself. As Christopher Lowell would say: “How cool is that?!”

–This post was originally published on www.tdrake.net