With interest I watched an exchange on the Web Standards Group discussion list as to whether developers should bother replicating browser behavior such as keyboard shortcuts. I didn’t weigh in with my thoughts at the time. I was too busy to join the fray, plus I wanted to first consider all the possibilities and read everyone else’s comments. The result was I didn’t change my position. Since it’s sort of after the fact on the list I figured I’d discuss it here. My quick conclusion is yes and no; it depends on the behavior being replicated, the ease of making the provision, its perceived usefulness, and really the content itself.
The Behavior: A Keyboard Shortcut
There are several keyboard shortcuts that developers often replicate. The function of hitting hitting the Home key to get to the top of the page is one such behavior. This browser behavior or function is often seen replicated as a “top” link. This is the link that developers often place on their footer to allow the user a fast means of returning to the top of the page. It’s fairly unobtrusive consisting of a link with three letters. See my “top” link as an example.
Making the Provision
The top link is made by inserting a
name="top" attribute in an anchor, or placing an
id="top" in any element, at the top of the page (I prefer the latter). And somewhere at the bottom of the page pointing to it with a link like this:
<a href="#top">Top</a>. It’s not a lot of mark-up and is fast and easy to implement. It is typically a site wide solution — in other words it works on any page that has one of the attributes shown. This is convenient, especially to those who use global files. It should be no more than 32 bytes in size, top and bottom, unless an unnecessary
title attribute is added to the link portion.
One of the developers on the list, I forget who but it’s not really important, felt that adding such accommodation was akin to “polluting” one’s mark-up. A purist’s approach. I felt at the time — and still do — that this was perhaps worded too strongly. In a nutshell, I see no problem with replicating this type of browser behavior on a web page. In fact, after weighing the facts, I think it’s beneficial.
I must first consider who, how, and why someone will be using this link. The respective answers are anyone, doing it with a keyboard or input device, and naturally, to get to the top of the page quickly. This is getting easy. If the link is there, it can be used — user’s choice. Now what if it’s not there? How does that change the situation? How is the user affected?
Short of re-loading the page, to anyone using a keyboard it means they have to use their Home key. Their options have been limited. Assuming they know they can hit their Home key — which is likely if they’re restricted to keyboard use — they have built in functionality they’re used to and will probably not be affected greatly. They also have the option of using shift+tab to go back, using the arrow key, ↑, to scroll up, or possibly using their Back key if they got to their current page location via a jump link. Some users can also use headings to navigate.
Pointer users don’t get off so easily. Consider this: The Home key is on the right side of the keyboard and if a person is using a mouse with his or her right hand, they have to remove their hand from the device, locate the Home key, and press it. This, of course, assumes they know they can do this. They can also use most of the other means mentioned above. Or, if they don’t choose to involve keyboarding they will scroll up the page with their browser’s scroll bar. But how easy is this? Let’s consider the content.
The type of content plays a role. If there are a lot of links on the page, offering a top link can be helpful. Just like jump links and list bypass links can be. No different. More importantly, though, is the quantity of content and how it affects the length of the page. A really long page such as a blog entry with lots of comments makes any upward movement, with exception to using the Home key, cumbersome. Back-tabbing can be murder, there may be lots of links and headings, scrolling up with the arrow key, ↑, can be slow, and trying to grab that little nib of a scroll bar with your pointer can be a challenge. I don’t like that. Give me a top link, please.
I mention a little nib of a scroll bar because it gets smaller as the page gets longer. I have a small amount of difficulty with this. But the limited physical size of this “nib” isn’t offset with my suggestion of using a “top” link. It, too, is a small pointer target (albeit better located in my opinion). The three-letter top link is a minimalist approach providing added functionality in a discreet way. It doesn’t have to be done this way. I know of a couple of sites that use decently sized images that serve as good visual examples. One is better marked than the other, both both are easier to click on. First look at the Web Standards Project (WaSP) site. Click the unintutively-marked wasp near the bottom of the page. Then check out the “Mod” arrow on Andy Clarke’s And All That Malarkey site. If these image links were embedded and used the
alt attribute this would do just fine. Unfortunately they don’t. Both use background images and neither is accessible as text if images are off. The latter actually contains no text at all. (If you’re going to offer this functionality with an image, please, make it an embedded image with alt text or a background image with accessible image replacement text.)
I use a mouse primarily, though I do use my keyboard a lot. And I happen to be one of those lucky geekish fellas who knows many of those wonderful keyboard shortcuts — but not all I’m sure. Yet, I will often use a top link if it is a long page and it’s available to me. I appreciate it, in fact. I don’t expect the developer to go to great pains in accommodating me, nor do I expect any fancy scripting, and I’m certainly not asking to reload the page (top links and other in-page bookmarks don’t do that). Just three simple letters is all I need.
Anyway, that’s my take on the matter. I used a heading for this post that might open this up to become a series of sorts. I mean there is text enlargement, print functions, heck, even jump links to consider. All of these can be considered a replication of browser behavior if added to a page by the poor beaten up developer. I will say now that I don’t think all of these examples should be replicated, but all should be really thought out before bringing down the axe on them too swiftly. Pure, clean mark-up is a good thing, but when mark-up itself is considered pollution maybe it’s time to take a second look and analyze the consequences. It’s one thing being a purist, but there should always be a reason for it besides being “pure.”