Enviar artigo por e-mail:

Nome do remetente:

E-mail de destino:

Comentário:
§
Restam-lhe  caracteres

|Sair

Script and noscript tags.  Case study 2 – The back button

A client once asked me to add a back button on the end of every post to get back to the corresponding category listings.

The fist thought that occurs is to use JavaScript and the classic history navigation:

href=”javascript:history.back();”

There’s nothing wrong here, it works pretty fine, except if you want to keep your site accessible…

Case study:

As mentioned in a previous article. the basic rules of accessibility state that you should always provide alternative content to users no able to access it, if you rely only on scripts to deploy it.

Using the <script> and <noscript> tags.

If you are not familiar with the use of this HTML tags you should read my previous article on this subject, here: http://www.wdmac.com/word-press-accessibility-the-noscript-attribute

Accessibility rules state (Roughly) “that no hyperlink should be accessible trough a script only”.

So we need to find an alternative to the ONLY. A simple way to do it, is to use PHP to print the ascendant URL on the HTML, without the need for any client-side scripting.

We could use:

<?php echo “<a href=’$HTTP_REFERER’>back</a>”; ?>

And this will take us back to where we’ve navigated from.

However one question might pop in to your mind now:

- If this does the same as the JavaScript, and it’s not Accessibility obtrusive, why don’t we use it in the first place and forget about all this alternative content crap?

Good question! Yes that was my thought too! But then I tried, and found out “the hard way” why it couldn’t be that way. It will work for most cases, it just doesn’t for ALL cases.

In my particular case I had a flash navigation menu that drove my users to that post.

So what happened was, when the back button was just coded with the PHP method, every time a user clicked back, he’d go back to the “previous” page as expected. However, if he was using Internet Explorer, he’d go back, not to the previous page, but to the Flash movie itself (the nav menu) on the previous page alone.  Shocking, but true!

This is probably a IE Flash player bug, but we have to deal with it. This calls to action, and I needed to find a solution since I couldn’t afford to have all the Internet-Explorer-users having a bad experience in my website.

I needed something that worked on every major browser.:- The solution was to mix both methods.

This brings us back to the original JavaScript solution, and the need for that accessibility tweak.

We shall use JavaScript on the back button, but we shall also provide a noscript PHP alternative, this way we will have a standard “go back method” maintaining the accessibility of our website.

And the code to do it is like this:

<?php

echo “<script type=’text/javascript’>document.write(\”<a href=’javascript:history.back()’ class=’backLink’ title=’Go back’>Go back’</a>\”);</script>

<noscript>

<a href=’”.$_SERVER['HTTP_REFERER'].”‘ class=’backLink’ title=’Go back’>Go back’</a>

</noscript>”;

?>

Fact: To use the JavaScript history method, we need to have a noscript alternative. And in order to use the <noscript> tag we absolutely need to have a preceding <script> tag. So to do this, we have to nest the shorthand href=”javascript:history.back();” into a more “formal” script syntax, like shown above.

NOTE to Word Press Developers:

If you use word press, you probably don’t want the back button to appear in the main page, or to appear in your listings.  (Assuming that you  can code or act upon your WP theme)

You’d want it to show only in single posts, or in pages, where you can eventually return to the precedent listing to continue browsing.

So to the code above we need to add a condition to check if this is true or not.

We will check if the code is being rendered inside a single post, or a page, and only then the back button will show. On every other case it won’t.

<?php

if(is_single() || is_page()){

echo “<script type=’text/javascript’>document.write(\”<a href=’javascript:history.back()’ class=’backLink’ title=’Go back’>Go back’</a>\”);</script><noscript><a href=’”.$_SERVER['HTTP_REFERER'].”‘ class=’backLink’ title=’Go back’>Go back’</a></noscript>”;

}

?>

This is just a simple tweak that I use on a daily basis, and that I hope will be helpful to you.

Again this should not be considered just by what it is, but for what it means in a wider perspective.

Be creative. Use you skills to provide effective alternatives to all your scritp-dependent contents.

Have fun!

1 Comment »