Some links with accesskeys

• About Us
• Services
• Products
• Contact
• Search

The code explained

View source if you want to grab the code in one go.

function underline() {
  var nav = document.getElementById('xmp-nav');
  var navlinks = nav.getElementsByTagName('A');

We select all the links in our xmp-nav list.

  for (var i = 0; i < navlinks.length; i++) {

Loop through all the links.

    var accesskey = navlinks[i].getAttribute('accesskey');

Pull out the accesskey defined for the link.

    if (accesskey) {
      var link = navlinks[i];
      var linktext = link.childNodes[0].nodeValue;

Get the text of the link.

      var keypos = linktext.indexOf(accesskey);

Find the first instance of the assigned accesskey in the link text.

      var firstportion = linktext.substring(0,keypos);
      var keyportion = linktext.substring(keypos,keypos+1);
      var lastportion = linktext.substring(keypos+1,linktext.length);

Isolate the accesskey text and the bit of text before and after the accesskey.

      link.childNodes[0].nodeValue = firstportion;

Rewrite the link text with only the bit of text before the accesskey.

      var s = document.createElement("span");
      var span = link.appendChild(s);

Create a span element and attach it to the link

      var keyt = document.createTextNode(keyportion);
      span.appendChild(keyt);

Write the accesskey letter inside the newly created span.

      var lastt = document.createTextNode(lastportion);
      link.appendChild(lastt);
    }
  }
}

Append the remaining portion of the link text to the link.

window.onload = function() {
  underline();
}

Call the underline function when the document loads.