APG パターン集
パターン一覧
WAI-ARIA APG の各パターンをカテゴリ別に一覧します。気になるパターンから読んでみてください。
開閉・展開
通知・ダイアログ
ナビゲーション
パンくずリスト
解説ありBreadcrumb
サイト内の現在位置を示すナビ。nav とリスト、現在地の aria-current が肝。
メニュー / メニューバー
解説ありMenu and Menubar
アプリ的なメニュー。矢印キー操作と role="menu" 系のロールで構成します。
メニューボタン
解説ありMenu Button
押すとメニューを開くボタン。aria-haspopup と aria-expanded で関係を伝えます。
リンク
解説ありLink
基本にして奥深いリンク。div の onclick ではなく a 要素を使う理由を解説。
ランドマーク
解説ありLandmarks
header / nav / main / footer などでページを領域分けし、素早い移動を可能に。
フォーム・入力
ボタン
解説ありButton
すべての基本。button 要素を使えば得られるアクセシビリティと、自作の落とし穴。
チェックボックス
解説ありCheckbox
オン/オフの選択。中間状態（mixed）を含むチェックボックスの扱いも。
ラジオグループ
解説ありRadio Group
複数から1つを選ぶ。矢印キー移動と roving tabindex の代表例。
スイッチ
解説ありSwitch
オン/オフのトグル。チェックボックスとの違いと role="switch" の使い方。
コンボボックス
解説ありCombobox
入力＋候補リスト（オートコンプリート）。APG でも最難関の1つ。
リストボックス
解説ありListbox
選択肢のリストから選ぶ。単一/複数選択と矢印キー操作。
スライダー
解説ありSlider
値を範囲から選ぶ。aria-valuenow/min/max とキーボード操作。
スライダー（複数つまみ）
解説ありSlider (Multi-Thumb)
価格帯などの範囲選択。つまみ同士の干渉とラベリングが論点。
スピンボタン
解説ありSpinbutton
数値の増減入力。上下キーとボタンでの増減、範囲の通知。
メーター
解説ありMeter
既知の範囲内の量（ディスク使用率など）を示す表示専用の指標。