01
トークンで絞り込む
button、role=button、aria-expandedを入力できます。ロールと属性を切り替えても、外部の資料を自動取得することはありません。
開発者向けリファレンス
ARIAロールと属性のリファレンス
ロール名またはaria-*属性で探し、正しいマークアップ例、操作条件、規格の出典を確認します。
ARIAロール
一致した項目
button
ロールbuttonは動作を起こすロールです。HTMLのbuttonならフォーカスとキー操作が備わります。
キーボード: HTML本来の要素は基本操作に対応します。独自のロールなら同じ操作を実装します。
注意点: 同じ意味を持つHTML要素に不要なroleを重ねないでください。
主な要件: なし
HTMLの例
<button type="button">Save</button>操作例を試す
0回実行
検索はこのページ内だけで行います。出典はリンクを選んだときだけ開きます。
種類
1件表示／全16件
WAI-ARIA 1.2・2023年6月6日資料確認日：2026年9月23日
独自のUIに意味を付ける前に、WAI-ARIAロールが本当に必要かを確かめましょう。buttonやinputなどのHTML要素には、意味だけでなく基本的なキーボード操作も備わっています。
このARIAロール一覧は、よく使う状態と属性を実例とともにまとめています。タブやダイアログのように焦点管理が必要な場合は、APGの詳細なパターンへ進めます。
ARIAロールをここで調べる理由
属性の意味だけでなく、操作の前提と原典まで確認できます。
まずネイティブ要素を確認
buttonとcheckboxでは、最初にHTML本来の書き方を示します。ARIAロールをdivに付けても、フォーカスやEnter・Spaceの操作は追加されません。
状態と表示を対応させる
aria-expandedの例では、ボタンと開閉される領域を一緒に示します。ARIAロールや状態を写すだけでなく、表示が変わるたびに値も更新してください。
定義から実装までに見る三点
02
例の操作条件を読む
ARIAロールのコード片は出発点です。tab、dialog、comboboxでは、キーボードとフォーカスの詳細をAPGで確認してから組み込んでください。
03
規格の版を確認して試す
各項目は固定版のWAI-ARIA 1.2にリンクします。完成した画面でキーボードとスクリーンリーダーを使い、実際の読み上げと操作を確かめます。
役割・属性・実装条件を同じ画面に
二つの索引を一緒に検索
8つのロールと8つのaria-*属性・状態を収録。見つからない項目が規格に存在しないという意味ではありません。
コード片から原典へ
各項目にHTML例とWAI-ARIA 1.2の定義を掲載し、複合ウィジェットにはAPGの実践ガイドも付けています。
状態だけでは動かないことを明示
aria-expandedは開閉状態を伝えますが、クリック処理は作りません。実際の表示と属性値を同期させる必要があります。
この資料で判定できないこと
- 全項目の網羅ではない
- このARIAロール資料は属性を含む16件の抜粋です。検索で出ないトークンは、WAI-ARIAの原典で確認してください。
- コード片は完成品ではない
- tabやdialogをコピーしても、矢印キー、フォーカス移動、閉じた後の復帰は実装されません。対応するAPGパターンを参照してください。
- 適合認証は行わない
- DOMの診断、支援技術での確認、WCAG適合判定は行いません。色の比率は別のコントラストツールで調べられます。
ARIAロールに関するよくある質問
ARIAロールはいつ使うべきですか？
HTML要素が必要な意味と操作を持つなら、まずその要素を使います。ARIAロールはネイティブ要素で表せないウィジェットに使い、操作も別に実装します。
role=buttonだけでキーボード操作できますか？
いいえ。role=buttonは意味を伝えるだけです。divを使うならフォーカス可能にしてEnterとSpaceを処理する必要があり、通常はbutton要素の方が安全です。
aria-labelとaria-labelledbyはどう使い分けますか？
aria-labelは属性に名前の文字列を書きます。aria-labelledbyはページ内の文字を持つ要素のIDを参照します。見えるラベルやHTMLのlabelが使えるなら先に検討してください。
ロールに必要なARIA属性は何ですか？
必要な状態や親子関係はARIAロールごとに異なります。この一覧の要点に加え、リンク先のWAI-ARIA 1.2で完全な要件を確認してください。
ARIAを付ければアクセシビリティは確保できますか？
できません。ARIAロールの早見表は意味の確認用です。実際の画面のキーボード操作、読み上げ、利用者の作業を試して初めて問題を見つけられます。
項目の不足や誤りを見つけましたか？