Friday, June 10, 2005

Web development notes: Using access keys effectively on mobile-friendly pages

Regular readers know by now that I'm currently developing my first MovableType templates, in preparation for finally moving my personal journal off my Geocities page this summer (where it's been for six years) and over to my main site, where I'll finally be able to automate the entry and posting process (and also be able to send updates for the first time from my palmOne Treo, like what I can currently do with this Blogspot page). One of the new templates I'm designing is one for mobile devices, which should help quite a bit for all you poor souls out there like me who are doing all their web surfing through a Palm, PocketPC or Blackberry; one of the things I just successfully implemented and tested is a pervasive use of "access keys" in the mobile version, which I thought I'd explain how to do here, for others who would like to take advantage of this truly powerful option for mobile-friendly sites.

The "accesskey" attribute for HTML was originally designed years ago, to let people designate keyboard shortcuts on a web page for users of desktop computers. Basically, the attribute can be used on any anchor tag or form tag, and looks like the following in your code:

<a href="newpage.html" accesskey="1">new page (or press 1)</a>

...with whatever number (or any keyboard character) you want to use. Then if someone on a Windows computer types Alt-1, or a Mac owner types Cmd-1, the browser will automatically load that link for them and take them to the new page. But the beauty is that the developers of most mobile web browsers have activated access keys as well, which means that simply pressing this key on a phone's keypad will accomplish the same exact action too. So now I have all the major sections of my mobile version tied to access keys, so that a user can hop around to all the different areas without ever having to use their stylus or touch their screen; clicking '3' will take a person to my "about" page, '4' to the mobile version of my publishing comany, '5' to my contact page, etc. (Granted, there are no actual pages there yet for people to view; but the automatic jumping and loading process using access keys is definitely working.)

To let people skip from one part of a page to another part of the same page, simply use an anchor tag without a link, like so:

<a name="top" accesskey="1></a>

I use two such anchor tags in my mobile template, for example, one at the top of the page and one at the bottom. Since the mobile versions of web pages are insanely longer than the desktop versions (because of the tiny little screens), having such anchors can be a real godsend for mobile-device owners who wish to quickly jump straight to the top or the bottom of a page.

Access keys - learn 'em, love 'em, use 'em!