< jQuery Accessible Tabs - Wie man Tabs WIRKLICH zugänglich macht | Think Visibility - SEO and more >

2009-02-07 jQuery Accessible Tabs - How to make tabs REALLY accessible

translations: german

While a lot of Tabs-Scripts claim to be accessible it turns out, most of them are really not. While developing this jQuery Plugin with my coworker Artur Ortega, we tried to find a single existing Javascript powered Tabs-Interface that Artur, using his Screenreader, would actually be able to use properly. We eventually gave up the search.

The one Problem even the better ones have is the missing Feedback of the content change. Most of the tabs scripts change the style of the tabs and the visibility of their corresponding content but leave the user just where he was - on the tab-link - not knowing that something happened (just like clicking on a, ever so popular, inactive link (a href="#")).

This is also the big difference this Script makes. While the user experience for users without visual impairment is exactly the same, there's a lot happening under the hood. But let's start from the beginning.

jQuery Accessible Tabs uses a very simple and flexible HTML markup as it's base to build upon. All it needs it's a wrapper containing Headlines and content elements one after the other. This provides a nice non-javascript fallback that does not look like something is missing or broken.


        <div class="tabs">
            <h2>some dummy headline</h2>
            <div class="tabbody">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

                <h3>Lorem ipsum</h3>
                <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p>

            </div>
            <h2>another dummy headline</h2>
            <div class="tabbody">
                <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p>

                <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p>

            </div>
            <h2>anything else</h2>
            <div class="tabbody">
                <p>Here could be your content</p>

            </div>
        </div>
     

A simple jQuery call then transforms this to the accessible Tabs:


        $(document).ready(function(){
                $('.tabs').accessibleTabs();
        });
     

To not only be accessible but also to be as flexible as possible the script allows configurations to be passed to.


    $('.tabs').accessibleTabs({
        // Classname to apply to the div that is wrapped around
        // the original Markup
        wrapperClass: 'content',
        // Classname to apply to the LI of the selected Tab
        currentClass: 'current',
        // Tag or valid Query Selector of the Elements to Transform the
        // Tabs-Navigation from (originals are removed)
        tabhead: 'h4',
        // Tag or valid Query Selector of the Elements to be treated as
        // the Tab Body
        tabbody: '.tabbody',
        // can be 'fadeIn', 'slideDown', 'show'
        fx:'show',
        // speed (String|Number): 'slow', 'normal', or 'fast') or the number of
        // milliseconds to run the animation
        fxspeed: 'normal',
        // text to indicate for screenreaders which tab is the current one
        currentInfoText: 'current tab: ',
        // Definition where to insert the Info Text.
        // Can be either 'prepend' or 'append'
        currentInfoPosition: 'prepend',
        // Class to apply to the span wrapping the CurrentInfoText
        currentInfoClass: 'current-info'
    });
     

So, why is this Tabs-Script more accessible than others?

The main thing this Script does better than the others is providing a click feedback for Screenreader Users. When the user clicks on one of the tabs there's actually a navigation going on on the page.

Every link in the tabs is pointing to an actually focusable content. To allow this, we create a named anchor inside of the tabs content. This anchor, as it has no href property, is not focusable by default though. To make it focusable we gave it a tabindex="0". Why 0? Because a tabindex of 0 does not change the natural tab flow of the page but it makes an element focusable which is not able to receive focus by default.


    <h4>
        <a id="accessibletabscontent" name="accessibletabscontent" class="accessibletabsanchor" tabindex="0">
            some dummy headline
        </a>
    </h4>
     

Inside of the named anchor we add the same text as the tab that was just clicked and wrapped it into a headline element. This provides a very nice user experience for screenreader users, as it nicely confirms that you actually jumped into a new content of the page.

The other thing that adds benefit for screenreader users is a little text that indicates the currently selected tab. It defaults to "current tab: " followed by the default text of the tab. For internationalisation reasons this text as well as the text position (either before or after) can easily be configured.

Problem: Focussing hidden or recently hidden Elements

During the testing of the tabs we discovered a very interesting, yet very annoying, behaviour of the Screenreader Jaws (and probably others too). We wanted to focus the headline in the content of the current tab after clicking the tab which made the content visible. Everytime we tested, the Screenreader was unable to find the element to focus on and simply jumped to the end of the page or randomly somewhere else. We discovered that this is only happening when the focus target was recently hidden. This phenomenon is caused by the screenreaders virtual buffer, an internal copy of the actual DOM in which the Screenreader user navigates. The virtual buffer does regularly update itself from the Browser DOM but there's always a delay.

To work around this issue we used a different approach. The named anchor we're linking to is not actually in the hidden tab content but before it in the DOM of all of the contents and hidden offscreen. Also actually every link in the tabs is pointing to the same anchor. We're simply dynamically rewriting the headline text on the fly and show and hide the contents accordingly. The user experience is just the same. The screenreader user clicks on the tab, follows the link and finds the linked content starting with a corresponding headline.

You can see the script in action in in many different Examples here. This plugin is also part of the The CSS Framework Yaml

You can download the latest version of this script including the demos here.

Update:

Jason Kiss wrote this excellent followup about how to make this even better

His enhancements are now also in the official repository

You can always find the latest Code in the Accessible Tabs github repository

Trackbacks
Weblog: matthias.yellowled.de
Tracked: Jun 25, 11:54

Comments

IsofarroDirk, thanks for a wonderful instructive writeup of how to build an accessible tab interface. There are some excellent pointers here about what is involved in creating an accessible interface; it's not just being able to tab to various elements on the page, but also informing the visitor where they are, or the context they are in.

This is another useful step forward after the marvelous work you and Artur did on the Yahoo! Finance Currency Converter.

Just goes to show when you pair up a world class web developer who knows lots about accessibility with an experienced screen reader user who is an engineering guru, the combination of ideas and the end result are great examples of solving real accessibility problems.
#1 Isofarro (Homepage) on 2009-02-07 12:49 (Reply)
Dirk GinaderWow - I'm really flattered.
Thanks Mike.
Coming from you this really means a lot :-)
#1.1 Dirk Ginader (Homepage) on 2009-02-07 12:56 (Reply)
Ross BrunigesGreat stuff - testing with someone who really benefits from this must also be great. Would e awesome to have those kind of resources more openly availiable in every office....
#2 Ross Bruniges (Homepage) on 2009-02-07 13:42 (Reply)
Dirk GinaderThanks Ross,
I completely Agree - Working with Artur clearly is a Web Developers dream.
I highly recommend it! :-)
#2.1 Dirk Ginader (Homepage) on 2009-02-07 13:48 (Reply)
YoanYes, very clever a good alternative to the Aria-based one that is on yuiblog.

One small improvement would be to do some events delegation there:

<br />
$(el).find('ul li a').each(function(i){<br />
   $(this).click(function(event){<br />
 


Event delegation can become nasty but at the end of the day, you like the flexibility it offers you: http://gist.github.com/29390 (btw, jQuery offers a lot of handy tools to make it cleaner than that).

PS: comment authoring could be better... btw, it's [/geshi] and not [/lang].
#3 Yoan (Homepage) on 2009-02-07 14:27 (Reply)
Dirk GinaderThanks for the hints Yoan.
I usually use event delegation all the time. I totally shall implement it in the next release.
I fixed the bug in the geshi description text. Geshi really is a pain yet it seems to be the best code colouring plugin for this blog though...
#3.1 Dirk Ginader (Homepage) on 2009-02-07 14:56 (Reply)
AaronThis is GREAT!

Any way to have it autorotate through the tabs?

Thanks!
Aaron
#4 Aaron on 2009-02-23 22:36 (Reply)
Dirk Ginaderthanks Aaron,
at the moment there is no function to rotate the tabs. This newsticker script I did a few years ago might be what you are looking for: http://blog.ginader.de/dev/listnewsticker.html
#4.1 Dirk Ginader (Homepage) on 2009-02-23 23:44 (Reply)
Piotr Usewiczhttp://livepipe.net/control/tabs
#5 Piotr Usewicz (Homepage) on 2009-03-02 10:23 (Reply)
Dirk GinaderIf you think that these Tabs are accessible I am sorry to disappoint you Piotr.
They have just exactly the same Problem (staying on the Tab-Link after the click) than the others...
#5.1 Dirk Ginader (Homepage) on 2009-03-02 10:48 (Reply)
Joe McCannVery nice. As the technology progresses, so should the coding practices. I integrate all of the ARIA specs with my apps now and give the screenreader user an anchor tag thrown off the visible page that reads the recommended browser AND screenreader configuration and version. If the user has JAWS 10 and is using FF3 or IE8, then they will get all the ARIA-enabled stuff.
#6 Joe McCann (Homepage) on 2009-03-02 18:55 (Reply)
SorrActually is very easy to create a tab-based web application using only the examples on the jquery page!
#7 Sorr (Homepage) on 2009-03-03 10:49 (Reply)
Al SparberIt doesn't work very well in JAWS 10. Pressing a tab does not automatically lead to the text in the content panel being read. One must press the down arrow key many times to reach the content. I don't think the typical JAWS user is going to know what to do. We are currently testing a new widget which works similarly except that repeated arrow keystrokes are not necessary - it only requires one. If that's an acceptably accessible solution, then we have it made in the shade :-)

I am not an experienced JAWS user so perhaps I am missing something. I am running JAWS in default mode which I imagine most users do.
#8 Al Sparber (Homepage) on 2009-03-04 01:11 (Reply)
Dirk GinaderThanks for you very interesting comment. We're investigating this issue at the moment.
#8.1 Dirk Ginader (Homepage) on 2009-03-09 11:11 (Reply)
David FaroughI also experienced the focus issue you mentioned with Jaws 10.0.1154 using Internet explorer 7, however If I used FireFox 3.5.2, the focus was taken directly to the content and it was possible to hear the content using the Jaws SayAll function or by arrowing through the content. Also I tried these pages using the Jaws 11 beta which also worked correctly in Internet explorer 7. I have not as yet tested with System Access, but it will be interesting to see how System Acceess handles these tabs.
#8.1.1 David Farough on 2009-09-14 19:07 (Reply)
DomenicCanadaWe experienced problems with the Tabs when we tested with JAWS. had to use the down arrow key to get into the content under the tabs. overall keyboard navigation seemed to work fine, it was only when we tried to navigate with JAWS.

Would this be a barrier to someone or can we include hidden navigation info for screen reader users (use the down arrow key).

Any suggestions?
#9 DomenicCanada on 2009-03-06 18:05 (Reply)
Dirk GinaderThis sounds an awful lot like the same Problem Al reported too. Are you also using Jaws 10?
We're investigating this issue and try to work out an solution that does not need any extra handling.
#9.1 Dirk Ginader (Homepage) on 2009-03-09 11:14 (Reply)
Wim RijndersThanks for the tabs code. It works, but I ran into the following issue:

My tab contents contain list of links. This conflicts with the following selector in jquery.tabs.js:

$(el).find('ul>li>a').each(function(i){

I solved it by adding a class 'links' on my own lists:

$(el).find('ul:not(.links)>li>a').each(function(i){

...but I find this unsatisfactory.

I propose that you add a class to the ul-tags in the tab list, so that the tabs-selector can be made more specific. This class could be made configurable through the defaults mechanism.

Hope this is of use.

Regards,

Wim.
#10 Wim Rijnders (Homepage) on 2009-03-12 13:04 (Reply)
Dirk GinaderThanks a lot for you feedback Wim,
I already been told about this issue and it's already fixed in my internal version and will be in the upcoming new release (together with a few very nice new features ;-) )
#10.1 Dirk Ginader (Homepage) on 2009-03-12 13:19 (Reply)
Wim RijndersOK, great. I'll keep up to date.

Perhaps you are interested in seeing what I did with the Accessible Tabs: http://wimrijnders.nl/album/2009/oma_beppe/index.rb

I used them for selecting the year and displaying the subcategories per year in my photo album. They don't look like tabs at all but they fit my intention nicely.

Regards,

Wim.
#10.1.1 Wim Rijnders (Homepage) on 2009-03-17 09:54 (Reply)
Bruce SklarDirk,
These are great and I'm interested in using it. How would I go about have the changing the active via javascript in a function so that I change the active tab in response to an onclick event?

Thanks again.
#11 Bruce Sklar on 2009-03-26 14:26 (Reply)
Dirk GinaderThe upcoming next Version will have that feature. It will be released within the next 2-3 weeks :-)
#11.1 Dirk Ginader (Homepage) on 2009-03-26 16:44 (Reply)
DeborahJust following up - is there an update on when the next version is expected?
#11.1.1 Deborah on 2009-04-18 01:35 (Reply)
Dirk GinaderThanks for asking Deborah, I'm pretty far into the next version but I'm missing the time to actually finish it at the moment. I hope to find the time within the next couple of weeks though. Stay tuned ;-)
#11.1.1.1 Dirk Ginader (Homepage) on 2009-04-18 12:25 (Reply)
DeborahThanks for the update. Looking forward to checking it out. Thanks for your continued work on the next version.
#11.1.1.1.1 Deborah on 2009-04-18 13:03 (Reply)
DeborahJust checking to find out status on the next version.
#11.1.1.1.2 Deborah on 2009-06-25 15:11 (Reply)
Karel ZemanI just wanted to mention that I have revised the plugin lately so that it conforms to the proposed jQuery plugin construct.

This means that the syntax slightly changed: $('#container').tabs();

This also means that one can now use jQuery’s capability to find elements in the DOM tree (and need not to rely on an id) and also chain methods.
#12 Karel Zeman (Homepage) on 2009-05-09 15:21 (Reply)
Hung BuiHi,

This is really interesting and i am trying to use this method for my website.

I have changed the javascript to find the last in the menu and apply class "last" to it.

Just wondering if anyone know if we could change the last so that it link to other page.

Thanks,
Bui
#13 Hung Bui (Homepage) on 2009-05-18 09:33 (Reply)
Dirk GinaderThanks for the hint Hung. I added this feature request here: http://github.com/ginader/Accessible-Tabs/issues/6/find and will implement this soon.
#13.1 Dirk Ginader (Homepage) on 2009-05-18 10:51 (Reply)
Hung BuiThanks Dirk ;D

I tried to workaround


>> to add the class "last" into the last :

$(el).find("ul>li:last-child").addClass("last");

>> to change the url for the tag

$(el).find("ul>li:last-child").find("a[href]").attr('href','http://www.sailboatvn.com/');

but when I clicked on the last link.. it does not take user to anywhere ??
#13.1.1 Hung Bui (Homepage) on 2009-05-18 12:45 (Reply)
Dirk Ginaderchanging a link in the tabs does not work because I'm using preventDefault() to avoid the anchor actually jumping to the link target and use focus() instead. This makes perfect sense with tabs which are supposed to only show and hide elements on the page. Misusing one of the links to actually redirect to another page breaks the expected behavior and should better not be done. You may want to rethink this behavior and maybe set the link to the other page from inside the tab contend instead.
The "first" and "last" classes are a good idea though :-)
#13.1.1.1 Dirk Ginader (Homepage) on 2009-05-18 12:52 (Reply)
Web DesigningGot it...it worked well :-)
#13.1.1.1.1 Web Designing on 2009-10-01 06:17 (Reply)
Mats ErikssonMaybe I am missing something here, I just need to verify this:

It seems to me that the anchorlink works in the same way any anchorlink do - the browser scrolls to the anchor position. For a non-screenreader user, this is neither optimal, nor a standard way in how tabs work. Your tabs are really accessible, but to me, not quite optimal.
#14 Mats Eriksson on 2009-06-05 09:54 (Reply)
Dirk GinaderHi Mats,
thanks for your Feedback. The main difference between the default anchor behavior and the technique used here is that setting the focus() to an element does not make this element jump to the top of the page (like an in-page-anchor annoyingly always does). It will only scroll the page when the focused element is currently not in the viewport. It will not change anything otherwise.
#14.1 Dirk Ginader (Homepage) on 2009-06-05 11:01 (Reply)
Mark LopeZHi, Good Work there Dirk.I have a question can bots or spiders crawl and read it? As its JavaScript it might be little difficult for bots to crawl it?
#15 Mark LopeZ (Homepage) on 2009-07-21 06:53 (Reply)
Dirk GinaderHi Mark, as Javascript is not using any content that is not already in the HTML without Javascript this is not an issue. As long as you use proper Progressive Enhancement you can be sure that there's no SEO impact.
#15.1 Dirk Ginader (Homepage) on 2009-07-21 09:03 (Reply)
Web SolutionsWell thanks for using this programming stuff. i love to share this concept in my future projects.
#16 Web Solutions (Homepage) on 2009-07-23 05:46 (Reply)
JhonHi Great work ! Can we create site map in xml as the in the html , and what is most preferable method to create a site map for a website .
thanks for the important information.
#17 Jhon (Homepage) on 2009-08-06 12:39 (Reply)
Web DesigningHi,

It is superb, I really asked my friend for a similar tabs script but it seems more compact and efficient. Do you plan to add more features to it or any other updated release?
#18 Web Designing (Homepage) on 2009-08-18 20:03 (Reply)
TJHas anyone found a way for the tabs to retain their selection during a page postback? I'm using these tabs on an ASP.NET page specifically for their accessibility. However, during a postback, the tabs reset to the default position.
#19 TJ on 2009-09-23 16:14 (Reply)
Dirk GinaderThis feature is not yet implemented but I added it as feature request to the github project: http://github.com/ginader/Accessible-Tabs/issues/#issue/10
#19.1 Dirk Ginader (Homepage) on 2009-09-23 17:23 (Reply)
TJHey Dirk,

I grabbed the latest from github.com and I saw that you already implemented the function to select a tab via an index. Thus, I was able to retain the tab selection with a hidden field value by simply saving the index of the tab.

So, in my .aspx page I added this to keep track of the last selected tab during the last postback:


To show the selected tab I added this just below the declaration of the tabs:
$(".tabs").showAccessibleTab($("#hfSelectedTab").val());

In my jquery.tabs.js file I added this just below the $(this).click function:
$("#hfSelectedTab").val(i)


It works great but I did run into a error that I worked around. In the showAccessibleTab method, I made the following modification:
var links = el.find('ul.' + o + '>li>a'); //Modified from 'ul.' + o.options.tabsListClass + '>li>a'


Just thought I'd share this with you. It wasn't the cookie solution you proposed for the feature but my requirements were to solve this without the use of cookies.

Thanks for your work here!
It was a big help in getting our app 508 compliant.
#19.1.1 TJ on 2009-09-24 18:28 (Reply)
Dirk Ginaderawesome! :-)
#19.1.1.1 Dirk Ginader (Homepage) on 2009-09-24 18:47 (Reply)
Jason DaiHi Dirk,

I'm testing out your Accessible tabs plug-in and it works great so far. I just had a question. In the example code provided, all of the content for the various tabs are located in one html page. Is it possible to have multiple pages, so one page has content for one tab and the next page has content for another tab?

This would be useful because I'm working on a page with a lot of tab content and it would be easier to separate the tab content into separate pages.

Thanks!
#20 Jason Dai on 2009-10-20 20:45 (Reply)
Dirk GinaderHi Jason,
thanks for the nice Feedback. I'm sorry but the feature you're talking about would be a big accessibility problem and therefore it is not and will never be implemented. If you need to/want to have the tab contents in separate files you should include them on the server side (i.e. SSI or PHP include) instead of in the client via ajax or frames.
#20.1 Dirk Ginader (Homepage) on 2009-10-20 20:54 (Reply)
jhonThanks for the update and for your continued work on the next version. I enjoy reading your blog
#21 jhon (Homepage) on 2010-01-31 18:36 (Reply)
LanceWhat happens if I don't want an animated transition between tabs? Absolutely brilliant plugin though, the perfect solution to creating tabs
#22 Lance on 2010-02-02 18:05 (Reply)
Dirk GinaderThanks Lance,
It's actually very easy to use the tabs without any animation. You just need to define "show" as fx and set fxspeed to null like this:

$('.tabs').accessibleTabs({
fx:'show',
fxspeed:null
});

Happy you like it :-)
#22.1 Dirk Ginader (Homepage) on 2010-02-02 18:54 (Reply)
LanceThanks for that, I was trying speed:0 that was my problem!
One other note, if I include an unordered list in the tabbody then the plugin takes this for the navigation. I changed it to have a unique ID by editing your plugin code for the time being, but since you have an option to customise everything maybe this is a good idea as well.
#22.1.1 Lance on 2010-02-03 13:57 (Reply)
Hung BuiHey Dirk,

I used this plugin and it works great.

Recently, i have spotted an issue with Safari Browser, when user clicks on one of the tab, its content flashing for a second and disappear.

Please take a look at the demo here:
http://www.quaycreative.com/portfolio/

Anyone know what is happening?

Thanks
#23 Hung Bui (Homepage) on 2010-02-23 14:20 (Reply)
JohnIs there a way to add buttons to the content area that allow for moving forward and backwards through the tabs? I know the user can move between sections by clicking on the H2 areas which make up for the top tab, but we would also like to add "Back" and "Continue" buttons to make the UI a little more intuitive. Thanks for any advice.
#24 John on 2010-03-01 20:41 (Reply)
Dirk GinaderThanks for the good question John. So far there is nothing to automatically create those buttons. You could add them manually and use the showAccessibleTab(index) function to open the tabs. This is not very elegant though.
I added your idea as new feature request to github:
http://github.com/ginader/Accessible-Tabs/issues/issue/12
#24.1 Dirk Ginader (Homepage) on 2010-03-01 21:54 (Reply)
Disainwow..! Useful information..thx Thank You for having us
excellent information, thank you thanks for the inspiration!
#25 Disain (Homepage) on 2010-04-15 03:04 (Reply)
MichielIs it possible to randomly focus a tab on page load? I've got 4 tabs on my homepage and I'd like to show my vistors a random tab each visit.

I think it may be possible by altering the script by replacing ul>li:first with ul>li:nth-child('+randomTab').
#26 Michiel (Homepage) on 2010-04-16 12:13 (Reply)
Dirk GinaderHi Michael,
you can use the existing method "showAccessibleTab(n)" to achieve that.
I.e.:
$(document).ready(function(){
var tabs = $(".tabs").accessibleTabs();
var amountOfTabs = 3;
var randomTab = Math.floor(Math.random()*amountOfTabs);
tabs.showAccessibleTab(randomTab);
});
#26.1 Dirk Ginader (Homepage) on 2010-04-16 18:17 (Reply)
awaisi tried this interface and that was really good ,
thanks for your time ,
i helped me in aking my own tabs too,:-)
#27 awais (Homepage) on 2010-05-04 05:35 (Reply)
hghExcellent info! checking with somebody who actually advantages from this should furthermore be great. Would e awesome to have those kind of assets more in an open way available in every office
#28 hgh (Homepage) on 2010-05-06 10:40 (Reply)
AndreaHi. Could you tell me how to hide the tabhead element (h2, h3 or else) that the script puts in the div with class="content"?
Thanks a lot
#29 Andrea (Homepage) on 2010-05-17 08:12 (Reply)
Dirk GinaderHi Andrea,
in my simple example here: http://blog.ginader.de/dev/jquery/tabs/1.0/simple.php I'm using the class ".accessibletabsanchor" that is attached to the anchor in the headline to move it offscreen like so:
.js .tabs .current-info,
.js .tabs .accessibletabsanchor {
left:-999em;
position:absolute;
}
#29.1 Dirk Ginader (Homepage) on 2010-05-17 19:06 (Reply)
AndreaHi Dirk, I had already seen what you suggest me, but with this solution I only move offscreen the inside the h2 element and in the page it remains the empty space occupied by this element, usually not a little space. So, maybe it could be better to put something like:

.tabs .content h2 {
display:none;
}

or not? This CSS rule would apply only with javascript active so it's similar to:

.js .tabs .accessibletabsanchor {
left:-999em;
position:absolute;
}

What do you think?
Thanks
#29.1.1 Andrea (Homepage) on 2010-05-17 23:17 (Reply)
Dirk GinaderHi Andrea,
It's very important to not use display:none on this headline as everything you hide using display:none or visibility:hidden is then also hidden to Screenreader users. For those exactly I do add this though so the anchor in the headline can be used as link target after clicking on the tab. If the gap causes problems in your design you can also change the css to:
.js .tabs .current-info,
.js .tabs h2{
position:absolute;
left:-999em;
}
By moving the h2 offscreen instead of the anchor the gap should be gone.
#29.1.1.1 Dirk Ginader (Homepage) on 2010-05-17 23:51 (Reply)
MarkDirk and Andrea,

I'm trying to do the same thing -- although through jQuery. I can "hide" the tab-content using the hide() method, but I'm not having any luck hiding the h3 tag.

Here's what I have:
[h3]Application[/h3]
[div id="applicationContent" class="tab-content"] ... [/div]

I have a $('#applicationContent').hide(); that hides the content of the tab, but it doesn't do anything to the tabbhead.

(Sorry for the formatting, I was unable to make the geshi tags work).

Thanks in advance!
Mark
#29.1.1.1.1 Mark on 2010-09-16 23:08 (Reply)
Robert HallattHi,

Is there any way to link directly to a specific tab?

Thanks,

Rob
#30 Robert Hallatt on 2010-06-01 20:45 (Reply)
Dirk GinaderI'm happy you asked Robert ;-)
I just released the shiny new version 1.6: http://mz05.de/1w which introduces (beside other things) the new feature "autoAnchor". If you set this to true in your config and add IDs to the headlines in your tabs markup these IDs can then be used to directly link to the tab!
#30.1 Dirk Ginader (Homepage) on 2010-06-02 06:34 (Reply)
SteveburnerGreat and thanks for the update. Looking forward to checking it out.
Flash Designers UK
#31 Steveburner (Homepage) on 2010-06-02 08:31 (Reply)
Robert HallattHi,

Is there any way you could provide an example as to how I would go about setting up the saveState feature?

Thanks

Rob
#32 Robert Hallatt on 2010-06-10 19:49 (Reply)
Dirk GinaderThere you go Robert an Example and Explanation of the saveState feature:
http://blog.ginader.de/dev/jquery/tabs/1.7/save-state.php
You can find many more Examples (and short Explanations at the Bottom of the Examples) here: http://blog.ginader.de/dev/jquery/tabs/1.7/index.php

Please let me know if anything is hard to understand. I want this to be self explanatory :-)
#32.1 Dirk Ginader (Homepage) on 2010-06-10 19:54 (Reply)
AndreaHi Dirk. I've just realized that clicking on the tabs may cause the page scrolling up or down (at least with Firefox), in your examples too. Is this avoidable in some ways?
Thanks
#33 Andrea (Homepage) on 2010-06-23 10:14 (Reply)
Dirk GinaderHi Andrea,
when the tabs are outside of the viewport (also partially) then then Browser will try to move them into view. This happens automatically after the selected tab content gets focused. This is an important accessibility feature and should not be avoided.
#33.1 Dirk Ginader (Homepage) on 2010-06-23 10:57 (Reply)
Marcus TuckerYour accessible tabs are excellent, but using cookies to save state is not best practice at all - instead, use a plugin such as Ben Alman's BBQ (http://benalman.com/projects/jquery-bbq-plugin/) to persist the state to the URL as a hash fragment, and to restore it when the page loads. This also enables full use of history navigation (i.e. back/forward buttons) and bookmarking - neither of which are facilitated by the cookie method.
#34 Marcus Tucker on 2010-07-13 14:48 (Reply)
Peter WeilThanks so much for this solution. The only thing I can't get to work are the pagination links/arrow in IE6 and IE7.
#35 Peter Weil on 2010-09-10 14:03 (Reply)
Dirk GinaderThanks for your bug report Peter! I'm looking into this already. It seems to be a known jquery issue. I will need to rearchitect the code to use delegate() or live() to fix this problem.
Watch this space :-)
#35.1 Dirk Ginader (Homepage) on 2010-09-10 20:16 (Reply)
Carolin MollHi Dirk,

I would like to implement the pagination links too and I am interested, if you could find a solution for the problems in IE 6 and 7?

And I don't know if it's because of my comment at the German site, but I recognized, that meanwhile there is a possibility, to place the linklist at the bottom of the content – very usefull feature – thanks a lot for that!

Carolin
#35.1.1 Carolin Moll on 2010-10-06 09:30 (Reply)
Dirk GinaderHi Carolin,
yes I added the feature to place the tabs at the bottom of the content for you. Of course I will look into the pagination feature as well but it's quite complex and I'm very busy at the moment. This will be better in a couple of weeks though. Thanks :-)
#35.1.1.1 Dirk Ginader (Homepage) on 2010-10-06 17:02 (Reply)
Carolin MollReally amazing, that you implemented that placement-thing because of my little question ... thanks again!:-)
I just was trying to adjust the script for the ie problems by myself, but as you wrote "quite complex", I recognize, it's a little bit too advanced for my little knowledge of javascript and jQuery :-) (if there is a improbable success, i let you know.) The launch of the site is next week at Friday and I have to implement the pagination links. But no problem, i could try another solution. Thank you and greetings
Carolin
#35.1.1.1.1 Carolin Moll on 2010-10-06 18:21 (Reply)
AvatarThanks Dirk. In my mind, while the arrows are a nice "extra", they're not essential. I wouldn't lose too much sleep over them. ;-)
#35.1.2 Anonymous on 2010-10-19 11:40 (Reply)
MarkHi Dirk!

I have just started using your tabs solution and the YAML solution as well, and I love it.

One thing I need help with is how to hide a tab and its associated header.

I have this:
Application

...


I need to hide this and its tab-content.

How do I accomplish this?

Thanks,
Mark
#36 Mark on 2010-09-14 22:40 (Reply)
Dirk GinaderHi Mark,
I will need a little more detail on how your markup looks like and what you want to achieve. If you could upload an example somewhere that would help me a lot helping you :-)
#36.1 Dirk Ginader (Homepage) on 2010-09-14 23:17 (Reply)
RossHi Dirk

Is there a way to put a unique class on each of the tab links? I need to customise the background differently for each tab.
#37 Ross on 2010-09-20 13:33 (Reply)
Dirk GinaderHi Ross,
if you pass cssClassAvailable:true in the config object the script will automatically move over the class attributes of the headline elements to the corresponding tabs.
example:
$(document).ready(function(){
$('.tabs').accessibleTabs({
cssClassAvailable:true
});
});
#37.1 Dirk Ginader (Homepage) on 2010-09-20 17:40 (Reply)
RobertHi,

I can't get this to work. All of my tab links disappear for some reason when I add this to my config.

Any one else have this issue?

Rob
#37.1.1 Robert on 2010-09-28 22:27 (Reply)
John HuHello! Tabs Plugin not support mouseover event ?
#38 John Hu on 2010-10-09 16:03 (Reply)
Dirk GinaderHi John,
the reason why the tabs only work on click and not on mouseover is that these tabs are build to be accessible and not all users are able to use a mouse. the click() event is the only event that is triggered by keyboards as well as mouse users.
#38.1 Dirk Ginader (Homepage) on 2010-10-09 21:08 (Reply)
DanHi Dirk,
Amazing work on these! After testing on IE8/JAWS 11, I'm experiencing the same loss of focus issue others were seeing in IE7. When I tab over to one of the tab links and hit enter, IE takes me to the top of the page. Firefox works perfect, but IE gives me grief. Is anyone having similar IE8 experience?
#39 Dan on 2010-10-18 22:33 (Reply)
David McElroyHi

When i use this in combination with jquery 1.4.2 running on a site on a non-standard port, i get an error in jquery ("Syntax error, unrecognized expression: portnumber" - line 75). Doesnt happen with 1.3.1.

Seems like it may be jquery rather than this but thought i would post here as its not something i can find much info about on the net.

David
#40 David McElroy on 2010-11-02 15:05 (Reply)
RolandHello. Thank you very much for that really cool script!

I wonder if there is a way to close all tabs at beginning. And open a tab on the first click?

Greetings from Switzerland!
Roland
#41 Roland (Homepage) on 2010-11-19 22:18 (Reply)
Dirk GinaderHi Roland,
I'm sorry but that's not yet possible. I'll add that as a feature request.
#41.1 Dirk Ginader (Homepage) on 2010-11-19 22:25 (Reply)
MikeI'm new to Javascript and am running into an issue with including anything through JS into the "tabbody" of the tabs. I can get the tabs to run fine but when I try to include other files or widgets it always kills the page in Firefox (IE seems to run fine). The error I am getting is "ids in not defined". Any help you can provide would be greatly appreciated, we are required to be 508 compliant and this seems to do really well in JAWS.
#42 Mike on 2010-11-30 16:12 (Reply)
sreenidhiHi
I am trying to make tabs accesible for screen readers but,is it possible to make it accesible for dynamic tabs too ?

$('#createTabs').click(function() {
addTab($(this));
});

function addTab(link) {
document.getElementById('tabs').innerHTML = "";
document.getElementById('content').innerHTML = "";
$("#content").append("" + count + "");
}
#43 sreenidhi on 2010-12-02 16:39 (Reply)
SunshineThank you very much for the code. I have an odd bug (?) to report for the sync heights script part of the accessible tabs.

It only seems to consider the height of the styled container for the first element. The height that is detected for all other tab-body elements is the unstyled height (which could be quite a bit shorter).Once you click on the longest

I think you can recreate my experience by making the third tab of your sync heights example have a long paragraph (longer than the content of the first tab)

I hope this is helpful.
#44 Sunshine on 2011-02-17 22:40 (Reply)
Dirk Ginaderthank you Sunshine - I will have a look into it :-)
#44.1 Dirk Ginader (Homepage) on 2011-02-17 23:15 (Reply)
SunshineHi Dirk,
I "fixed" it (for me) by moving the code that syncs the height before the code that hides the inactive tabs. Apparently it's a problem with getting the height of a hidden element.

Referencing the code on github in jquery.tabs.js. I moved lines 131-136 to line 125.

Again, I hope that's helpful and thanks a bunch.
#44.1.1 Sunshine on 2011-02-21 18:11 (Reply)
Dirk GinaderBrilliant! Thank you :-)
#44.1.1.1 Dirk Ginader (Homepage) on 2011-02-21 18:28 (Reply)
Marcus TuckerCould you update the source with this fix and also check out / accept this pull request from someone else please?:
https://github.com/ginader/Accessible-Tabs/pull/13
#44.1.1.1.1 Marcus Tucker on 2011-03-01 03:57 (Reply)
Dirk GinaderThanks Marcus, I pulled Tim's changes and they are now in the github master branch (no idea how i managed to not see them so long). Would you like to add your changes in github too so you get the credits you deserve? :-)
#44.1.1.1.1.1 Dirk Ginader (Homepage) on 2011-03-01 18:07 (Reply)
Marcus TuckerSorry, thought I replied to this ages ago... I don't have any fixes, I was merely chipping in to bring your attention to Tim's fix (which you've now merged), and to ask you to incorporate Sunshine's fix (above in this thread) which you haven't mentioned you've done yet?!
#44.1.1.1.1.1.1 Marcus Tucker on 2011-04-04 20:29 (Reply)
Dirk GinaderThanks for the hint Marcus and thanks for the Bug report and the fix as well Sunshine. The fix is now available in the latest Version 1.8.2
#44.1.1.1.1.1.1.1 Dirk Ginader (Homepage) on 2011-04-04 21:32 (Reply)
ChantalHello!

Thank you for your wonderful script; it's really useful. I'm glad there are accessible tabbing scripts out there.

I was wondering how I might go about linking to specific tabs? For example, linking to page.php?n=1 would have a certain tab be open onload, while page.php?n=2 would have another open.

Is this possible?

Thank you for your time. :-)
Chantal
#45 Chantal on 2011-04-04 19:04 (Reply)
Dirk GinaderHi Chantal,
Happy you like it :-)
If your set autoAnchor:true in the config you can simply link to the anchor id of a tab headline. See the Examples links here: http://blog.ginader.de/dev/jquery/tabs/1.7/index.php or see this working Example here: http://blog.ginader.de/dev/jquery/tabs/1.7/simple-linked-tab.php#tab2
#45.1 Dirk Ginader (Homepage) on 2011-04-04 19:16 (Reply)
ChantalAh, thank you for your quick response! I can't believe completely missed those examples; sorry for asking such a silly question, haha. Thank you for your help; I really appreciate it.

Cheers,
Chantal
#45.1.1 Chantal on 2011-04-04 19:53 (Reply)
paulGreat thx for this Dirk.

Is there a way to select a tab using jquery on document ready?

ta
paul
#45.1.2 paul on 2011-04-07 08:42 (Reply)
Dirk Ginaderyou can have a look at the "show random tab" example here: http://blog.ginader.de/dev/jquery/tabs/1.7/randomtab.php
I'm basically already doing that there but go a step further. Trimming down the example to what you need it would be this:
$(document).ready(function(){
var tabs = $(".tabs").accessibleTabs();
//pass the id of the tab you want to open
//starting by 0 (so 2 would open the 3rd tab)
tabs.showAccessibleTab(2);
});
#45.1.2.1 Dirk Ginader (Homepage) on 2011-04-07 18:58 (Reply)
PaulThanks Dirk

Yeah I saw that last night after downloading your examples.

I didnt notice earlier beacuse we have an old version of your plugin!

One other query - I will have a look myself but can you tell me if this is possible. Can you have hide the tabs and just use the pagination to cycle through the content?
Once again good work. thx.

ta
paul
#45.1.2.1.1 Paul on 2011-04-08 02:17 (Reply)
Dirk GinaderI didn't add a specific method to do that (as not having tabs would kinda defy the idea of writing a "tabs" script ;-))
However you can always simply use CSS to hide the tabs like this:

.tabs ul.tabs-list {
display: none;
}
#45.1.2.1.1.1 Dirk Ginader (Homepage) on 2011-04-08 17:37 (Reply)
Marcus TuckerFollowing on from autoAnchor, it would be handy if it were possible to pass the ID value of a tab to .showAccessibleTab() - e.g. tabs.showAccessibleTab("MyTabHeadingID") - instead of only accepting the 0-based index position.
#45.1.2.1.2 Marcus Tucker on 2011-04-11 11:20 (Reply)
Dirk GinaderThanks for the good idea Marcus!
I added your suggestion as new issue here: https://github.com/ginader/Accessible-Tabs/issues/15 and will add the new feature soon :-)
#45.1.2.1.2.1 Dirk Ginader (Homepage) on 2011-04-11 17:03 (Reply)
Dirk GinaderMarcus, you might be happy to hear that I already managed to build the new feature and it is now available in version 1.9. Download the latest version and enjoy the new Method "showAccessibleTabSelector({valid jQuery selector of the tab to show})"
Thanks again for the inspiration :-)
#45.1.2.1.2.2 Dirk Ginader (Homepage) on 2011-04-11 20:19 (Reply)
Marcus TuckerWeird, another one of my comments has gone missing, posted it soon after yours... is it still sitting in an approval queue?

Anyway, wanted to say thanks for your speedy implementation BUT you don't actually need a new function, nor is it desirable - a jQuery selector can (and often does) return multiple elements, but only one tab can be active at a time, so showAccessibleTabSelector() doesn't make much sense in that context IMHO.

And fortunately, element IDs can't start with a number anyway (part of the HTML spec) so if the parameter passed to showAccessibleTab() is text you should handle it as an ID, and if it's a number you should handle it as an tab array index!

(Have posted this to the issue too)
#45.1.2.1.2.2.1 Marcus Tucker on 2011-04-14 08:25 (Reply)
Dirk GinaderGood call Marcus, I will revise my previous implementation :-)
#45.1.2.1.2.2.1.1 Dirk Ginader (Homepage) on 2011-04-14 16:42 (Reply)
Mauritssample to view:
http://blog.ginader.de/dev/jquery/tabs/1.7/synchedheights.php

when you look at the second example and you scroll a bit downwards.
onclick on a tab will make the content scroll upwards again.

How can i prevent this?
you can also see it here:
http://www.hermansprojecting.com/woningaanbod_hermans_projecting_vastgoed/details_voor/46/80_Gazenbroekerhof_12_6224_JJ_Maastricht
#46 Maurits (Homepage) on 2011-04-12 14:14 (Reply)
Dirk GinaderIt is expected behavior to scroll a hidden panel into view. To scroll a separate tab panel into view that is not expected to anything seems like a bug though. I will investigate. Thanks for the Hint :-)
#46.1 Dirk Ginader (Homepage) on 2011-04-14 16:50 (Reply)
RichardThankyou! I've spent hours looking for javascript tabs that degrade gracefully when javascript is switched off.
#47 Richard on 2011-05-31 11:24 (Reply)
ParadiseHi Dirk,

ich versuche den VideoJS Player in deinen Tabs zum laufen zu bringen. Dieser sitzt in einem extra div im tabbody div. Das Problem ist das der player seine weite dynamisch selbst setzt. Der tab der beim pageload gezeigt wird macht keine probleme (display:block). Aber in den hidden tabs hat das player div eine weite von 0px und ist somit nicht zu sehen. Liegt das an deinen tabs? Setzen diese andere divs im tabbody div auf hidden und width 0?
#48 Paradise on 2011-06-15 14:47 (Reply)
Dirk GinaderGenerell kann Javascript die Dimensionen einer node nicht abfragen solange sie nie sichtbar war. Deine Möglichkeiten wären also entweder die Breite des ersten Tabs als Standard für alle zu verwenden oder den video player erst in das Tab zu schreiben sobald es sichtbar wird.
Wenn Du irgendwo ein code-Beispiel hättest würde ich mir das gerne mal anschauen dann kann ich das vielleicht auch tab-seitig lösen.
#48.1 Dirk Ginader (Homepage) on 2011-06-15 17:05 (Reply)
Michael GuildAwesome work Dirk!

Is there a way to do nested tabs? tabs within a tab?

Also, I love the structure and syntax so much that I believe via css, your tabs could be styled out as accordions. Whats your take on this?
#49 Michael Guild (Homepage) on 2012-02-18 09:11 (Reply)
AndreaHi Dirk,
are you thinking to release a responsive version of your script? Something similar to http://www.petelove.com/2013/01/17/responsive-tabs-jquery-script/.
Thanks
Andrea
#50 Andrea (Homepage) on 2013-04-02 11:46 (Reply)
Dirk GinaderYes I'm thinking about adding functionality to allow breakpoints to switch to an accordion view.
#50.1 Dirk Ginader (Homepage) on 2013-04-08 18:03 (Reply)
SebastianHi, this is such a nice piece of software. I am using it in several projects and I did not find anything better yet.

The only thing that I found worth it to improve is the navigation for the tabs on the bottom of each tab. I replaced the text with images and I am using the following jQuery code to make sure the first "previous" link and the last "next" link are not shown.

// hide first *previous* and last *next* button
$("ul.pagination li.previous:first, ul.pagination li.next:last").hide();

Maybe this is useful for somebody.
#51 Sebastian (Homepage) on 2013-04-07 14:01 (Reply)
Paul HuppeHi,
I started using this nice control in my project. I have a question. Is it possible to have nested tabs controls? If so, how do you code them? I tried using different IDs for the DIVs, but that did not work. I tried something like this (sorry, I do not know how to display code on this blog):

div id="divTabs1" class="tabs"
__div id="divTab1" class="tabbody"
____h2 First tab section /h2
____div id="divTabs2" class="tabs"
______div id="divTabs2-1" class="tabbody"
________h2 Nested tabs - 1st tab /h2
______/div
____/div
__/div
__div id="divTab2" class="tabbody"
____div id="divTab2" class="tabbody"
______h2Second tab section /h2
__/div
/div
#52 Paul Huppe on 2013-12-02 15:27 (Reply)
Dirk GinaderHi Paul,
thanks for you Feedback. Nesting of a Tag widget inside of another tab widget is not something I had considered before. Not sure it it would be really usable at all if I'd make it work. What do you think?
#52.1 Dirk Ginader (Homepage) on 2013-12-02 18:02 (Reply)
Paul HuppeHi Dirk,
We have 2 applications that I could use it in that require nested tabs. I just noticed that on 2012-02-18 someone else asked about nested tabs, so I guess I am not alone who would find it useful. Maybe I can try to hack the code. Any idea where in the code I should concentrate my efforts?
Paul
#52.1.1 Paul Huppe on 2013-12-02 18:12 (Reply)
Dirk GinaderI don't really have the time to investigate myself right now but if I'd have to guess I'd say that it's a thing with the selector specificity. You probably need to make sure that the jQuery selectors don't accidentally match parts of the nested tabs. Let me know how it's going! :-)
#52.1.1.1 Dirk Ginader (Homepage) on 2013-12-02 18:57 (Reply)
Add Comment

Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Gravatar/Favatar/Pavatar/MyBlogLog author images supported.
You can use [geshi lang=javascript/css/html4strict/php]your code[/geshi] tags to embed source code snippets