In Where the Heck is My Focus, I wondered why web developers don't pay attention to basic keyboard accessibility issues. I don't want to navigate the entire web with my keyboard. That's unrealistic. I was specifically referring to login pages, which tend to be quite spartan and minimal. On a simple login web page, the standard keyboard tab, enter, focus order navigation scheme is quite useful and much more efficient than using the mouse.
I’m afraid that common users are going to browse the web just like they do now (with a mouse), no matter what improvements get thrown into their browser. That’s the way they learned it, and it’s really hard (if not impossible) to change that…
Unless, of course, they disable the mouse
Hah. The hundreds-of-tab-elements brings to mind a project I worked on awhile ago for a class. We were creating a basic UI-and-database-backend deal in C# that ostensibly acted as an administration and part ordering tool for a fictional car shop. We ended up with this one guy who didn’t know how to do much beyond dragging-and-dropping controls onto a form in VS, so we handed him a mockup and had him do the UI.
Needless to say, we hook everything up and start testing, and realize that he had set up a tab order o’ doom across every form in the application. VS adds tab orders to controls in the order you add them, but he of course added them in the oddest order possible. The rest of the team got to spend a late night fixing the tab order of a couple hundred controls across twenty different forms.
The best keyboard navigation trick is related to Firefox’s quick find.
If you click the apostrophe key, you get a quick find that puts cursor focus on the first link text on the page with your search term in it. Pressing F3 will move you on to the next link text match and pressing enter will make you actually go to the link.
Alternatively if you’re not wanting to focus on link text, you can just do a normal quick find with the forward slash key to make the cursor focus on a bit of text and then hit tab to focus on something you might need.
Only Firefox’s quick find allows you to move page focus with text like that, and it acts like a quick jump to wherever you want to go on the page (provided there’s real text on it).
My biggest concern is the accessibility issue with pages containing lots of links / image buttons / AJAX-wotnots. Here in the UK we are LEGALLY obliged to make our sites accessible; but to be frank it is often ignored because it is just impossible with the paradigm as it exists, especially when you factor in the customer’s “I want a cool site like X” factor. One solution I’ve implemented for a customer is a “low-fi” version of a web application, which has very simple controls and layout, so that TABs actually work; but many customer are not interested in paying for this… And the first person that says “but you can do it all with CSS”, will be put up against a virtual wall and virtually shot
To anyone mentioning any inline-find type functionality in Firefox: Opera, of course, has the same functionality, on the ‘,’ or ‘.’ keys for ‘find links’ and ‘find text’ respectively. This is absolutely not the same as spatial navigation: Spatial navigation can for instance easily navigate collapsed/ing js menus, something you’d be hard pressed to do with any inline find functionality
“…spatial navigation is worlds better than the insanity of pressing tab 125 times.”
Opera’s spatial navigation sounds like a great improvement for sighted users, but tabbing isn’t quite as insane as described. In Safari I can press the tab key once and hold it down for 12 seconds to cycle through every single link on yahoo.com (the page in the screenshot above), about half of that to get through the left-hand column of nav links. 125 keypresses are not needed.
(Actually, I hold option-tab, because I have the “each item” preference turned off. If I were going for a link near the bottom, I would hold shift-option-tab. Just plain tab cycles through form elements only)
Unfortunately, in Safari jumping to page anchors only scrolls the page, and incremental search only moves text selection. Neither changes the focus, so they don’t assist keyboard navigation. (In MSIE 5/Mac text search used to select highlighted links.)
In text browsers where this is a problem, they solve this by numbering every link. So you can type the number and then press enter and it takes you right there. Very efficient.
You’re making this harder than it is, what you should be doing is using the accesskey attribute on alements you want to have keyboard accessible. That’s been in the HTML spec as long as I can remember!
Shortcut keys will always be faster than clumsy arrowkey presses or sequences of tabbing. It’s highly unfortunate too many webdevelopers completely forget about this, or worse aren’t even aware it can be done.
I think the best idea is to have some sort of virtual finger so you can navigate directly to the link and click. My mate had one connected to his pc and it allowed him to move this image around and use the image to click it for him. This way even with 500 links on a page he saw the one he wanted, moved in it’s direction with a wave of his hand and the use of this ‘device’ and simply ‘clicked’ on it. Genious
j/k guys, go, geek out over keyboard navigation. I’m a big fan of pressing escape to close a form.
p.s. I’ve been reading everyday for a while now and browsed a good number of previous blogs. Great work.
I remember when Firefox first came. It was advertised like a saviors first coming to earth, but every single thing it was praised for had been standard in opera a long time already.
Add-ons are for extra features like FireBug. Basic userfriendliness, like mouse gestures and spatial navigations should come out of the box, like it has in Opera for years.
So you do read what I post here. If you want a new topic for a blog post, try benchmark loading times in games with solid state hard drives against normal ones. I’m I the only one that liked pc gaming because loads didn’t exist or where very quick?
yes, Opera is some brilliant software, I daily use the Opera Mini browser on my mobile phone.
Accesskey/shortcut functionality is good, but:
Most windows applications has shortcuts, but a terrible way of visualizing it. Check your firefox browser, you might see Bookmarks - Add as bookmark [ctrl-d]. That is good, but wait… the back, forward, home, etc. buttons dont have an accesskey? … ehh wait it does, I know, but common people dont know and will never learn. Just ask your non-geek friends, what is the “windows key” for?
People forget the accesskeys if they dont see them all the time.
Accesskeys on the web can be very bad if every site has its own access keys.
Of cause people can learn how to use the keyboard, I know alot of non-techi who can work 100 times faster with keyboard and are happy to do so.
I think you are now hunting the wrong game. Why on earth should anyone create a web page with 200 links?
First of all, there are probably two or three targets that the user is going to even notice, and if so: why provide him/her with 197-198 uninteresting?
Secondly, if you put 200 links/buttons/whatever on a page, it becomes virtually impossible to hit those targets even using an advanced pointing device like mouse or even better, a pen tablet. Don’t forget good ol’ Fitt’s.
So the real wtf is-- well I think you’ve got it already.
I have used IE6, IE7 and FF and found that they fail miserably again and again. Now that I have switched to Opera, I am happy. Very.
One wonderful thing I would like everybody to know is that Opera NEVER crashed in my PC.
And there is another big reason I use Opera now:
Better way to manage tabs in your browser: http://www.diovo.com/?p=33
FWIW, the popular screen readers for the blind offer a few navigational aids in addition to tabbing. For example, they provide a command to show all of a page’s links in a list box, so the user can use the incremental find feature of standard list box controls to quickly find and activate a link. Some screen readers also provide keystrokes to jump to the next or previous form field, button, check box, edit box, etc. I wonder how useful these features would be on mobile phones and similar devices.
Thanks Jeff - I hadn’t looked at the incremental search feature in Safari, assuming that ‘Find On This Page’ type features were all largely rubbish.
How wrong - the Safari implementation is really nice, if only there were hotkey combinations for the forward/backward arrows it’d be perfect… (he says, hoping someone will point out that there are hotkey combinations but just that, as has also been mentioned here, on the Mac these shortcut key combinations can be hard to spot).
