Webサイトのアクセシビリティ対応で、タブUIはどうすればよい？
WAI-ARIAの登場で、明確な対応ができるようになりました。
<ul role=”tablist”>
<li role=”tab”> タブ1 </li>
<li role=”tab”> タブ2 </li>
<li role=”tab”> タブ3 </li>
</ul>
<div>
<div role=”tabpanel”> タブ1コンテンツ </div>
<div role=”tabpanel”> タブ1コンテンツ </div>
<div role=”tabpanel”> タブ1コンテンツ </div>
</div>
roleだけ書き出すと、上記のようになります。
「これがタブである」というマークアップができるようになりました。
実際、スクリーンリーダーで操作するとどうなるか、後ほど試して追記します。