アクセシビリティ
GunjoUI の UI が、キーボード、支援技術、モバイル実機、低コントラスト環境で破綻しないための確認基準です。
Keyboard
キーボードで完結する
開閉と選択
Dialog、Popover、Menu、Combobox、Command は、Tab / Shift+Tab / Enter / Space / Escape / Arrow で自然に操作できる必要があります。
フォーカスを戻す
オーバーレイを閉じた後は、原則として開いたトリガーへフォーカスを戻します。ユーザーの現在地を奪いません。
フォーカスリングを隠さない
見た目のために outline を消す場合は、同等以上に見える focus-visible 表現を用意します。
スクロール領域の中でも操作できる
固定ヘッダー、プレビュー iframe、fake browser、ScrollArea 内でも、フォーカスが見切れず操作できるか確認します。
確認チェック
PR 前、または人間の目視確認前に見る項目です。
キーボードだけで閉じられる
Escape、閉じるボタン、キャンセル操作が keyboard で到達・実行できます。
フォーカスが見切れない
ScrollArea、iframe preview、fake browser、overlay 内で focus ring が親の overflow に負けていません。
Labels
意味を伝える
アイコンだけに依存しない
アイコンのみ、状態切替、削除、外部タブ、閉じる、コピーなどは tooltip と aria-label の意味を揃えます。
無効理由を説明する
disabled control は、なぜ使えないかを tooltip で説明します。disabled 要素が hover / focus を受けない場合は wrapper を trigger にします。
外部リンクを明示する
`target="_blank"` のリンクには外部タブアイコンと支援技術向け補足を付けます。
状態を色だけで伝えない
成功、警告、危険、選択、現在地は、文言、アイコン、形、ラベル、aria 属性でも伝えます。
判断例
抽象的な原則を、実装・レビュー時の具体的な判断に落とします。
| 場面 | 避ける | 推奨 | 理由 |
|---|---|---|---|
| アイコンのみの閉じるボタン | X アイコンだけを置く | aria-label と Tooltip を同じ意味で付ける | 見た目だけでは操作の意味が伝わらないため。 |
| 無効な共有ボタン | グレーアウトだけにする | なぜ共有できないか、どうすれば有効になるかを tooltip で伝える | 無効理由は状態ではなく情報として必要なため。 |
Mobile
モバイル実機で確認する
入力でズームさせない
input / textarea / select / command input は、モバイルで実効 16px 以上にし、フォーカス時のブラウザズームを避けます。
タップ状態を見せる
チャート、リスト、タイムラインなど、タップ対象と tooltip の位置がずれる UI では選択状態やハイライトを表示します。
ツールチップを追従させすぎない
タップで出した tooltip は読み終わるまで残してよいが、スクロール中に不自然についてくる場合は閉じる・再配置する挙動を検討します。
横スクロールの空状態を読めるようにする
Table / DataTable の空状態は、狭い幅でもメッセージが読める配置にします。
判断フロー
上から順に確認し、途中で判断できる場合はそこで決めます。
- 1
実機で入力にフォーカスする
親ではなく実際の input / textarea / select の computed font-size を確認します。
- 2
タップ後の状態を読む
chart、tooltip、popover、toast が、タップした対象と視覚的に結びついているか確認します。
- 3
スクロール中の挙動を見る
タップで開いた tooltip や overlay が、スクロール時に画面へ不自然に追従しないか確認します。
Contrast
読める配色にする
文字を載せる面は subtle を基本にする
Alert、Banner、Toast など文字を載せる semantic 面は、`*-subtle` と `*-subtle-foreground` の組み合わせを基本にします。
strong は CTA や強い操作に使う
`*-strong` は Button や強い CTA のための色です。長文の背景や通知面に不用意に使いません。
確認チェック
PR 前、または人間の目視確認前に見る項目です。
semantic pair を使っている
Alert / Banner / Toast は `*-subtle` と `*-subtle-foreground` の組み合わせを使い、直値や濃い背景を避けています。
色以外でも状態がわかる
アイコン、ラベル、文言、aria 属性で、成功・警告・危険・現在地・選択状態を補っています。