# Accessibility in TabPanel

Learn about accessibility of Wijmo's TabPanel in this documentation topic

## Content


The __TabPanel__ implements WAI-ARIA accessibility guidelines. All tab elements have the proper role attributes as well as all applicable ARIA attributes.

The example also shows the effect of the __autoSwitch__ property, which affects how the control handles the tab and cursor keys. For more information on accessibilty and ARIA, please see the [W3C ARIA practices](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus "W3C ARIA practices") and [SimplyAccessible articles](https://simplyaccessible.com/article/danger-aria-tabs/ "SimplyAccessible articles").

##### HTML
```html
 <div id="theTabPanel">
    <div>
      <a id="hdr-africa">
        Africa
      </a>
      <div id="pane-africa">
        <ul>
          <li>Algeria</li>
          <li>Angola</li>
          <li>Benin</li>
          <li>Botswana</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="hdr-america" class="wj-state-active">
        America
      </a>
      <div id="pane-america">
        <ul>
          <li>Canada</li>
          <li>Chile</li>
          <li>Mexico</li>
          <li>United States</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="hdr-asia">
        Asia
      </a>
      <div id="pane-asia">
        <ul>
          <li>China</li>
          <li>Korea</li>
          <li>India</li>
          <li>Japan</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="hdr-europe">
        Europe
      </a>
      <div id="pane-europe">
        <ul>
          <li>Austria</li>
          <li>England</li>
          <li>France</li>
          <li>Germany</li>
          <li>Netherlands</li>
          <li>Switzerland</li>
        </ul>
      </div>
    </div>
    <div>
      <a id="hdr-oceania">
        Oceania
      </a>
      <div id="pane-oceania">
        <ul>
          <li>Australia</li>
          <li>Fiji</li>
          <li>New Zealand</li>
          <li>Samoa</li>
        </ul>
      </div>
    </div>
  </div>
  <div>
    <label for="autoSwitch">
      autoSwitch
    </label>
    <input id="autoSwitch" type="checkbox" checked="checked">
  </div>
```
##### Javascript
```javascript
import * as wjNav from '@mescius/wijmo.nav';

function init() {
    var theTabPanel = new wjNav.TabPanel('#theTabPanel');
    // toggle autoSwitch property
    document.getElementById('autoSwitch').addEventListener('click', function (e) {
        theTabPanel.autoSwitch = e.target.checked;
    });
}
```