Hidden accesskeys Oct14 '05

Keyboard navigation, on the web, is a major accessibility benefit - and just darn convenient.

I’ve becomed more intrigued at implementing different ways to use the keyboard, to navigate web pages, and the browser.

Some browsers, like Firefox, already allow for keyword bookmarks, meaning you can use a custom word or phrase to "trigger" a specific web page.

This is ideal - but to make things even better - I’ve applied my own method of "keyword browsing" to web sites that I am developing.

What I do is use regular links, with an accesskey applied, and with a display of none, in CSS.

<p style="display: none;">
  <a href="/my/hidden/url/" accesskey="E"></a>
</p>

This allows me to "jump around" to different sections of my site, without always having to use the mouse.

I often include a half-dozen, or so, "hidden" links on my pages - for easy navigation, between dozens of different sections.

What do I mean by "hidden" sections?

What are "hidden" sections, you wonder? I’m referring to any section that, perhaps, is not displayed in the main navigation, for whatever reason.

On one corporate site I am working on - there are many sections that are for a certain clients’ eyes only. These sections aren’t advertised in the main navigation template.

Now... these sections are not password-protected, so anyone (with knowledge of the exact URL) could still type in the address, and get to the page. But, that’s not a major issue, because I’m not displaying sensitive data - only client-specific products.

Password-protected pages

But... even if the "hidden" link is password-protected, it’s still a great idea to use hidden accesskeys - because even if a user finds the address, they still need a password.

An example of a particular product page may look like this:

http://www.mysite.com/products/3452

This URL is public.

If there is an admin page set up, for the staff to edit product info, the address could look something like this:

http://www.mysite.com/admin?page=products&productid=3452

... where /admin/ is a password-protected directory.

The point is... when the public product page is dynamically written out, there could also be a "hidden" link, containing an accesskey, which goes directly to the admin page, for that specific product:

<p style="display: none;">
  <a href="/admin?page=products&productid=3452" accesskey="E"></a>
</p>

Hitting the keyboard combination, ALT + E (Windows), or CTRL + E (Mac), staff members are taken directly to the admin page for that product.

For those staff members eligible to edit product information, they should have already saved their password in the brower’s memory, so they wouldn’t have to re-type their password every time they edit a product.

Categories: CSS , Web Development , XHTML

Add Feedback (view all)