Figmaにおける アクセシビリティ（Accessibility） とは、
「誰でも使いやすいデザインをつくるための配慮を、Figma上で設計段階から行うこと」
を指します。
🎯 アクセシビリティとは
アクセシビリティ（Accessibility）は、
障害のある人・高齢者・色覚特性のある人などを含めた すべてのユーザーが使いやすいデザイン にすることを目的としています。
Figmaでは主に ビジュアルと操作の面 でそれを支援します。
🧭 Figmaで配慮すべき主なアクセシビリティ項目
1. 色のコントラスト
テキストと背景の明度差を確保します（WCAG 2.1 準拠）。
通常の文字：コントラスト比 4.5:1以上
大きな文字（18pt以上または太字14pt以上）：3:1以上
🔧 Figmaプラグインで確認可能：
“Contrast”
“Able”
“Stark”（有名なアクセシビリティチェックプラグイン）
2. 色だけに頼らない情報設計
色の変化（例：赤＝エラー）だけで意味を伝えない。
例）アイコン（⚠️）やテキスト（“Error”）も併用。
状態（有効・無効・警告など）を 形やラベル でも伝える。
3. フォントサイズ・行間
小さすぎる文字は避ける（最低 12〜14pt 推奨）。
行間（line height）は1.4〜1.6倍程度を目安にする。
Auto Layout を使うと、テキストが拡大されても崩れにくくなります。
4. キーボード操作・フォーカスの可視化（UI設計段階で）
クリックだけでなく、Tabキー操作 で要素を辿れる設計を意識。
フォーカス時に**明確なハイライト（アウトラインや影）**をデザインしておく。
5. 音声リーダー（スクリーンリーダー）対応を意識
Figma上では直接読み上げ設定はできませんが、
ボタンやリンクに 明確なテキストラベル を付ける
意味のあるコンポーネント名 を使う（例：「btn_submit」ではなく「Button / Primary」など）
開発者が読み上げラベルを設定しやすくなります。
6. レスポンシブ対応・レイアウトの柔軟性
Auto Layout と Constraints を活用し、
画面サイズが変わっても情報が欠けないようにする。
テキスト量が増えてもボタンが崩れない設計に。
7. テキストコントラスト・シミュレーション
🔧 プラグイン “Sim Daltonism” や “Contrast” を使うと、
色覚特性（赤緑・青黄など）での見え方を確認可能。
🧩 Figmaでの実践例
ボタンコンポーネント に対して：
ホバー・フォーカス・無効状態をそれぞれVariantで定義
コントラスト比を4.5:1以上に調整
テキストラベルを付け、アイコンだけのボタンは避ける
フォーム では：
入力欄のエラー時に、赤色＋メッセージ＋アイコンで通知
必須項目には「*」とテキスト補足を併用
💡 まとめ
項目 目的 Figmaでの対応方法
コントラスト 見やすくする Contrastプラグインなどで確認
色依存を避ける 意味を正確に伝える 形・テキストも併用
テキストサイズ 読みやすく 最低12〜14pt、line-height 1.5倍
フォーカス可視化 操作性を確保 Hover/Focus variantで表現
名前付け スクリーンリーダー補助 意味のあるレイヤー・コンポ名に
