Need Public Method

    jquery-accessible-tabpanel-aria

    1.6.1 • Public • Published

    jQuery accessible tabs using ARIA

    A presentation and demo page is here: https://a11y.nicolas-hoffmann.net/tabs/

    This simple script transforms this simple list of anchors to contents:

    <div class="js-tabs">
      <ul class="js-tablist">
       <li class="js-tablist__item">
        <a href="#id_first" id="label_id_first" class="js-tablist__link">1st tab</a>
       </li>
       <li class="js-tablist__item">
        <a href="#id_second" id="label_id_second" class="js-tablist__link">2nd tab</a>
       </li>
       <li class="js-tablist__item">
        <a href="#id_third" id="label_id_third" class="js-tablist__link">3rd tab</a>
       </li>
       <li class="js-tablist__item">
        <a href="#id_fourth" id="label_id_fourth" class="js-tablist__link">4th 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 id="id_third" class="js-tabcontent">
       here the content of 3rd tab
     </div>
     <div id="id_fourth" class="js-tabcontent">
       here the content of 4th tab
     </div>
    </div>
    

    into shiny accessible tabs by adding ARIA attributes.

    Keyboard navigation is supported, based on ARIA DP (http://www.w3.org/TR/2013/WD-wai-aria-practices-20130307/#tabpanel && http://www.oaa-accessibility.org/examplep/tabpanel1/):

    If you focus in 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 in 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).

    Normal or nested tabs?

    If you need to have nested tabs, you should use jquery-accessible-nested-tabs.js which has stricter selectors. See this issue that explains why https://github.com/nico3333fr/jquery-accessible-tabs-aria/issues/17

    Features

    If there is a fragment in URL, the script detects if it is on or in a tab content, and select the tab automatically.

    You can make a link to a tab (which opens it). <a href="#link-to-tab-content" class="js-link-to-tab">link to tab</a>

    Fragment is added to URL if you select a tab (and can be removed using data-tabs-disable-fragment="1" on div class="js-tabs").

    You can also use disabled tab (see https://a11y.nicolas-hoffmann.net/tabs/#disabled_work for a demo)

    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 open. Other tabs are still available, here are the rules for this feature:

    • The fragment detection has always priority on this feature;
    • If there are several data-selected="1" put on tabs (which does not make sense and should never happen), the first one will be used;
    • If the data-selected="1" attribute is set on a disabled tab, of course it won't be selected.

    Requirements

    • jQuery (others smaller libraries should be ok, but didn't test for the moment)
    • a small piece of CSS .js-tabcontent[aria-hidden=true] { display: none; }
    • respect the classes given above, and the convention a href="#id_fourth" id="label_id_fourth" (will improve later)
    • Use attribute data-hx="hx" (ex data-hx="h2" if your tab system is after a h1) to specify Hx structure in your tabs if they don't have one in tab content (will be added, and can be hidden throught a class invisible) OR
    • Indicate the hx structure contained in your tab contents, using the attribute data-existing-hx="h2"

    This jQuery plugin doesn't style tabs (except .js-tabcontent[aria-hidden=true] of course), styles can be added using other classes.

    A demo page is here with full docs and examples: https://a11y.nicolas-hoffmann.net/tabs/

    It can be included for one, two tab systems or more in a page.

    Enjoy.

    Chuck Norris approved this

    P.S: this plugin is in MIT license. It couldn't be done without the precious help of @ScreenFeedFr, @sophieschuermans, @goetsu and @romaingervois.

    Install

    npm i jquery-accessible-tabpanel-aria

    DownloadsWeekly Downloads

    58

    Version

    1.6.1

    License

    none

    Last publish

    Collaborators

    • nico3333fr