Markup

Markup

Here is the requisite markup. Pay special attention to use the same class names and aria attributes or a11y-tabs will not work.

<!-- 1. The tabs container -->
<section class="tabs">
  <!-- 2. The tablist container-->
  <div class="tab-list"
        role="tablist">
    <!-- 3. The tab buttons -->
    <button class="tab-item tab-button"
            role="tab"
            aria-controls="panel-1"
            aria-selected="true">Tab 1</button>
    <button class="tab-item tab-button"
            role="tab"
            aria-controls="panel-2"
            aria-selected="false">Tab 2</button>
  </div>
  <!-- 4. The tabpanels -->
  <div id="panel-1" role="tabpanel" tab-title="Tab 1">
    <div>Tab 1 content</div>
  </div>
  <div id="panel-2" role="tabpanel" tab-title="Tab 2">
    <div>Tab 2 content</div>
  </div>
</section>

Details

1. The tab container must either have class name tabs or tabs tabs-vertical (if you'd like vertically oriented tabs).

2. The tablist container must have: class="tab-list" role="tablist" attributes.

3. The tab buttons must have class="tab-item tab-button" and can also have modifier classes applied like tab-button-large. Further, these should have role="tab" and have aria-controls="panel-1" where the value is pointing to an actual tab panel ID. When selected, A11yTabs will provide the aria-selected="true" attribute.

4. The tabpanels must have an id="panel-1" which will be matched from the tab button's aria-controls attribute. They must have role="tabpanel" role, and should have tab-title="Tab 1".

References

I highly recommend WAI-ARIA practices for an overview of aria.

The MDN WAI-ARIA Roles references provide great insight for a particular role. For example, look at the pages for the tab role and the tabpanel role.