WAI-ARIA 1.2Roles

ウィジェットロール

ウィジェットロールは、ボタン、チェックボックス、スライダー、タブなどのインタラクティブなUIコンポーネントの役割を定義します。ネイティブHTML要素がある場合はそちらを優先し、カスタムウィジェットにのみARIAを使います。

入力系

ロール	説明	ネイティブHTML
`button`	クリックやキー操作で動作をトリガーする要素	`<button>`
`checkbox`	チェック可能な入力。true/false/mixed の3状態	`<input type="checkbox">`
`radio`	ラジオグループ内で1つだけ選択可能な入力	`<input type="radio">`
`switch`	オン/オフの切り替え。checkbox に似るが視覚的にトグル	`なし`
`textbox`	自由テキスト入力。単一行または複数行	`<input> / <textarea>`
`slider`	一定範囲内の値を選択するスライダー	`<input type="range">`
`spinbutton`	離散的な値を増減して選択する入力	`<input type="number">`
`combobox`	テキスト入力 + ポップアップリストの組み合わせ	`なし`
`searchbox`	検索クエリの入力に特化したテキストボックス	`<input type="search">`

選択・ナビゲーション系

ロール	説明	ネイティブHTML
`link`	ハイパーリンク。ページ遷移やアンカーへの移動	`<a href>`
`menuitem`	メニュー内の選択肢	`なし`
`menuitemcheckbox`	チェック可能なメニュー項目	`なし`
`menuitemradio`	ラジオ選択可能なメニュー項目	`なし`
`option`	リストボックスまたはコンボボックス内の選択肢	`<option>`
`tab`	タブリスト内のタブ。タブパネルの表示を切り替える	`なし`
`treeitem`	ツリービュー内のアイテム。展開/折りたたみ可能	`なし`

表示・フィードバック系

ロール	説明	ネイティブHTML
`dialog`	モーダルまたは非モーダルのダイアログウィンドウ	`<dialog>`
`alertdialog`	重要なメッセージを表示し、応答を求めるダイアログ	`なし`
`progressbar`	タスクの進行状況を表示するバー	`<progress>`
`scrollbar`	スクロール可能なコンテンツのスクロールバー	`なし`
`tooltip`	要素にホバー/フォーカスした際に表示される補足テキスト	`なし`
`tabpanel`	タブに関連付けられたコンテンツパネル	`なし`

コンテナ系

ロール	説明	ネイティブHTML
`grid`	行と列で構成されるインタラクティブなグリッド	`なし`
`listbox`	選択可能なオプションのリスト	`<select>`
`menu`	ユーザーに選択肢を提供するメニュー	`なし`
`menubar`	水平に並んだメニュー。通常はアプリのメインメニュー	`なし`
`tablist`	タブのコンテナ。tab ロールの子を持つ	`なし`
`toolbar`	ボタンなどのコントロールをグループ化するツールバー	`なし`
`tree`	階層的なリスト。展開/折りたたみ可能なツリービュー	`なし`
`treegrid`	ツリー構造 + グリッド（行と列）の組み合わせ	`なし`

インタラクティブデモ

カスタムボタンの比較

レンダリング結果

送信する

クリック回数: 0

HTMLソース

<!-- role なし -->
<div class="btn" onclick="submit()">
  送信する
</div>

<!-- 問題点:
  - Tab でフォーカスできない
  - Enter/Space で押せない
  - スクリーンリーダーが
    「ボタン」と読み上げない
-->

role のない div はスクリーンリーダーにとって意味不明です。Tab キーでフォーカスもできず、キーボードユーザーは操作できません。

よくある間違い

不適合

<div class="btn" onclick="save()">保存</div>

適合

<button onclick="save()">保存</button>

div にはフォーカス不可・Enter/Space で反応しない・ロールなし。<button> を使うだけで全て解決します。

不適合

<a role="button" onclick="toggle()">切り替え</a>

適合

<button onclick="toggle()">切り替え</button>

<a> にはリンクのセマンティクスがあります。ボタンの動作なら <button> を使いましょう。

不適合

<div role="checkbox">受け入れる</div>

適合

<div role="checkbox" tabindex="0" aria-checked="false">受け入れる</div>

role だけではキーボード操作も状態管理もできません。tabindex と aria-checked、キーボードハンドラが必要です。