アクセシビリティを
とにかくわかりやすく。

Accordion

見出しを押すとパネルが開閉する UI。ボタンと aria-expanded で「今開いているか」を支援技術へ正しく伝えます。

Disclosure

「もっと見る」のように1つの領域を表示/非表示するもっともシンプルな開閉パターン。

Alert

フォーカスを奪わずに重要メッセージを即座に読み上げる、live region を使った通知。

Dialog (Modal)

背面を操作不能にして前面に出すダイアログ。フォーカストラップと Esc 閉じが要。

Alert and Message Dialogs

「本当に削除しますか？」など、ユーザーの確認・応答を求めるダイアログ。

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

既知の範囲内の量（ディスク使用率など）を示す表示専用の指標。

Tabs

同じ領域で内容を切り替える。矢印キー移動・aria-selected・roving tabindex。

Toolbar

ボタン群をまとめ、Tab 1回で入って矢印で移動できるようにするパターン。

Table

表データ。table 要素と見出しセルの関連付けが読み上げの鍵。

Grid

セル単位でキーボード操作できる対話的な表（データグリッド）。

Treegrid

行を展開/折りたたみできるグリッド。ツリーとグリッドの複合。

Tree View

階層構造の表示。フォルダツリーのような展開・移動操作。

Feed

無限スクロールの記事一覧を、支援技術でも読み進められるようにする。

Carousel

自動で切り替わるスライド。再生/停止と読み上げ配慮が重要。

Tooltip

フォーカス/ホバーで出る補足。aria-describedby とキーボード対応。

Window Splitter

2つの領域の境界をドラッグ/キーで動かすリサイズ用のハンドル。