A Pen by Anonasaurus Rex.

index.html

<h1>
  <span class='sub-title'>
    Progressively-Enhanced Responsive, Accessible Tab Navigation
  </span>
</h1>
<ul class='desc'>
  <li>Turns into an accordion on tablet and mobile</li>
  <li>Works with JS disabled (content is still available and appears as headings + text, no tabs)</li>
  <li>ARIA works across states, dynamically updated via the JS</li>
  <li>Keyboard accessible</li>
</ul>
<div id='TabContainer'>
  <div class='accordion-wrapper'>
    <h2 class='tabs-container__title' id='TabPanelTitle-Tab1'>Tab 1</h2>
    <div class='tabs-container__panel' id='Tab1'>
      <p>First Tab Panel</p>
      <a href='#'>Link</a>
    </div>
    <h2 class='tabs-container__title' id='TabPanelTitle-Tab2'>Tab 2</h2>
    <div class='tabs-container__panel' id='Tab2'>
      <h3>Tab 2 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    </div>
    <h2 class='tabs-container__title' id='TabPanelTitle-Tab3'>Tab 3</h2>
    <div class='tabs-container__panel' id='Tab3'>
      <h3>Tab 3 Content</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et pulvinar eros, ut feugiat lacus. Duis convallis ligula id tempus rhoncus. Curabitur tempus metus sit amet accumsan pulvinar. Pellentesque sed aliquam nisl. Sed libero tortor, posuere quis quam sed, ultrices feugiat nulla. Fusce ullamcorper odio eget tempus rhoncus. Etiam lacinia odio quis faucibus auctor. Curabitur a velit vel nisi facilisis vulputate. Vivamus feugiat, arcu eget accumsan feugiat, purus risus aliquam justo, id fermentum mauris dolor sit amet libero. Aenean laoreet vel justo et eleifend. Nulla facilisi. Quisque sit amet arcu sit amet nibh sagittis viverra. Mauris fringilla cursus ipsum et mollis. Cras eget sapien consequat, tincidunt enim vitae, vehicula lacus. In tristique venenatis urna, nec tincidunt nisl vulputate a. Curabitur dictum neque non tempus rhoncus.</p>
    </div>
  </div>
</div>
  
        </div>

Responsive-Tabs-Accordion-Prototype.markdown

Responsive Tabs/Accordion Prototype

Pattern for accessible responsive tabs to accordion. Tested in FF NVDA, Chrome/Safari in VO & iOS. If any issues across readers, please let me know in comments!

Forked from Monika Piotrowicz's Pen Responsive Tabs/Accordion Prototype.

A Pen by Secret Sam on CodePen.

License.

script.js

// requires jQuery 1.11
// requires Handlebars v1.3.0 for dynamic tab template 

// see https://github.com/mpiotrowicz/a11y-sandbox/blob/active-focus/source/javascripts/prototypes/responsive-tabs.js


/* global Handlebars */
(function () {
  var Tabs;

  Tabs = (function () {

    var templates = {
      tplTabNav: Handlebars.compile("<ul class='inline-list tabs-navigation show-desktop' role='tablist'>{{#each tab}}<li role='presentation' class='tab-menu-item'><a href='#{{tabId}}' id='TabController-{{tabId}}' class='txt-btn tabs-navigation__button' role='tab' aria-selected='false' aria-controls='{{tabId}}' tabindex=-1 aria-expanded='false'>{{tabTitle}}</a></li>{{/each}}</ul>")
    };

    /**
     * Sets up the Tabs
     *
     * @param $container - parent of the items that will be tabbed together
     * @param $options - any overrides to the classes set below
    */
    function Tabs($container, options) {

      var defaults = {
        default_tab: "0",                          // index of tab to open on page load
        tab_class_panel: ".tabs-container__panel", // wrapper for each tab/accordion title and content
        tab_class_title: ".tabs-container__title", // title element for each tab/accordion
        tab_nav_id: "TabNav"                      // ID to provide the constructed tab navigation
      };

      this.$container = $container.addClass("tabs-init");
      this.options = $.extend({}, defaults, options);
      this.currentTab = null;
      this.init();

    }

    /**
     * Creates a data object for all tabs within the widget
     * Saves each tab ID and title, to be used to create desktop tab nav if needed
     * Attaches Aria roles as it fetches tab data
    */
    Tabs.prototype.fetchTabData = function () {
      // stores data for all tabs in the widget
      this.tabData = [];

      var i = 0,
        $tab_panels = this.$tab_panels,
        len = $tab_panels.length,
        $currentPanel,
        $panelTitle,
        currentPanelData;

      // for each of the tabs, save its title and ID from the HTML
      for (i; i < len; i++) {
        $currentPanel = $($tab_panels[i]);
        $panelTitle = $currentPanel.prev(this.options.tab_class_title);
        currentPanelData = {
          tabId: $tab_panels[i].id,
          tabTitle: $panelTitle.text()
        };

        this.tabData.push(currentPanelData);

        // update ARIA attrs for the panel and accordion title
        $currentPanel.attr({
          "role": "tabpanel",
          "aria-hidden": "true",
          "aria-setsize": len + 1,
          "aria-posinset" : i + 1
        });

        $panelTitle
          .attr({
            "tabindex": "-1",
            "role": "tab",
            "aria-controls": currentPanelData.tabId,
            "aria-selected": "false",
            "aria-expanded": "false"
          });
      }
    };

    /**
     * Builds HTML for the desktop tab navigation
    */
    Tabs.prototype.createTabNav = function () {
      this.tabNav = true;

      this.$tabNav = $(templates.tplTabNav({
        "tab": this.tabData
      })).prependTo(this.$container);

      this.$tabNavItems = this.$tabNav.find("a");

      // add class to indicate that there's a navigation
      this.$container.addClass("tabs-nav-init");
    };

    /**
     * Binds the navigation events
    */
    Tabs.prototype.bindNavEvents = function () {
      var app = this;

      this.$tabNav.on("click", "a", function (e) {
        e.preventDefault();
        var $target = $(e.currentTarget),
          $tabPanel = $(this.getAttribute('href'));
        if (!app.isCurrentTab($tabPanel)) {
          app.closeTab();
          app.openTab($tabPanel);
        }
      });

      this.$tabNav.on("keydown", "a", function (e) {
        var currentIndex = app.handleKeyPress(e);
        if (currentIndex !== null) {
          app.closeTab();
          var panelId = app.tabData[currentIndex].tabId;
          app.openTab($(document.getElementById(panelId)));
          app.currentTab.$navItem.focus(); // focus only here so doesn't steal focus on page load
        }
      });
    };

    /**
     * helper to identify if the clicked tab is what's currently open
     * @param $tab_panel - jQuery collection of the tab to be evaluated
    */
    Tabs.prototype.isCurrentTab = function ($tab_panel) {
      return this.currentTab.$tab_panel.get(0) == $tab_panel.get(0);
    };

    /**
     * Key handler for tabs
     * @param e - event
    */
    Tabs.prototype.handleKeyPress = function (e) {
      var keyCodes,
        currentIndex = this.currentTab.position;
      keyCodes = {
        DOWN: 40,
        ENTER: 13,
        ESCAPE: 27,
        HOME: 36,
        LEFT: 37,
        PAGE_DOWN: 34,
        PAGE_UP: 33,
        RIGHT: 39,
        SPACE: 32,
        TAB: 9,
        UP: 38
      };

      switch (e.keyCode) {
        case keyCodes.LEFT:
        case keyCodes.UP:
          currentIndex--;
          if (currentIndex < 0) {
              currentIndex = this.tabData.length - 1;
          }
          //console.log(currentIndex);
          break;
        case keyCodes.END:
          currentIndex = this.tabData.length - 1;
          break;
        case keyCodes.HOME:
          currentIndex = 0;
          break;
        case keyCodes.SPACE:
        case keyCodes.ENTER:
          currentIndex = this.handleEnter(currentIndex);
          break;
        case keyCodes.RIGHT:
        case keyCodes.DOWN:
          currentIndex++;
          if (currentIndex >= this.tabData.length) {
              currentIndex = 0;
          }
          break;
        default:
          currentIndex = null;
      }
      return currentIndex;
    };

    Tabs.prototype.handleEnter = function(currentIndex) {
      // enter will either select a new panel or do nothing if it's focused on an active panel
      // so we have to deal with the currently focused element rather than the selected tab
      var currentTabByFocusIndex = document.getElementById(document.activeElement.getAttribute("aria-controls"));

      if (currentTabByFocusIndex !== this.currentTab.$tab_panel.get(0)) {
        currentIndex = this.$tab_panels.index(currentTabByFocusIndex);
      }
      return currentIndex;
    };

    /**
     * Opens the tab
     * @param $tab_panel - jQuery collection of the tab that's being opened
    */
    Tabs.prototype.openTab = function ($tab_panel) {
      var options = this.options;
      this.currentTab = {
        $tab_panel: $tab_panel
          .attr({
            "aria-hidden": "false",
            "tabindex"   : "0"
          }),
        $title: $tab_panel.prev(options.tab_class_title).attr({
          "aria-selected": true,
          "aria-expanded": true,
          "tabindex": "0"
        }),
        position: this.$tab_panels.index($tab_panel)
      };

      if (this.tabNav) {
        this.updateTabNav();
      }
    };

    /**
     * closes a tab if there's one open and a new one has been activated
     * Only one tab/accordion can be open at any given time
    */
    Tabs.prototype.closeTab = function () {
      var currentTab = this.currentTab;

      currentTab.$tab_panel
        .attr({
          "aria-hidden": "true"
        })
        .removeAttr("tabindex");

      // update accordion title values as well so everything is in synch
      currentTab.$title.attr({
        "tabindex": "-1",
        "aria-selected": "false",
        "aria-expanded" : "false"
      });

      if (this.tabNav) {
        currentTab.$navItem
          .attr({
            "tabindex": "-1",
            "aria-selected": "false",
            "aria-expanded" : "false"
          });
      }

      this.currentTab = null;
    };

    /**
     * Updates the dynamically created tab nav in desktop once a new tab has been opened
     * @param $tab - jQuery element for the tab that was just opened
    */
    Tabs.prototype.updateTabNav = function () {
      var currentTab = this.currentTab;

      currentTab.$navItem = this.$tabNavItems.eq(currentTab.position);
      currentTab.$navItem.attr({
        "tabindex": "0",
        "aria-selected": "true",
        "aria-expanded": "true"
      });
    };

    /**
     * Binds any events specific to Accordion functionality (tablet and mobile only)
     * ARIA initially didn't work here because:
      * there's no tablist role on any container
      * the tab panels are controlled by the nav and not the headers
    */
    Tabs.prototype.bindAccordionEvents = function () {
      var app = this;

      this.$accordion
        .on("keydown", this.options.tab_class_title, function (e) {
          var currentIndex = app.handleKeyPress(e);

          if (currentIndex !== null) {
            app.handleAccordion(app.$tab_panels.eq(currentIndex));
          }
        })
        //https://bugs.webkit.org/show_bug.cgi?id=133613
        .find(".tabs-container__title")
          .on("click", function (e) {
            e.preventDefault();
            app.handleAccordion($(e.currentTarget).next(app.options.tab_class_panel));
          });
    };

    Tabs.prototype.handleAccordion = function($tab_panel) {
      if (!this.isCurrentTab($tab_panel)) {
        this.openAccordion($tab_panel);
      }
    };

    /**
     * Helper to open an accordion.
     * Just calls openTab() and adds animation to scroll viewer to active accordion panel
     * @param $tab_panel - jQuery element of the tabpnael being opened
    */
    Tabs.prototype.openAccordion = function ($tab_panel) {
      this.closeTab();
      this.openTab($tab_panel);
      this.currentTab.$title.focus();

      $("html, body").animate({
        scrollTop: $tab_panel.offset().top - 25
      }, 200);
    };


    /**
     * Init function - calls necessary set up and opens the first relevent tab
    */
    Tabs.prototype.init = function () {
      var $startingTab;
      // save all the elements that will become tabs
      this.$tab_panels = this.$container.find(this.options.tab_class_panel);

      this.fetchTabData();

      this.$accordion = this.$container.find(".accordion-wrapper").attr("role","tablist");
      this.bindAccordionEvents();

      // if there's more than 1 tab, then a tab navigation is created on desktop
      if (this.$tab_panels.length > 1) {
        this.createTabNav();
        this.bindNavEvents();
      }

      $startingTab = this.$tab_panels.eq(this.options.default_tab);
      if (this.$tab_panels.filter(".tabs-container__default").length) {
        $startingTab = this.$tab_panels.filter(".tabs-container__default");
      }
      this.openTab($startingTab);
    };

    return Tabs;

  })();

  $(function () {
    window.Tabs = Tabs;
    new window.Tabs($("#TabContainer"));
  });
}).call(this);

style.css

.tabs-container__panel {
  background: #fff;
  padding: 1.5em;
}
.tabs-container__panel:focus {
    outline: thin dotted;
    outline-offset: 3px;
}

@media (min-width: 49.8125em) {
    .tabs-nav-init .tabs-container__title,
    .tabs-nav-init .tabs-container__panel {
        display:none;
    }

    .tabs-container__panel[aria-hidden="false"] {
        display:block
    }

    .tabs-navigation {
        width: auto;
        overflow:hidden;
        position:relative;
        z-index:10;
        box-shadow:inset 0 -1px #dddddd;
    }

    .tabs-navigation li {
        display:table-cell;
        vertical-align:top;
        -webkit-box-shadow:inset 1px 0 #dddddd;
        -moz-box-shadow:inset 1px 0 #dddddd;
        box-shadow:inset 1px 0 #dddddd;
    }

    .tabs-navigation__button {
        position:relative;
        display: inline-block;
        color: #414040;
        text-decoration:none;
        cursor:default;
        line-height:1;
        font-size:1.125em;
        padding:1.22222em;
        border: none;
        background: #ccc;
        margin: 0;
        box-shadow:inset 1px 0 #dddddd,inset -1px 0 #dddddd;
    }

    .tabs-navigation__button:hover {
      color: #2B2B2B;
    }

    .tabs-navigation__button[aria-selected="true"] {
        color: #000;
        background: #fff;
        z-index: 10;
    }
}

@media (max-width: 49.75em) {
    .tabs-navigation, .tabs-init .tabs-container__panel, .tabs-init .accordion--closed .tabs-container__panel {
        display:none
    }

    .tabs-init {
        border-top:solid 1px #dddddd;
        margin-left:-1.5em;
        margin-right:-1.5em
    }

    .tabs-init .tabs-container__title {
        padding:1em 1.5em;
        cursor: pointer;
    }

    .accordion--closed .tabs-container__title,
    .tabs-init .tabs-container__title {
        background: #ddd;
        border-bottom: solid 1px #a1a1a1;
    }

    .tabs-container__panel[aria-hidden="false"] {
        display:block;
        border-bottom: solid 1px #a1a1a1;
    }

    .tabs-container__title[aria-selected="true"] {
        background:#fff;
        color:#6a6a6a;
        font-weight:bold;
        border-bottom:solid 1px #dddddd;
    }

    .tabs-container__panel.accordion--closed {
        border-bottom:none;
    }
}

/*============================================================================
  Demo Styles
==============================================================================*/

h1 {
  line-height: 1;
  margin: 0 0 20px;
}
.sub-title {
  font-size: 20px;
}

.desc {
  margin-bottom: 20px;
}

/*================ Responsive Typography ================*/
@media (min-width: 49.8125em) and (max-width: 59.9375em) {
    .tabs-navigation__button {
        font-size:1em;
        padding:1.25em 0.9375em
    }
}