Enhancing Usability with Pseudo Protocols
Often, when enhancing web pages with scripted behaviours, you find yourself creating anchor (link) tags as convenient event triggers. As these links usually have no meaningful href attribute, they provide little or confusing feedback to the user.
Take, for example, a typical web page with a scripted dynamic show/hide collapsing box. Adding a trigger link statically to the markup for this would be inappropriate, as it would exist solely for the purpose of a scripted event when JavaScript to handle the event may or may not be available.
The usual solution for this is to insert the link via JavaScript and give it some benign href attribute so that it looks and behaves like a normal link, perhaps empty, or with an empty statement using the JavaScript pseudo protocol:
<a href="#">Toggle Panel</a>
<a href="javascript:;">Expand List</a>The problem with this is that the status bar now gives no meaningful feedback as to what will happen when the link is clicked.
Screen readers can also struggle with fudged href links; in some configurations the link text is read in combination with the href attribute. So having a random or absent href value in this scenario could make the links quite confusing (see YUI blog article on empty links).
Alternative solution: use a pseudo protocol
By using an intuitively named pseudo protocol in the link href, we can provide useful tailored information for the user.
Pseudo protocol names take the format of any word followed by a colon. However, be careful to not clash with any other existing native protocols (mailto:, data:, :javascript, http: etc.) or user defined protocols on your site. This would be rare but is possible in more recent Gecko browers.
For demonstration, I’ve created a generic pseudo protocol named ‘action’ for all scripted event triggers; the following examples illustrate how this would look:
<a href="action: Toggle panel">Would you like to see more?</a>
<a href="action: Show slide 2">2</a>
<a href="action: Click to process your request,
then we'll then redirect you to www.amazon.co.uk">Place order</a>
The status bar now displays helpful information when links are hovered or focused with the keyboard:
Drawbacks
Using pseudo protocols in this way means you’ll have to cancel the browsers’ default action when links are clicked, or the browser will get confused because you’re asking it to use a protocol it doesn’t understand. This shouldn’t be a problem in this case, though, as these pseudo protocol links should exist purely as scripted event triggers.
Tagged with:
Comments off
Comments are automatically turned off after 2 weeks
2 Comments thus far
Graham B
24th Nov ’09 at 11:34pm
Rather than create a custom protocol to be cancelled later, why not just use ‘#’ followed by the descriptive text? ‘#do something’ isn’t any less clear than ‘action: do something’, and providing there is no matching anchor with that name, the browser should fire the click event but won’t have any default action to cancel.
Pete
24th Nov ’09 at 11:52pm
@Graham
That’s certainly possible too, but I think I prefer not to use the ‘#’ marker for this because it reads as a page fragment link. It’s a small difference, but I think using a named protocol is just more user-friendly.