Yugien - 遊戯苑
テーマ

HTML

この記事では、カスタムチェックボックスやトグルスイッチなどの選択状態を支援技術へ伝えるaria-checked属性と、true・false・mixedの意味を初心者向けに説明します。

この記事でわかること

The aria-checked attribute is a WAI-ARIA attribute that communicates the selection state (checked, unchecked, or partially checked) of elements such as checkboxes, radio buttons, and toggle switches to assistive technologies.

aria-checked 属性

aria-checked属性の基本概要

aria-checked属性は、WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）によって定義される属性の一つで、 主にチェックボックスやラジオボタン、トグルスイッチなどの選択可能な要素に適用され、要素の選択状態（チェックの有無）を示します。

この属性を適切に使用することで、スクリーンリーダーなどの支援技術を利用するユーザーに対して、 その要素が現在選択されているのかどうかを明示的に伝えることができます。

aria-checked属性の値

aria-checked属性は、以下の3つの値を取ることができます。

true
要素が選択されている（チェックされている）状態
false
要素が選択されていない（チェックが外れている）状態
mixed
チェック状態が不明確（ツリービューや一部のチェックボックスグループで使用）

補足 : mixed は、親要素が複数のチェックボックスを含む場合などに使用されます。例えば、一部の項目がチェックされているが、すべてではない場合に mixed を適用できます。

例

HTML

<div role="checkbox" aria-checked="true" tabindex="0">選択済み</div>
<div role="checkbox" aria-checked="false" tabindex="0">未選択</div>
<div role="checkbox" aria-checked="mixed" tabindex="0">部分選択</div>

上記の例では、それぞれのチェックボックスが異なる状態であることを支援技術に伝えることができます。

aria-checkedとroleの組み合わせ

aria-checkedは、通常、以下のrole属性と組み合わせて使用されます。

HTML

<div role="checkbox" aria-checked="false" tabindex="0" onclick="toggleCheck(this)">チェックボックス</div>
<script>
	function toggleCheck(element) {
		let currentState = element.getAttribute("aria-checked");
		element.setAttribute("aria-checked", currentState === "true" ? "false" : "true");
	}
</script>

このコードでは、クリックするたびにaria-checkedの値が切り替わります。

aria-checkedを使用する場面

標準の<input>要素を使用できない場合

aria-checkedは、通常の<input type="checkbox">ではなくカスタムUIでチェックボックスを実装する際に役立ちます。

HTML

<div role="checkbox" aria-checked="false" tabindex="0" onclick="toggleCheck(this)">カスタムチェックボックス</div>

注意 : <input>要素の代わりにaria-checkedを使用する場合は、キーボード操作 (EnterやSpaceキー) をサポートすることも重要です。

ツリービューや複数選択リストでの利用

HTML

<ul role="tree">
	<li role="treeitem" aria-checked="mixed">親アイテム</li>
	<ul>
		<li role="treeitem" aria-checked="true">子アイテム1</li>
		<li role="treeitem" aria-checked="false">子アイテム2</li>
	</ul>
</ul>

このように、mixedを使うことで、親要素が部分的にチェックされていることを表現できます。

キーボード操作との連携

支援技術対応を強化するため、aria-checkedを使用する要素には、以下のようにキーボード操作をサポートするのが望ましいです。

HTML

<div role="checkbox" aria-checked="false" tabindex="0" onkeydown="handleKey(event, this)" onclick="toggleCheck(this)">チェックボックス</div>

<script>
	function handleKey(event, element) {
		if (event.key === " " || event.key === "Enter") {
			toggleCheck(element);
			event.preventDefault();
		}
	}
</script>

ここでは、SpaceまたはEnterキーを押すことで、チェック状態を変更できるようにしています。

aria-checkedの適用におけるベストプラクティス

可能な限りネイティブの<input type="checkbox">や<input type="radio">を使用する
これにより、デフォルトでキーボードや支援技術が利用可能になります。
roleを正しく設定する
aria-checkedを使用する際は、必ず適切なrole（checkbox, radio, switch）を設定する。
キーボード操作に対応する
tabindex="0"を追加し、EnterやSpaceキーでの操作をサポートする。
適切なラベルを提供する
aria-labelledbyやaria-labelを活用して、要素の意味を明示する。

まとめ

aria-checked属性は、カスタムチェックボックス、ラジオボタン、トグルスイッチなどの要素でチェック状態を示すために使用されます。

カスタムUIを作成する際に適切にaria-checkedを活用することで、アクセシビリティを向上させ、より多くのユーザーにとって使いやすいWebページを構築できます。