Where the Heck is My Focus?

The web is quite mouse-centric. Ever tried navigating a typical website without your mouse? I'm not saying it can't be done-- if you're sufficiently motivated, you can indeed navigate the web using nothing but your keyboard-- but it's painful.


This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2008/02/where-the-heck-is-my-focus.html

Upon using my tab button to get down to this field, it comes right after the URL field, however not knowing that I went through every link on the page! Then I found that Jeff has a hidden Hit Counter done by statcounter.com. Don’t believe me? After the “Subscribe via email” link, hit Tab again, and it doesn’t take you anywhere and doesn’t highlight anything, however in the bottom left corner you see it’s address there :stuck_out_tongue:

Totally agree - what’s worse is seeing users press enter to go the the next field…it happens.

But isn’t there a blinking cursor in the text field if it has focus? (Not that I haven’t seen this inexplicably violated…)

But isn’t there a blinking cursor in the text field if it has focus?

Yes, a slim 1 pixel flashing line. And even then, only if the focus is on a text field that allows input.

I’m not convinced that there should be check boxes or links between the login fields and the submit button…

Facebook is particularly bad. If you check the box to remember your password, it comes up with a popup that messes with your tab order.

Interesting, I listed this as one of a few advantages Safari has over Firefox. I was told (amongst other things), that if I really couldn’t see the highlighted textfield that I could “always go and edit userChrome.css” to resolve the problem.
http://tinyurl.com/2f63n9

If you write accounting software, users insist it can be driven entirely from the keyboard. This is because book keepers spend all day at the keyboard and don’t want RSI and do want to be able to work as quickly and efficiently as possible.

The solution goes a little further than simply having a visible cursor althought I certainly agree knowing which field is highlighted is helpful.

Web Accessibility Initiative (http://www.w3.org/WAI/) is probably a good place to start if you want to think a little more about accesibility and ease of use.

Firefox 3 beta does this (puts a blue border around the active field) already.

well,it seems web designers forgot about the keyboard when it comes to navigation which is wrong because almost all the forms on the web can be filled faster using the keyboard eg.creating a new email account.Even though Safari obviously wins when it comes to focus highlighting I’m a bit disappointed with the color used,it should be a bright color like orange or something yellowish.Just as shown in the ebay form there are a lot of buttons which are blue thus using the color blue to highlight them is like no highlighting at all.If there is a way to change the color then i rest my case,also the color red does not qualify since it is exclusively used to display errors.

Hey Now Jeff
My focus is getting so bad these days I’m needing glasses.
Davo
Coding Horror Fan

As always, for Firefox there’s a handy add-on that rectifies this omission. Two even:

https://addons.mozilla.org/en-US/firefox/addon/1310
https://addons.mozilla.org/en-US/firefox/addon/2690

Still, it would be nice to have it implemented properly in the FF core.

I’ve found another related issue, in my bank. When logging in, they expect n digits for the passcode, and so, when you have typed n digits, they “helpfully” hijack your pointer into the next textbox.

I sit in IRC channels on freenode where people ask webdev questions. A particularly common one is “How do I remove that dotted line from links on my page”.

Very occasionally, people are actually interested in ‘rebranding’ the focus indicator to fit their site design, which poses an interesting question towards user consistancy. Personally I’m happy to replace the dodgy dotted line with something a bit nicer looking, provided it’s clear what the intention is

This happens at the citibank website (citi.com), when you enter your username and hit tab; it flies over to the signin button. Some would say its a security feature (to force you to doublecheck you’re typing your password on the right field i guess), but its a huge annoyance.

-mp

I’m not certain that this is an omission by Firefox. It could even be seen as a problem with Safari.

In FF, you can use the :focus psuedoclass to determine what happens when the field has focus. That could be a border, a different background colour, or an enormous blue highlight. In other words, it is up to the page designer to determine what happens on focus.

In Safari, it could be that the effect of anything on :focus is wiped out by the blue glow, which I would consider to be incorrect. I’m not sure on this point though as I don’t have Safari to hand.

Apparently, not having the “Remember Me” in the tab-order is a security issue instead of a usability one; it prevents people accidentally toggling the “Remember Me” when using a public terminal.

In other words, this was a deliberate decision by eBay, not a simple case of carelessness.

However, you’re right - many sites don’t give a crap about tab order.

I’m still waiting for the hotkey combo that lets me move the cursor with the arrow keys so, when navigating a webpage, I can get to that button down the bottom without tabbing through every link button/textbox in between.

Another annoying “feature” is stealing focus when the user is faster than the script being loaded (see e.g. Google search). Shameless plug: I’ve chucked together bits and pieces to get a script which will avoid this in major browsers - See the link below.