AIが生成したUIをどうアクセシビリティ検査するか――デザイナー向けチェックリスト
生成UIは画面ごとに変わっても、キーボード、スクリーンリーダー、コントラスト、状態通知で破綻してはいけません。デザイナーが確認すべき6つのアクセシビリティ原則を整理します。
AIが10秒で作った予約画面はもっともらしく見えます。けれど、Tabキーを押すとフォーカスが消える。「再生成」アイコンの意味を読み上げられない。結果が変わってもスクリーンリーダーには通知されない。そんな状態なら、画面が完成していても、ある人にとっては使い始めることすらできないプロダクトです。
生成UIは、その都度異なるカード、フォーム、チャート、ボタンを組み合わせます。だからアクセシビリティは最後に数画面を検査する作業ではありません。生成されても壊れないルールを先に作ることです。
1. キーボードだけで最後まで操作できるか
マウスを使わず、Tab、Shift+Tab、Enter、矢印キーだけで、入力、選択、結果の修正、保存まで試します。生成されたカードのボタンやメニューにも順番に到達でき、モーダルを開いたときにフォーカスが背後の画面へ逃げてはいけません。WCAG 2.2はキーボード操作と、フォーカスが隠れないことを定めています。
2. いま操作している場所が見えるか
ストリーミング結果や新しいパネルが開く場面では、フォーカス表示が埋もれがちです。ボタン、チップ、表のフォーカスを明確なアウトラインや色の変化で示し、変化前後のコントラストを確認してください。淡い影だけでは、現在位置を十分に示せないことがあります。W3C Focus Appearance
3. 名前・役割・状態が読み取れるか
「保存」アイコンの意味、生成中ボタンの無効状態、開いているアコーディオンは、支援技術にも伝わる必要があります。コンポーネントの名前、役割、値、状態と変更通知がプログラムから伝達されるか確認しましょう。W3CのARIAガイドは、動的コンテンツや高度なUIコントロールを支援技術へ伝える方法を扱っています。WAI-ARIA
4. 色だけに意味を担わせていないか
おすすめの緑、エラーの赤、選択済みフィルターの淡い背景だけで状態を伝えてはいけません。テキスト、アイコン、パターンも併用し、文字のコントラストを検査します。AIが新しい背景やバッジを作るなら、許容するカラートークンとコントラストの基準はプロンプトではなくデザインシステムの制約として持たせます。
5. 状態を知らせ、元に戻せるか
「生成中」「根拠なし」「3つの選択肢に更新」のような状態を、見た目だけ変えて済ませないでください。状態変化を読み上げられ、ユーザーは修正、再試行、取消ができる必要があります。Appleも、生成結果のそばにEdit、Undo、Retryのようなコントロールと変更のフィードバックを置くことを勧めています。Apple HIG
6. AIが失敗しても、中心となる作業を完了できるか
生成が遅い、または失敗したとき、空のカードと「再試行」だけを残してはいけません。通常検索、手入力、基本テンプレートへ進める代替経路を設計します。Appleも、AIを使わない、または使えない場合にも良い体験を提供するよう案内しています。
自動テストに通っただけで終わらせないでください。実際に生成された結果を、キーボードとスクリーンリーダーで通してみましょう。生成UIの目的は画面を増やすことではありません。どんな画面が現れても、ユーザーが次の行動を見失わないようにすることです。