HTML

この記事では、タブやリストボックスなどで、どの項目が選択中かを支援技術へ伝えるaria-selected属性と、aria-pressed・aria-checkedとの使い分けを初心者向けに説明します。

aria-selected is an attribute that tells assistive technologies whether an item in a list, tab, or similar component is currently selected.

aria-selected 属性

aria-selected 属性は、リストボックスの option、タブの tab、表の行など「複数の中から選ばれる要素」が いま選択されているかどうか をスクリーンリーダーなどの支援技術に伝えるマークです。

true

この要素が選択されている

false

この要素は選択されていない（または別の要素が選択中）

どんなときに使う？

タブ UI、リストボックス、選択可能なテーブル行など、“選択” の概念があるコンポーネント内の要素につけます。

何が嬉しい？

視覚的ハイライトだけでは伝わらない「選択状態」を読み上げソフトが正しく把握できます。

使わなくていいケース

ボタンの on/off など「押されたかどうか」を示すなら aria-pressed、チェックボックスなら aria-checked を使います。

<!-- タブ切り替えの例 -->
<ul role="tablist">
	<li role="tab" aria-selected="true"  tabindex="0">プロフィール</li>
	<li role="tab" aria-selected="false" tabindex="-1">設定</li>
	<li role="tab" aria-selected="false" tabindex="-1">ヘルプ</li>
</ul>

このように現在アクティブな要素に aria-selected="true"、それ以外は false を付けるだけで、初心者でもシンプルにアクセシビリティを向上できます。