Skip Navigation | Home | Code Samples | Articles | Links | About | Contact Me | Make a Payment

Accessible Bookmarklets

Bookmarklets, in the form developers currently implement them, are inaccessible. While their audience is almost always advanced developers, it doesn't excuse this oversight. With a little bit of planning, we can turn those inaccessible bookmarklets into accessible bookmarklets. The solution involves making the bookmarklet code plain, old text for non-JavaScript users while giving our JavaScript-enabled users the conventional link they're used to right-clicking to add to their bookmarks/favorites.

This solution starts by placing each of our bookmarklets within a pre element. We give this containing element a title that will represent the text to be used for the link. We also give this containing element a special class. In this example, we'll use bookmarklet as our class. Our pre element will contain the bookmarklet script. This takes care of our needs for our non-JavaScript users. See figure 1 below:

<pre class="bookmarklet" title="Resize - 800x600">javascript:resizeTo(800,580);void(0);</pre>

In order to address our JavaScript-enabled users, we'll need to create a function designed to find all bookmarklet classed pre elements and work our magic on them. See figure 2 below:

function convertBookmarklets()
{
  if(document.getElementsByTagName)
  {
    var oPre = document.getElementsByTagName('PRE');
    for(var i = 0; i < oPre.length; i++)
    {
      oA = document.createElement('A');
      oA.innerText = oPre[i].getAttribute('title');
      oA.setAttribute('title', 'Right-click and select "Add to Favorites/Bookmarks"');
      oA.setAttribute('href', oPre[i].innerText);
      oPre[i].replaceNode(oA);
    }
  }
}

The only thing left is to set this function up to be called via an onload event handler or at the bottom of our document. I'll leave that portion of the implementation up to you. See an example of an accessible bookmarklet below.

javascript:resizeTo(800,580);void(0);