アクセシブルUI
キーボード・読み上げ・OS設定を尊重する、誰でも使える部品。
キーボード・読み上げ・OS の設定を尊重する部品のカテゴリ。本文へスキップ、フォーカスリング、roving tabindex のタブ、ライブリージョンの読み上げ順、フォーカストラップ、エラーサマリ、アクセシブルなツールチップとアコーディオン、そしてモーション・文字サイズ・強制カラー・透過の各設定への追従がある。原則は一貫性。支援技術との契約（role・aria・フォーカスの戻り先）はページごとに変えるものではなく、サイト全体で同じ約束を守って初めて利用者が予測できる。見本の多くは「読み上げでどう聞こえるか」を帯に可視化しているので、実装前の設計の確認にも引ける。
使い分け最初に focus-ring-recipe と skip-to-content-link を全ページに入れる。複合部品は aria-tabs-keyboard / accessible-accordion を型に、モーダルは focus-trap-dialog、フォームは form-error-summary。OS 設定への追従は motion-preference-switch から順に。
まず見る3件
- クリック
フォーカスリングの設計解説あり実例あり
Focus Ring (:focus-visible)
:focus-visible で「キーボードのときだけ」2px のリングを 2px 離して描く。角丸に追従し、ダーク背景では白＋藍の二重輪。マウスクリックでは出ない。
- outline はブラウザ既定を消さない。消すなら同じ強さの代替を必ず置く。outline:none だけの CSS は事故の温床
- :focus ではなく :focus-visible に描く。マウスで押した瞬間にリングが出ると「壊れた」ように見えて消される
- outline-offset: 2px で要素から少し離すと、角丸の形に沿ったまま背景色を問わず見える
- JS
- クリック
ARIA タブ（roving tabindex）解説あり実例あり
Roving Tabindex Tabs
Tab でタブ列に入り、← → Home End で移動。選択中のタブだけ tabindex=0（roving tabindex）、aria-selected と aria-controls で読み上げが「料金, タブ, 2/4, 選択」になる。
- タブ列は Tab で1回で通り抜けられるように、選択中のタブだけ tabindex=0・他は -1 にする（roving tabindex）
- ← → で移動したら同時に選択も切り替える（自動アクティベーション）。パネルの読み込みが重いときだけ Enter 待ちにする
- aria-controls と aria-labelledby で双方向に結ぶ。読み上げが「2/4」と位置を言えるのは role=tablist の中に role=tab があるから
- JS
- クリック
フォーカストラップ解説あり
Focus Trap (dialog + inert)
<dialog>.showModal() で開き、背後のページに inert を付けて Tab も読み上げも届かなくする。Tab は中で循環し、閉じると開いたボタンへフォーカスが戻る。
- 背後は aria-hidden ではなく inert にする。aria-hidden は読み上げだけ隠し、Tab では到達できてしまう
- 開いたら最初の入力欄へ、閉じたら開いたボタンへフォーカスを戻す。戻さないと文書の先頭に飛び、位置を見失う
- Tab の循環は最後→最初・Shift+Tab の最初→最後の2箇所だけ書けばよい。それ以外はブラウザに任せる
- JS
使い分け表
| パーツ | 操作 | 技術 | 向く場面 | 状態 |
|---|---|---|---|---|
| 本文へスキップ Skip Link | クリック | JS | ナビが多く本文まで Tab が何回も要るページ・全ページ共通のヘッダーを持つサイト | default / focus |
| フォーカスリングの設計 Focus Ring (:focus-visible) | クリック | JS | デザインシステムのフォーカス表示を決める・ボタン・リンク・入力欄・チェックの共通処方 | default / focus |
| ARIA タブ（roving tabindex） Roving Tabindex Tabs | クリック | JS | 同じ領域で内容を切り替えるタブ・Tab 1 回でタブ列を通り抜けさせたい画面 | default / focus |
| ライブリージョンの読み上げ順 ARIA Live Region | クリック | JS | カート追加・保存の結果を画面を見ずに届ける・エラーだけ割り込みで読ませたい通知 | default / focus |
| モーション設定の切替 Reduced Motion Toggle | クリック | JS | OS 設定に加えサイト内でも動きを減らせる設定・跳ねる・流れる装飾を止める切替 | default / focus |
| 文字サイズ切替 Font Size Switcher (rem) | クリック | JS | サイト内で文字サイズを 3 段階に変える設定・rem で組んだ部品が追従するかの確認 | default / focus |
| アクセシブルなツールチップ Accessible Tooltip (aria-describedby) | ホバー | JS | ボタンやヘルプアイコンの補足説明・フォーカスで即座に説明を読ませたい場面 | default / hover / focus |
| フォーカストラップ Focus Trap (dialog + inert) | クリック | JS | 入力を伴うモーダル（招待・確認）・背後を Tab と読み上げから完全に外したい場面 | default / focus |
| 読み上げ専用テキスト Visually Hidden Text | クリック | JS | 「もっと読む」が並ぶお知らせ一覧・見える文言は短く、リンク名に文脈を足したい場面 | default / focus |
| 強制カラーモード対応 Forced Colors Mode Support | クリック | JS | Windows ハイコントラストで壊れない部品・背景色だけで形を作った UI の点検 | default / focus |
| エラーサマリ Error Summary | 入力 | JS | 送信時にまとめて検証するフォーム・エラー箇所へリンクで飛ばせたい長いフォーム | default / focus / error / success |
| キーボード操作の可視化 Key Press Visualizer | クリック | JS | j／k で移動するメール・一覧アプリ・? で一覧を出す慣習の実装 | default / focus |
| アクセシブルなアコーディオン ARIA Accordion | クリック | JS | FAQ・利用条件など見出しで折りたたむ本文・見出しジャンプで一覧できる構造にしたい場面 | default / focus |
| 透過・ぼかしの代替 Reduced Transparency Fallback | クリック | JS | 地図・写真の上に重ねるガラス質感パネル・透過を減らす OS 設定への対応 | default / focus |
すべての見本（14件）
- クリック
本文へスキップ解説あり実例あり
Skip Link
Tab を1回押すと最初に「本文へスキップ」が現れ、Enter でナビ4件を飛ばして本文へフォーカスが移る。下の帯に今どこにフォーカスがあるかを表示。
- JS
- クリック
フォーカスリングの設計解説あり実例あり
Focus Ring (:focus-visible)
:focus-visible で「キーボードのときだけ」2px のリングを 2px 離して描く。角丸に追従し、ダーク背景では白＋藍の二重輪。マウスクリックでは出ない。
- JS
- クリック
ARIA タブ（roving tabindex）解説あり実例あり
Roving Tabindex Tabs
Tab でタブ列に入り、← → Home End で移動。選択中のタブだけ tabindex=0（roving tabindex）、aria-selected と aria-controls で読み上げが「料金, タブ, 2/4, 選択」になる。
- JS
- クリック
ライブリージョンの読み上げ順解説あり
ARIA Live Region
「カートに追加」は aria-live=polite で今の読み上げが終わってから、エラーは role=alert（assertive）で割り込んで読まれる。帯に読み上げ中の文と待ち行列を可視化。
- JS
- クリック
モーション設定の切替
Reduced Motion Toggle
「動きを減らす」スイッチで data-motion="reduce" を付け、跳ねるドットと流れるお知らせを止める。初期値は OS の prefers-reduced-motion。
- JS
- クリック
文字サイズ切替
Font Size Switcher (rem)
小／標準／大で html の font-size を変える。rem で組んだカードは余白・幅・ボタンごと追従し、px で書いた注記だけ取り残されるのが見える。
- JS
- ホバー
アクセシブルなツールチップ解説あり
Accessible Tooltip (aria-describedby)
ホバーは 300ms 待ってから、フォーカスとタップは即座に出る。role=tooltip を aria-describedby で結び、Esc で閉じる。帯に「保存, ボタン, 説明: …」と読まれる形を表示。
- JS
- クリック
フォーカストラップ解説あり
Focus Trap (dialog + inert)
<dialog>.showModal() で開き、背後のページに inert を付けて Tab も読み上げも届かなくする。Tab は中で循環し、閉じると開いたボタンへフォーカスが戻る。
- JS
- クリック
読み上げ専用テキスト
Visually Hidden Text
3つの「もっと読む」に、見た目には出ない「：〜について」を sr-only で足す。切替で隠し文を可視化し、支援技術のリンク一覧でどう区別されるかを帯に表示。
- JS
- クリック
強制カラーモード対応
Forced Colors Mode Support
Windows のハイコントラスト（forced-colors: active）では背景色と影が消える。透明な border を持たせた「対応済み」と、色だけで形を作った「未対応」を模擬トグルで比べる。
- JS
- 入力
エラーサマリ解説あり実例あり
Error Summary
送信すると先頭に「3 件の入力に問題があります」が現れてフォーカスが移り、各項目へのリンクで飛べる。項目側は aria-invalid と aria-describedby で理由が読まれる。
- JS
- クリック
キーボード操作の可視化実例あり
Key Press Visualizer
j / k で選択が動き、Enter で開く、? で一覧が出る。押したキーが右下に浮かんで消えるので、動画や説明会で「何を押したか」が伝わる。
- JS
- クリック
アクセシブルなアコーディオン解説あり
ARIA Accordion
見出し（h3）の中にボタンを置き、aria-expanded と aria-controls で開閉を伝える。↑↓ Home End で見出し間を移動。帯に「配送は…, 見出しレベル3, ボタン, 展開」を表示。
- JS
- クリック
透過・ぼかしの代替
Reduced Transparency Fallback
地図のような騒がしい背景の上のガラス質感パネル。prefers-reduced-transparency: reduce では不透明＋境界線に切り替える。模擬トグルで見比べられる。
- JS