Replacing form buttons with links – the accessible way

Have you ever wanted to replace those boring standard web browser buttons with something nicer? There are a few different ways of approaching the problem, including styling the buttons with CSS and using image buttons. There are some issues with those approaches however, and sometimes you may not even want a proper button, but instead use a regular text link. This is why my favorite solution is to replace the buttons altogether – with links that can then be styled anyway you want.

The answer to replacing form buttons with links, while keeping the form accessible to everyone, is to not actually remove the buttons, but rather just hide them with JavaScript and CSS. The links that are used as replacement are added with JavaScript too, which means that the markup will remain intact. This makes the form degrade gracefully in cases where JS is not available.

Using links doesn't mean you can't have the appearance of a button by the way. You're free to style them however you want, with background images etc. Here is an example (in Swedish), and another one, of what it may look like.

To help achieve this I'm using jQuery, a lightweight but powerful JS library. The buttons I'm replacing in the following example are Drupal's Log in and Comment buttons, but the code can easily be adapted for any button in any form.

The code:

/**
 * Replace specific buttons with links on page load.
 * Change these lines to match the buttons you want to change.
 */
$(document).ready(function() {
  // Preview comment button:
  mytheme_form_button_replace("#comment-form", "input#edit-preview", "Preview comment");
  // Post comment button:
  mytheme_form_button_replace("#comment-form", "input#edit-submit", "Post comment");
  // Log in button
  mytheme_form_button_replace("#user-login", "input#edit-submit", "Log in");
});

/**
 * Replace a form button with a link.
 * The button will be hidden, not removed.
 *
 * The link will get a class like this:
 * "form-link form-link-button-[button_id]"
 */
function mytheme_form_button_replace(form, button, text) {
  // Prepare class for this link:
  var class = "form-link form-link-button-"+$(form).find(button).attr("id");

  $(form).find(button).after("<a href=\"javascript:mytheme_form_submit('"+form+"', '"+button+"')\" class=\""+class+"\"><span>"+text+'<span></a>');
  $(form).find(button).css({display: "none"});
}

/**
 * Submit form by programatically clicking on the specified button.
 */
function mytheme_form_submit(form, button) {
  $(form).find(button).click();
}

Replace the text "mytheme" in the code with whatever you prefer. Copy and paste the whole thing into a new or existing JS file that will be included on the pages where your forms are. If you use Drupal, you'll probably want to name the file something like mytheme_form_links.js and include it by putting this line near the top of your template.php file:

drupal_add_js(path_to_theme() . '/js/mytheme_form_links.js', 'theme', 'footer');


Before moving on, change the first lines of code where the specific forms and buttons are defined. Then clear your browser's cache and do a reload. Your buttons should now be replaced by text links!

Once that's working, you may want to add some styling to the links. Here is an example of how you can use the classes applied in the JS:

/* General styling */
form a.form-link {
  display: block;
  width: 100px;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  background-image: url(images/button_background.png);
}

/* Form specific styling */
#user-login a.form-link {
  background-image: url(images/button_background_login.png);
}

/* Button specific styling: no link text, a proper image button */
#comment-form a.form-link-button-edit-submit {
  background-image: url(images/button_postcomment.png);
  overflow: hidden;
}
#comment-form a.form-link-button-edit-submit span {
  display: block;
  position: absolute;
  left: -1000px;
}

That's it. If something's not working, let me know!

Good luck!