kuh • pain´• kah

Greetings again.  Today’s rant post is about Firefox and CSS and Accessibility/Usability.

The problem: Users (and QA) complaining about the dotted line that appears around links and form elements (buttons, submit, checkboxes, etc) in Firefox.  This line is usually just inside of the bounding box.  The line appears “on focus” and “on click”, or “:active” and “:focus” in CSS parlance.  So basically, if you tab through a form or series of links, this border gives you an idea of where you are in the tab order. It serves this purpose well, but there are times that it fails or can cause confusion.

If you have elements positioned off-screen or use off-screen image replacement techniques this border can behave strangely, showing the dotted border going off the screen in odd ways.  Also, if you fill out a form and click on a submit button that is a link, the border can persist while you wait for the form to process, which is unsightly.  Also, if you have image-based links, and click on them, this border persists until the HTTP response data starts to come in and the browser beings to load the subsequent page.  Again, unsightly.

Now, I understand this border’s role and purpose in the world, and I will go over how to remove it in a minute, but before I do that, I’d like to give my $1.50 service fee, which mostly has to do with clicking on things.

First, I think that this border can be unsightly to layouts.  When you click something, the design is not intended for it to suddenly become outlined and this outline is imposed by the browser.  Many of us are proud of our designs and the work we put in to them.  We don’t plan for them to have this ‘feature’.  My main beef here is that it is imposed by the browser and finding out how to control it takes some deft Googling.

Second, I think it is confusing, but only sometimes.  When you’re tabbing through things, it makes perfect sense and requires no explanation.  The user inherently understands it.  But when you click on something, it appears out of the blue.  Sure, you’ve drawn focus, and that’s why it’s there, but the user doesn’t think like that.  They think, “why is that there all the sudden?”, but then it’s gone and the user moves on.  Still, there is a moment of wonder.  I don’t really like that part.

Now, I want to support accessibility, so I don’t want to remove this border completely.  If I remove the border on “focus”, I eliminate the accessiblilty, which I don’t like.  So, my answer was to only remove the border on “active”, which seemed to work except for one thing: after “active”, you’ve drawn focus so the border THEN shows up for focus.  Feh!  You can’t win!

From a JavaScript perspective:

IDLE -> MOUSEIN -> HOVER -> MOUSEDOWN -> MOUSEUP -> HOVER -> MOUSEOUT

From a CSS perspective:

IDLE -> ACTIVE -> FOCUS -> IDLE

Basically, you cannot activate without drawing focus.  Now, don’t get me wrong, it makes perfect sense, but it leaves my image button with an unsightly dotted border after clicking on it.  I can’t really argue that this shouldn’t be the case, either, I mean, you clicked on it, therefore you focused on it, right?  To me, it seems that at this point what does it matter to show focus?  The deed has been done, the page is about to be destroyed and a new one built.  The only [overkill] thing I can think to do is to build some crazy JavaScript (jQuery) that would de-focus buttons on mouseUp.

Anyhow, my solution was as follows:

input[type="button"]:active::-moz-focus-inner { border: 0; }
input[type="button"]:focus::-moz-focus-inner { border-color: #eee; }

This removes the border for when you click on it, but still shows it, although super-dimly.  This way, you still get a visual cue for tabbing through form elements, but when you click on it, you barely notice the border while the page is loading.  Won’t work well on varied backgrounds.  If ti came to it, I would do the JavaScript thing I talked about earlier.  Let’s see if I can do it now:

$('input[type=button]').mouseup( function(){ $(this).blur(); });

Well, there you have it.  So you only need the first piece of CSS above and this jQuery snippet, and it works how I want.  Feel free to apply to “A” links too.

Many thanks to the following:

http://archivist.incutio.com/viewlist/css-discuss/108868
http://stamatiskritikos.com/2010/01/03/remove-dotted-outline-vs-accessibility/