A simple jQuery-Script for creating SEO-friendly and accessible TabView-controls

In process of migrating this website from Prototype JS to the jQuery framwork I also had to rewrite/migrate my little Prototype-JS based TabView script, which I use for my document editor form. Two and a half year later and some lessons learned I didn't just migrate it, but made is a little bit more usable and added browser-history-support – so that you are now able to use your forward- and back-buttons while navigating through the different tabs.

The JavaScript function I developed here easily turns any <ul>...</ul> or <ol>...</ol> list into a simple, SEO-friendly Tab-View control like the one displayed below (↓).

The structure of the underlying HTML and the process of creating the tabbed navigation is still the same as in the previous Prototype-based version – and requires nothing more than a <ul>- or <ol>-list to start with:

<ul title="[TabView Name]">
      <li title="[Tab Name 1]"> ... </li>
      <li title="[Tab Name 2]"> ... </li>
</ul>

Here is a short video demonstrating how the TabView-control works
and what it is capable of (or see for yourself and play with the demo):

 

Benefits of the "Simple-jQuery-TabView"

Tab-Views in general are a great way of displaying and structuring big amounts of information using very little of the users' screen-estate,
but it is important that the intention of making your web pages prettier with a TabView-control does not destroy the underlying information-hierarchy:

User-interface requirements may not have any influence on the structure of your web-pages!

You would't put the headline of a Word-document at bottom, just because it looks prettier? Would you? So use Tab-View controls like this one here, that can turn your <ol>...</ol> and <ul>...</ul> lists into a nice and clean Tab-View.

1. SEO-friendly

   • Ordered and unordered lists are standard HTML elements for structuring data.
     The content of <ol>...</ol> and <ul>...</ul> lists that can easily understood by search-engines and other web-crawlers focusing on the structure and outline of a HTML-page – rather than the look & feel of the information.

2. Accessibility

   • Besides search-engines and web-crawlers, ordered and unordered list are also a great way to display information to humans using text-only browsers or screen-readers, because the information is clearly structured.
     Increasing the accessibility will also increase your search-engine friendliness; because search-engines work just like humans using screen-readers or text-browser for reading the information on your website:
     From the top to the bottom; reading the headline first, then the sub-headline and if they are still interested in what you have to say, they will read the content of that very section. And if you mix up that Find out more about Web Accessibility on the WebAim-Website: http://webaim.org.

3. Browser-History Support

   • The "Simple-jQuery-TabView" implements Ben Alman's Hash-Changed event jQuery-plugin in order to able to react on changed anchor-links.
     This enables you to use your browsers' back and forward buttons for navigating through the different tabs of the TabView-control. And this feature allows you or others to set deep-links into the content of your TabView-controls.

     Example:
     Simple-jQuery-TabView-Demo.html#TabView1=Tab2

4. Lightweight

   The jQuery-TabView-control requires nothing more than a small JavaScript file ("tabview.js") and an even smaller CSS file ("tabview.css").
   
   • Uncompressed & Unminified (tabview.js, tabview.css): < 13KB
   • Minified (tabview.min.js, tabview.min.css): < 7KB
   • With GZIP compression activated it's not even worth mentioning ;-)

5. Easy to implement

   When are already using jQuery, you only need to add the JavaScript file "tabview.js" and the Style-Sheets "tabview.css" to your web page:

   <link href = "tabview.css " rel="stylesheet" type="text/css" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
   <script src="tabview.js" type="text/javascript"></script>
   <script type="text/javascript">
      new TabView($('body>ul:first'));
   </script>
   

Implementation Steps

The implementation is easy as pie:

1. Add the Style-Sheets (tabview.css) to the <head>-section of your page:
   

   <head>
      <link href="tabview.css" rel="stylesheet" type="text/css" />
   </head>
   

2. Add the following JavaScript-References to the bottom of your page:
   

   <body>
      ...
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
      <script src="tabview.js" type="text/javascript"></script>
      <script type="text/javascript">
         new TabView($('body>ul:first'));
      </script>
   </body>

Usage

Once you've loaded jQuery and the TabView JavaScript (tabview.js) you can create new TabView instances by passing one or more list elements (using a jQuery-selector) to a new TabView-object:
 

<ul title="TabView 1">
   <li title="Tab 1">Lorem Ipsum</li>
   <li title="Tab 2">Semper non lectus</li>
   <li title="Tab 3">Dictum at volutpat</li>
</ul>
 
<script type="text/javascript">
   new TabView( $('ul:first') );
</script>

If you like to unload the TabView-control you can do so by simply calling the Destroy()-method:

<script type="text/javascript">
   var tabViewControl = new TabView( $('ul:first') );
   ... 
   tabViewControl.Destroy() );
</script>

Configuration & Customization

You can customize the look of your TabView-control using these options:
 

<script type="text/javascript">
   new TabView( $( 'selector' ), { width: "500px", activeTextColor: "#FFFFFF", inActiveTextColor: "#000000", activeBackgroundColor: "#243356", inActiveBackgroundColor: "#FFFFFF", enableLog: true });
</script>