nico3333fr / van11y-accessible-tab-panel-aria

ES2015 accessible tabs panel system, using ARIA

Van11y accessible tabs panel system, using ARIA

This script will transform a simple list of anchors to contents into a fantastic-shiny accessible tabpanel system, using ARIA.

The demo is here: https://van11y.net/downloads/tab-panel/demo/index.html

Website is here: https://van11y.net/accessible-tab-panel/

La page existe aussi en français : https://van11y.net/fr/onglets-accessibles/

How it works

ARIA is coming

The script adds all needed attributes to your tabs controls and panels (role="tab/tablist/etc.",aria-selected/controls="…").

Then a bit of styling classes

Then it will generate some classes for you, to allow styling your tabs as you want.

And JavaScript does the rest

Some listeners for keyboard and mouse interactions are added, when you activate one, it will updates attributes and manage keyboard interations.

How to use it

Download the script

You may also use npm command: npm i van11y-accessible-tab-panel-aria.

You may also use bower: bower install van11y-accessible-tab-panel-aria.

Conventions

Then, follow the conventions given in this minimal example (in bold).

• use classes needed (js-tabs, js-tablist, js-tablist__item, js-tablist__link, js-tabcontent)
• check that your anchors are working.
• for accessibility purposes (for VoiceOver), the plugin has to give focus to hx (h2, h3, h4, etc.) in tab contents.

For Hx, you have two cases:

• There aren’t any in your js-tabcontent’s, so specify in data-hx attribute (will be added with class="invisible", which means visually hidden);
• There are some, just tell it to the plugin using data-existing-hx attribute.

Example without hx:

<div class="js-tabs">
  <ul class="js-tablist" data-hx="h2">
   <li class="js-tablist__item">
    <a href="#id_first" class="js-tablist__link">1st tab</a>
   </li>
   <li class="js-tablist__item">
    <a href="#id_second" class="js-tablist__link">2nd tab</a>
   </li>
  </ul>
 <div id="id_first" class="js-tabcontent">
   here the content of 1st tab
 </div>
 <div id="id_second" class="js-tabcontent">
   here the content of 2nd tab
 </div>
</div>

Example with hx:

<div class="js-tabs">
  <ul class="js-tablist" data-existing-hx="h2">
   <li class="js-tablist__item">
    <a href="#id_first" class="js-tablist__link">1st tab</a>
   </li>
   <li class="js-tablist__item">
    <a href="#id_second" class="js-tablist__link">2nd tab</a>
   </li>
  </ul>
 <div id="id_first" class="js-tabcontent">
   <h2>title</h2>
   here the content of 1st tab
 </div>
 <div id="id_second" class="js-tabcontent">
   <h2>other title</h2>
   here the content of 2nd tab
 </div>
</div>

The script is launched when the page is loaded. If you need to execute it on AJAX-inserted content, you may use for example on <div id="newContent">your tab panel source</div>:

van11yAccessibleTabPanelAria(document.getElementById('newContent'));

Keyboard shortcuts

If you focus on the tabs “buttons”:

• use Up/Left to see previous tab,
• use Down/Right to see next tab
• use Home to see first tab (wherever you are in tab buttons)
• use End to see last tab (wherever you are in tab buttons)

If you focus on a tab content:

• use Ctrl Up/Left to set focus on the tab button for the currently displayed tab
• use Ctrl PageUp to set focus on the previous tab button for the currently displayed tab
• use Ctrl PageDown to set focus on the next tab button for the currently displayed tab

Warning: Ctrl+PageUp/PageDown combination could activate for some browsers a switch of browser tabs. Nothing to do for this, as far as I know (if you have a solution, let me know).

Logic of styling classes

Before Javascript

Once you set up the code with your content, style it before activating JavaScript: so it will be nice even if there is no JavaScript.

For example, just imagine you are on poor mobile connexion, and the JavaScript hasn’t (yet) loaded. Or it can be disabled.

After Javascript

You should add classes to the source, and use them this way:

[role="tablist"].my-style {…}

Basically, you should rely on ARIA attributes, so styles will be applied only if JavaScript is loaded and well-executed. Namespaced generated classes

The plugin has another feature: if you don’t like styling on role attributes, it can generate classes for you only for styling tabs when they are activated.

Here is an example:

<ul … data-tabs-prefix-class="last-tabs">

The data-tabs-prefix-class will add classes on each elements:

<ul … class="… last-tabs-tabs__list">
  <li … class="… last-tabs-tabs__item">
    <a … class="… last-tabs-tabs__link">…

So with data-tabs-prefix-class="last-tabs" you have:

• last-tabs-tabs__list for styling the ul;
• last-tabs-tabs__item for styling the li;
• last-tabs-tabs__link for styling the a;
• last-tabs-tabs__content for styling each tab panel.

Bonuses

Tab panel opened by default

If you need a tab to be opened by default, it is possible, using data-selected="1" on the .js-tablist__link you need to be opened (See the demo, second example).

Other tabs are still available, here are the rules for this feature:

• The fragment detection (explained below) will always have priority on this feature;
• If there are several data-selected="1" put on tabs in the same group (which does not make sense and should never happen), the first one will be used.

Anchor added in URL

As you may notice (or not), now the script adds a fragment in the URL when you click or select a tab using the keyboard. It is cool when you want to copy/paste the link of the page you are reading, and the opened tab will be the good one! Anchor on a tab panel

If you need to make a link on your page to a id that is on a tab panel, the script will detect it and display the good tab, only for you.

If you want to test, open a new window, and copy/paste this: https://van11y.net/downloads/tab-panel/demo/index.html#id_third

Anchor in a tab panel

If you need to make a link on your page to a id that is in a tab panel, the script will detect it and display the good tab, only for you.

If you want to test, open a new window, and copy/paste this: https://van11y.net/downloads/tab-panel/demo/index.html#cool-anchor

“In-page” link to a tab panel

If you need to create in your current page a link to a tab (inside or outside), it is possible:

• Create the link to the content you want to target: <a href="#link-to-tab">link to tab option</a>
• Add the class class="js-link-to-tab" to it;
• And that’s all. The plugin will make it work.

van11y-accessible-tab-panel-aria's Issues

tabs on screen size > x

For some projects it might be better not to have tabs on mobile devices.
Can you add a data-attribute to indicate the minimum screen size width where your tabs script should be triggered?

data-tabs-min-width = "768"

if ( $(window).width() > 768) {    
  // start tabs 
}

Refactor suggestion

Hi there!

@loicblascos came up with a refactored version of your tabpanel script, aiming to be more readable and modern.

You can find it in a dedicated CodePen for now.

I'm not good enough to explain this in details, but I wanted to share this with you :)

I hope it'll help one day!

Active tab doesn't change using browser back/forward button.

I noticed that clicking through tabs, the id hash is added to the URL, but clicking the back/forward browser button doesn't activate the correct tab when the URL changes.

js-link-to-tab error: Cannot read property 'querySelectorAll' of null

Here are my tabs:

<div class="js-tabs">
    <ul class="js-tablist" data-hx="h2">
        <li class="js-tablist__item">
            <a href="#tab_1" class="js-tablist__link">Tab 1</a>
        </li>
        <li class="js-tablist__item">
            <a href="#tab_2" class="js-tablist__link">Tab 2</a>
        </li>
    </ul>
    <div id="tab_1" class="js-tabcontent">
        This is tab 1
    </div>
    <div id="tab_2" class="js-tabcontent">
        This is tab 2
    </div>
</div>

<a href="#tab_2" class="js-link-to-tab">Link to tab 2</a>

When I click on the "Link to tab 2" tag at the bottom, I get the error Cannot read property 'querySelectorAll' of null at HTMLBodyElement.<anonymous> (van11y-accessible-tab-panel-aria.js:442)

Here's the line the error is pointing to in the console:

Add data-attribute or class to open tab

Is it possible to add a data-attribute or class to indicate the tab that should be open on page load?
The use case is that not always the first tab should be opened

Add a destroy method

This is more a feature request. Would it be possible to ad a destroy method.

Use case: destroy the tab panel on small screens where the pattern does not work to provide a better UX pattern.

Is there a way to prevent the browser from jumping down to the tab when a direct link has a tab hash in it?

Tabs are working great, and there is no jumping when browsing within tabs on the page, but if take a direct link with a tab hash in it, it jumps down the page to that tab ID and I'm hoping to prevent that. Any way to do this? thanks!

Invalid License Format

Turn tabs into accordions on small screens

I've used your wonderful script on a recent project and had to make sure the tabs were responsive. For smaller screens, I turn them into accordions. I was wondering if you were interested in incorporating this enchantment? I've never contributed to open source so please let me know if I'm doing anything incorrectly. I'm using velocity.js also but can easily be removed.

Here is my script: https://bitbucket.org/TCUWebmanage/tcuedu_first/src/master/library/js/tcu-van11y-accessible-tab-panel-aria.js

Here is an example: http://coreyreed.me/newtcu/

Contribution

Hi, thank you for your effort in making web accessible and simple. However, achieving this goal is something that requires more resources. Would you mind to join our team, contribute to https://bunnyjs.com - which makes Vanilla JavaScript simple, great again and help million of users and developers around the world with their problems. You may start by joining our Gitter room.

Are there any other accessible components you would like to have out of the box? Do you have any ideas on how to make JavaScript app development simpler, faster, better and accessible for anyone?

Thanks again.

Best regards,
Mev

Link to another tab when different tab active

I have a global menu with links to tab panels on a particular page . After following one of these the other links (to tab panels) do not work and I cannot figure out why.

data-selected doesn't seem to work

Thank you for implementing data-selected with commit 0387ece
When I open the french demo page I notice the second tab without the second tab active
I was expecting that the second tab was openend by default.
https://van11y.net/downloads/tab-panel/demo/index-fr.html