タブパネル：アクセシビリティ

TabPanelは、WAI-ARIAアクセシビリティガイドラインを実装します。すべてのタブ要素は、適切なロール属性と、適用可能なすべてのARIA属性を持ちます。

次の例では、タブのヘッダーとペインに一意のIDを割り当てています。TabPanelはこれを使用して、「aria-controls」属性と「aria-labelledby」属性を自動的に生成します。

また、この例では、autoSwitchプロパティの効果も知ることができます。このプロパティは、コントロールによるタブと矢印キーの処理方法に影響を与えます。アクセシビリティとARIAの詳細については、W3C ARIA practices（英語）とSimplyAccessibleの記事（英語）を参照してください。

HTML

<div id="theTabPanel">
    <div>
        <a id="hdr-africa">
            アフリカ
        </a>
        <div id="pane-africa">
            <ul>
                <li>アルジェリア</li>
                <li>アンゴラ</li>
                <li>ベニン</li>
                <li>ボツワナ</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="hdr-america" class="wj-state-active">
            アメリカ
        </a>
        <div id="pane-america">
            <ul>
                <li>カナダ</li>
                <li>チリ</li>
                <li>メキシコ</li>
                <li>アメリカ</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="hdr-asia">
            アジア
        </a>
        <div id="pane-asia">
            <ul>
                <li>中国</li>
                <li>韓国</li>
                <li>インド</li>
                <li>日本</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="hdr-europe">
            ヨーロッパ
        </a>
        <div id="pane-europe">
            <ul>
                <li>オーストリア</li>
                <li>イングランド</li>
                <li>フランス</li>
                <li>ドイツ</li>
                <li>オランダ</li>
                <li>スイス</li>
            </ul>
        </div>
    </div>
    <div>
        <a id="hdr-oceania">
            オセアニア
        </a>
        <div id="pane-oceania">
            <ul>
                <li>オーストラリア</li>
                <li>フィジー</li>
                <li>ニュージーランド</li>
                <li>サモア</li>
            </ul>
        </div>
    </div>
</div>
<div>
    <label for="autoSwitch">
        自動的に切り替え
    </label>
    <input id="autoSwitch" type="checkbox" checked="checked">
</div>

JavaScript

import * as wjNav from '@mescius/wijmo.nav';

function init() {
    var theTabPanel = new wjNav.TabPanel('#theTabPanel');
    // autoSwitchプロパティを切り替えます
    document.getElementById('autoSwitch').addEventListener('click', function (e) {
        theTabPanel.autoSwitch = e.target.checked;
    });
}

タブパネル：アクセシビリティ
HTML
JavaScript