ginader / accessible-tabs

jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.

jQuery Accessible Tabs Plugin

jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.

Installation

You can now install jQuery Accessible Tabs Plugin by using Bower.

bower install jquery-accessible-tabs

See also

• Examples
• english info about the jQuery Accessible Tabs Plugin
• deutsche Informationen zu jQuery Accessible Tabs Plugin

accessible-tabs's Issues

wrapper class not configurable

The script uses CSS class "clearfix" to wrap its menu list with its contains floating items. This class should be configurable as clearfix is often named .cf or e.g. .ym-clearfix in YAML4.

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.
John

Focus issue when tabbing

Hello,

I think these tabs are great! I would love to implement them, however, I have discovered an issue with focus, when using keyboard navigation (tabbing). When I initially use 'tab' on my keyboard I can move from tab to tab, however, once I hit 'enter' to open a tab, then try to use my keyboard 'tab' my focus is not taken to the next tab, it's taken to the next focusable element on the page AFTER the tabbed content. I have taken a quick video of my content to show this issue:

http://www.screencast.com/t/8qLUz6rDbEO

I also tested tabbing with the samples provided here, with the same results:

http://www.screencast.com/t/FayKuo0KQ2XB

Thanks in advance for looking into this. :)

Is jumping to tabcontent if not visible onload in viewport

The are tabs not visible on pageload the browser scroll down (while focus the first tab) (except IE).

Reason is the trigger click within showAccessibleTab called following:
$( '#'+contentAnchor ).text( $(this).text() ).focus()...
If I remove the focus() is no longer happening.

autoAnchor and get parameter with a space (I have a fix)

When hyperlinking to a page with tabs, then using the autoAnchor function to have a specific tab open, while having URL get parameters with a space in it will not work.

http://blog.ginader.de/dev/jquery/accessible-tabs/simple-linked-tab.html#tab2?attr=foo bar
(copy and paste with "foo bar")

I understand that spaces in a URL get parameter are frowned upon (and should be escaped), however another plugin I am using does not seem to like the %20 I put into the parameter value.

A simple modification will let this work though.

Starting Line 240 (of version 1.9.5), modify the following

            if(o.options.autoAnchor && window.location.hash){
                var anchorTab = $('.'+o.options.tabsListClass).find(window.location.hash);
                if(anchorTab.size()){
                    anchorTab.click();
                }
            }

To be:
if(o.options.autoAnchor && window.location.hash){
var anchorTab = $('.'+o.options.tabsListClass).find(window.location.hash.split("?")[0]);
if(anchorTab.size()){
anchorTab.click();
}
}

Note the split of "?" and selecting only the first part.

Aria roles

Could you add aria roles like 'tablist', 'tab', 'tabpanel', etc?
http://www.w3.org/TR/wai-aria/roles#tablist

Add WAI ARIA Tab Panel Best Practices

http://www.w3.org/TR/wai-aria-practices/#tabpanel

jQuery v3.3.1 - not working

After an update to version jQuery v3.3.1 the tabs do not work anymore.

What could be the reason?

jQuery 1.11 - not working

I see that you do not develop this great plugin. I would like to use it with the actual jQuery (now 1.11). Do you think that it will be possible?

jquery.syncheights.js vs jQuery 1.9

jquery.syncheights.js uses .browser which has been removed in jQuery 1.9. (Detected using the jQuery Migrate plugin.)

As far as I can see, it's only needed for IE6 support in syncheights, so dropping IE6 support for good might be a very simple solution?

change active tab from a js call

as asked in this comment http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php#c597

Add support for custom events

use the jQuery trigger() Method to broadcast useful events that can be used by external code

make tabs responsive to arccordions

Hi,

its possible to update the accessible tabs for responsive design - so the tab change at break-point to a arccordion

see e.g. GroundworkCSS http://groundworkcss.github.io/groundwork/docs/tabs.html#tab5

Zip file can't be found

Hi there,

Tried downloading the zip file of your (wonderful!) code, but got an error message - it doesn't look like it's available?

Celeste

loading twice the script

<title>Basic - Accessible Tabs Example</title> <script type="text/javascript">document.documentElement.className += " js";</script> <script src="js/jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.tabs.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">

$(document).ready(function(){
    $(".tabs").accessibleTabs({
        tabhead:'h2',
        fx:"fadeIn"
    });
});

function abcd(thisName) {
    alert("abcd")

}
</script>    

Basic - Accessible Tabs Example

some dummy text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.

Lorem ipsum

Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh.

some more dummy text

        <script type="text/javascript">abcd('xyx');</script>

        <p>Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. </p>
        <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque</p>
    </div>
    <h2>anything else</h2>
    <div class="tabbody">
        <p>Here could be your content</p>
    </div>
</div>
</script>

currentInfoClass repeats copy when more than 1 CSS class applied

If I apply more than one class to the currentInfoClass option:

currentInfoClass: 'current-info  visuallyhidden'

and then click on a tabhead link multiple times in my markup, the "current tab:" copy is repeated in the dom:

<li class="first current" id="accessibletabsnavigation0-0">
    <a class="headline js-tab-label" href=
    "#accessibletabscontent0-0"><span class=
    "current-info visuallyhidden">current tab:</span> <span class=
    "current-info visuallyhidden">current tab:</span> <span class=
    "current-info visuallyhidden">current tab:</span> <span class=
    "current-info visuallyhidden">current tab:</span> <span class=
    "current-info visuallyhidden">current tab:</span> Tab 1</a>
</li>

IE8 throws "console" error

"Line: 151 - Error: 'console' is undefined"
Need to check why IE8 works around my checks

jQuery 1.7.1 support in IE for your Accessible Tabs Plugin

When will it be ready for 1.7.1?

i figured out an error in your click event with the event.keyCode Blocks...

have a nice day.
patrick

check url to open specific tab according to the defined anchor

allow setting specific IDs to the tabheads and open them automatically when their ID gets targeted in the URL like so:

tabhead1

save active tab to cookie

make the active tab persist by saving it to a cookie as per comment: http://blog.ginader.de/isok/comment/668/257-jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.html#c668

Classes

Please move the attributes of the original tabhead elements (e. g. "h4") to the transformed DOM elements.

focus problem

i think there is a focus "problem" (browser specific) whit the script

1. keyboard navigation (IE / Chrome)
   if you using keyboard only (tab/enter) to choose a tab in internet explorer (7,8,9) or chrome the focus is jumping to the page top (should stay on tab or point to the actually focusable content). keyboard / screenreader user get confused because they have to start reading on top again
2. anchor to "actually focusable content" (firefox)
   in an earlier version of the script (see http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php)
   you write
   "..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..."

but in the new version (1.9.5) this function is not working anymore
the focus stays on the actual tab and is not pointing to the actually focusable content

see example http://web-tech.at/temp/accessibletabs/simple.html
(actual code from github - only with some links in content areas)

if you choose the second tab with keyboard (tab/enter), below the content of the second tab is shown. the next keyboard tab should imo go to the link "elementum" and not to the third tab "anything else"
in some cases this may be the desired behavior but in most cases i think it won't

Change in href generation

I changed:
list += '

<a'+id+''+cssClass+' href="#'+tabId+'">'+$(this).html()+'

' and
list += '

<a'+id+' href="#'+tabId+'">'+$(this).html()+'

';

to:

list += '

<a'+id+''+cssClass+' href="#'+elId+'">'+$(this).html()+'

' and
list += '

<a'+id+' href="#'+elId+'">'+$(this).html()+'

';

and get bookmarks for the tabs that users can readily relate to. This seems to work well in my limited testing. I have not tried with pagination or other functionality that I am not using at this time.

Apply classes "first" and "last" to the navigation list

Apply classes "first" and "last" to the navigation list so they can be styled differently when needed

EventListener onChange

Is there an easy way to detect if a tab has been clicked?

run code after tab is visible on on active tabbody

We have an issue that we need to run isotopes code/tiles to arrange themselves in a tab but since it is set to display none they do not arrange themselves. Is there a way to run code on the tabbody content after a tab is clicked?

if you go to

http://www.signium.com/assnfe/companydirectory.asp?SEARCH_TYPE=20&MODE=VIEW&ID=18

and click on "Ireland Insights" you will see it does not arrange the tiles and stacks them on top of each other.

Animate

This is probably a long shot but is it possible to animate the "minus/down" and "plus/up" icon when clicking to expand/contract? It also helped them knowing that it's being animated instead of non-animated/fast version.

Jaws 10 issue that needs users to press the down key many times to get to the content

As reported in these 2 comments:

http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php#c580

http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php#c582

use Event delegation instead of multiple click events

As suggested in this comment:
http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php#c559

page jumps based on window height size

When using this script, including the examples, when ever you activate/change tabs the page seems to scroll up by an amount based on the height of the screen. The larger the screen viewing area, the more it scrolls, the smaller the viewing area the less it scrolls (Potentially when the viewing height is small enough, it does not scroll at all.

It seems to affect all browsers I have tested.

How to reproduce:

• goto: http://blog.ginader.de/dev/jquery/accessible-tabs/simple.html
• adjust browser screen height so a vertical scroll bar appears
• scroll to align the tabs to the top of the viewing area
• activate a tab (it should now scroll)

Try changing the browser height, and see how the amount it scroll, changes. If you have the viewable area about 200 pixels (vertical) is only showing, it does not seem to scroll up.

Tabs prevent video from autoplay

If placed in a tab a HTML5-video isn't playing automatically, although having the correct attribute.
Testcase: http://jsfiddle.net/Flocke/NpgD5/

In my case I found a solution to prevent the video from stopping - it is inside the comments.

Error with IE7 :

Hello,
First of all thanks for your lib.

I tried this example http://blog.ginader.de/dev/jquery/accessible-tabs/simple.html on IE 7 and I got this error:

Syntax error, unrecognized expression: http://blog.ginader.de/dev/jquery/accessible-tabs/simple.html#accessibletabscontent0-2

We have the same issue on our project which uses your library and because we have important clients using IE 7, we are stuck on that and can't say: we don't support IE 7...

Any idea about this ?

Thanks in advance.

change showAccessibleTab() to allow a tab id as param as well

According to Marcus' comment here:
http://blog.ginader.de/isok/comment/955/257-jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.html#c955

Following 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.

I think either having an integer or a valid jQuery Selector would be the best approach.

IE Cleartype

Hello,

I hope I'm not posting a stupid question as I am a newbie to scripting, but IE's cleartype is causing a problem with the fade in. apparently this is a known JQuery bug and a fix is suggested:

if(jQuery.browser.msie) this.style.removeAttribute(‘filter’);

How to implement the fix?

See: http://www.mchb.hrsa.gov/chusa11/popchar/pages/104ac.html
In IE 6, 7, or 8, after clicking through tabs, the text fuzzes up.

Thanks for the cool script!
Holly

add new option syncMethod

this new optional Method can contain the name of an alternative plugin as string, that can be used to sync up the heights of the tab contents instead of the default syncHeight plugin: http://github.com/ginader/syncHeight