アクセシビリティは、完成後に足す装飾ではなく、UIの使いやすさを最初から支える設計条件です。 AIに画面を作らせるときも、見た目の指示だけではなく、意味構造、操作方法、状態変化、検証方法を同時に伝える必要があります。
このセクションでは、アクセシビリティの考え方を整理し、AI生成UIでも確認すべき意味構造、操作方法、状態変化、検証方法を学びます。
このセクションの記事
| ページ | 学べること |
|---|---|
| アクセシビリティ概要 | WCAGの基本、UIで見るべき観点、デザインプロンプトに含める要件 |
このセクションで重視すること
意味のあるHTMLから始める — 見た目の再現より先に、見出し、リンク、ボタン、フォーム、状態の意味を明確にする
キーボード操作を前提にする — マウスやタッチだけでなく、Tab、Enter、Space、Escapeで操作できるUIにする
色だけに頼らない — エラー、成功、警告、選択状態を、テキストやアイコン、形状でも伝える
AIの出力を検証する — 生成AIが「アクセシブル」と言っても、そのまま信じず、ブラウザ・自動検査・手動操作で確認する
先に読んでおくとよいページ
- UIプロンプトの基本 — AIにUI要件を伝える基本
- レスポンシブデザインとアクセシビリティ — コントラストやタッチターゲットを含むスタイリング指示
- UIコンポーネントレイアウトのプロンプト — モーダル、ナビゲーション、フォームなどの構造