タブのマークアップ例

tab.html

<ul role="tablist">
    <li role="presentation">
        <a href="#tabpanel1" id="tab1"
           role="tab" aria-controls="tabpanel1" aria-selected="true">タブ 1</a>
    </li>
    <li role="presentation">
        <a href="#tabpanel2" id="tab2"
           role="tab" aria-controls="tabpanel2" aria-selected="false">タブ 2</a>
    </li>
    <li role="presentation">
        <a href="#tabpanel3" id="tab3"
           role="tab" aria-controls="tabpanel3" aria-selected="false">タブ 3</a>
    </li>
</ul>
<div id="tabpanel1" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">
    タブコンテンツ 1
</div>
<div id="tabpanel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">
    タブコンテンツ 2
</div>
<div id="tabpanel3" role="tabpanel" aria-labelledby="tab3" aria-hidden="true">
    タブコンテンツ 2
</div>