タブのアクセシビリティ対応

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だけ書き出すと、上記のようになります。

「これがタブである」というマークアップができるようになりました。

実際、スクリーンリーダーで操作するとどうなるか、後ほど試して追記します。

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)