Where the Heck is My Focus?

You need this: http://userstyles.org/styles/305

Keyboard access. The only browser that gets it. http://help.opera.com/Windows/9.20/en/keyboard.html

Hitting tab the correct number of time can be a trial when there are a large number of elements on a page that can have focus. This mouseless browsing extension in firefox looks useful:

http://www.mouseless.de/index.php?/content/view/17/30/

I’d actually expect the tab order focus to be:

1- User ID
2- "I forgot my user ID"
3- Password
4- "I forgot my password"
5- Keep me signed in
6- Enter.

I’d instinctively double-tab from the user ID field to the password field, but end up on the Enter button.

I agree with Robert. If when you want to go to a website sharp’ish and want the least questions possible (especially about the next time you login), then its just username, pwd, login… thats it, thats all I want to enter. Show me the damb site already. So impatient!

Yes, this totally annoys me. Wordpress is the worst for this I feel, I think they do it for bots, but a bot would just use a getObjectByID I’d assume.

Meh

Hi guys,
you should try “vimperator” (@ vimperator.mozdev.org) its an extension for firefox to let you use the keyboard instead of the mouse. When you press [f], labels pop up for all links, and when you type the name of the label its like clicking on the link. After getting used to, it works like a charm, and no more mouse!

It’s a breeze to navigate with keyboard in Opera using Shift+arrows or Q/A to go between links and input elements.

What Colin said. Firefox and IE7 aren’t showing what the website creator didn’t ask to show. This website needs to focus more on :focus styling.

Firefox’s mystery meat navigation hits you all over the place. To see one very obvious example, try using Find (Ctrl-F) on a typical web site with information sprayed all over the place with div’s and a mixture of different fonts, type styles, and colours. On the first find result you can see some element on the page highlighted. On the second… [pause]… oh, it’s over there. On the third… no, it’s gone. Something is being found somewhere, but there’s no obvious highlighting so there’s no way to see what’s been found. As a result the Find function is rendered nearly useless, since manually scanning the page to try and locate where the current Find focus is, is only marginally better than manually scanning the page the find the desired object in the first place.

I’ve got one web app I sign in to, where the text box gains the focus, then loses it as you’re typing when it loads some script, then loses it again. It’s infuriating.

This is actually something that every web developer should know how to do properly. Although what properly actually is is a matter of debate. Here is my tuppenceworth.
As Damien says the correct tab order (as it stands) is
username
forgot
password
forgot
remember me
enter.
But it should be:
username
password – at this point enter should submit the form
enter
remember me
forgot
And it should look like that. The reason being that the first two fields are going to be used 99% of the time so they should come first and as Robert points out a user should be given more opportunities than necessary to check remember me.
But there are some subtleties that can really improve things for the keyboard user. The :focus pseudo class should be used to provide visual feedback (and the :active which for some reason IE uses when a field gets focus). This is something that should be consistently applied to every link.
You can also do this using javascript. And with javascript you should hijack the enter key until the last field or the enter button has focus. How many times have you pressed enter to move to the next field and accidentally submitted a form?
Finally in ebay’s case labels should be used so that the mouse user has a large clickable area.

There is one really annoying flaw with the Safari focus model - if you’re typing in a form and click the submit button, focus immediately pops back to the text field. The number of times I’ve double submitted because I thought I didn’t click the button…

To Colin + Carl: Although ‘good’ focus styling can be achieved via CSS, there should still be a sensible default style provided by the user agent, to be overriden. Much the same as fieldsets, buttons, drop-down menus should all be as usable as possible by default, whilst retaining a sensible level of ‘neutrality’.

Firefox users, I strongly recommended a script for the Stylish extension called "Bright Focus (for buttons, links, and textboxes)"
http://userstyles.org/styles/305

it replicates the focus behavior of Safari (at least I think it does since I’ve never used Safari myself)

I don’t think this should be blamed on the browser. As others have said, using the :focus pseudoclass to define the exact look of an element that has focus is the optimum solution as it allows developers to notify the user while keeping the look and feel of the design inline with the rest of the site.

I’ll have to respectfully disagree with your first point (that it should stick the focus on the username box). Sometimes, perhaps most of the time, that’s good or neutral, but when it’s not it’s really, really annoying.

Too many “experienced” web page developers out there, huh?

I’d like to chime in with the other users who pointed out how great Konqueror is in this respect. First there is the access keys, which you can view by pressing Control and then follow by pressing a letter or a digit (not that this doesn’t clash with other short-cuts because the Control key is released before you press a letter). It should be noted that this works better than regular access keys defined in the HTML source, because the shortcuts keys are (1) visible and (2) only assigned to items visible on the screen. That means that even if you have a page with hundreds of links, as long as only a few (less than 36) are visible at a time, you can activate all of them with just the keyboard.

Second, Konqueror renders controls in the current KDE widget style, which means that elements which have focus are clearly visible. So when it comes to keyboard navigation, Konqueror definitely beats the Internet Explorer and Firefox.

With regard to tab order: this is one of my biggest GUI annoyances and in my experience the problem is present in regular applications as well as on the web. Apparently many developers use the mouse almost exclusively and don’t even test their dialogs with the keyboard, resulting in completely random tab ordering. I wish GUI tools like Visual Studio and Qt Designer would do a better job of automatically ordering controls in a sensible way, instead of defaulting to the order of creation. Of course it should be possible to override the order, but it would be nice to have a more sensible default.

Firefox 2 is particularly bad on the Mac: tab does not allow you to move to a drop down list field. This drives me crazy.