アクセシビリティのアノテーションは、デザインワークフローの中で最も退屈な作業の一つです。すべてのテキストと背景の組み合わせでコントラスト比をチェックし、スクリーンリーダー用の見出し階層にアノテーションを付け、タッチターゲットが44×44pxの最小要件を満たしているかを確認し、すべての画像に代替テキストを提案し、すべてのインタラクティブコンポーネントにARIAラベルを文書化する必要があります。50画面の典型的なアプリでは、手動でのアノテーション作業に20〜40時間かかります。
Figmaの AI Design Agent は、2026年5月にローンチされたアクセシビリティ Skills と組み合わせることで、この作業の機械的な部分を自動化します。デザインを分析し、数学的コンプライアンス(コントラスト比、タッチターゲットサイズ)をチェックし、アノテーション レイヤーを生成することで、1画面あたりのアノテーション時間を数時間から数分に短縮できます。
重要なポイント
Figma AIはアクセシビリティの専門知識を置き換えるものではなく、退屈なアノテーション作業を自動化するものです。エージェントはアクセシビリティ仕様の初稿を生成し、a11y専門家がそれをレビューして改良することで、仕様作成時間を20〜40時間(50画面のアプリの場合)から2〜4時間のレビューと改良作業に短縮します。数学的なチェック(コントラスト、寸法)は非常に正確ですが、文脈的なチェック(代替テキスト、フォーカス順序)には人間のレビューが必要です。
Figma AIが自動的にチェックできる項目は?
| チェック種別 | エージェントの動作 | 精度 | 人間のレビューが必要? |
|---|---|---|---|
| 色のコントラスト | テキスト/背景のペアをWCAG AA/AAAに対してチェック | 非常に高い(数学的) | 不要(特殊なケースを除く) |
| タッチターゲットサイズ | 44×44px未満のインタラクティブ要素をフラグ | 非常に高い(寸法) | 不要 |
| 見出し階層 | スクリーンリーダー用のH1→H6構造をアノテーション | 高い(構造的) | 簡単な確認 |
| 代替テキストの提案 | 画像の説明的な代替テキストを生成 | 中程度(文脈が必要) | 必要 — 目的をレビュー |
| フォーカス順序 | レイアウトに基づいてキーボードタブ順序を提案 | 中程度(レイアウト依存) | 必要 — ロジックを確認 |
| ARIAラベル | コンポーネントのARIAロールとラベルを提案 | 中程度(文脈的) | 必要 — セマンティクスを確認 |
| フォントサイズの最小値 | 読みやすいサイズの閾値を下回るテキストをフラグ | 非常に高い | 不要 |
| 色のみの情報 | 色のみで伝達される状態を識別 | 高い | 簡単な確認 |
パターンとしては、数学的・寸法的チェックは非常に信頼性が高く、無監督で実行できます。文脈的・意味的チェックは専門家のレビューが必要な出発点です。これは適切な分担です:AIが退屈な測定作業(アノテーション時間の大部分)を処理し、人間が判断を要する部分(ユーザーニーズの理解が必要)を担当します。
エージェントでアクセシビリティチェックを実行する方法
ステップ1:チェックしたいフレームを選択します。
ステップ2:エージェントに指示します:「この画面でアクセシビリティチェックを実行してください。コントラスト比のWCAG AAコンプライアンスをチェックし、タッチターゲットが少なくとも44×44pxであることを確認し、見出し階層にアノテーションを付け、画像の代替テキストを提案し、色のみで伝達される情報をフラグしてください。」
ステップ3:エージェントがキャンバス上にアノテーションレイヤーを作成し、結果を表示します:合格項目には緑のチェック、失敗には赤いフラグ、レビューが必要な項目にはオレンジの警告が表示されます。
ステップ4:精度が中程度の項目をレビューします:代替テキストの提案、フォーカス順序、ARIAラベル。機能の目的とユーザーコンテキストに関する知識に基づいて調整します。
より一貫した結果を得るには、組織固有のアクセシビリティ要件(標準的なWCAGを超える場合がある)をエンコードしたカスタム/accessibility-check Skillを作成します。あなたのスキルには「最小フォントサイズは14px(WCAGの12pxではなく)」や「すべてのインタラクティブ要素は、ブランドブルーのアウトラインを使用した視覚的なフォーカスインジケータを持つ必要がある」などが含まれるかもしれません。
よくある質問
AI生成のa11y仕様はアクセシビリティテストに取って代わりますか?
いいえ — AI生成の仕様は最終的な監査ではなく、出発点です。真のアクセシビリティテストには、スクリーンリーダーテスト(VoiceOver、NVDA)、キーボードナビゲーションテスト、そして理想的には障害を持つ人々とのユーザーテストが必要です。エージェントはアノテーションを処理し、人間が検証を行います。仕様は文書化レイヤーであり、テストは検証レイヤーです。
エージェントはどのWCAGレベルをチェックしますか?
コントラストチェックはWCAG AA(通常テキストで4.5:1の比率、大きなテキストで3:1)とAAA(7:1の比率)の両方をサポートしています。プロンプトやSkillでターゲットレベルを指定してください。多くの組織はAAを目標とし、AAAは政府や医療アプリケーションで推奨されます。
組織のカスタムアクセシビリティSkillを作成できますか?
はい — そして組織が標準的なWCAGを超える要件を持っている場合は作成すべきです。多くの企業にはブランド固有のアクセシビリティガイドラインがあります:ブランドカラーのより高いコントラスト比、特定の最小フォントサイズ、必須のフォーカスインジケータスタイル、WCAGの最小値を超えるタッチターゲットサイズなど。これらをカスタムSkillにエンコードすることで、エージェントが自動的にあなたの特定の基準をチェックできるようになります。
AIの代替テキストの精度はどの程度ですか?
中程度です — エージェントは画像で視覚的に認識したものを説明します。しかし、良い代替テキストには、文脈における画像の目的を理解することが必要です。装飾的なヒーロー画像は、情報グラフとは異なる代替テキスト(または代替テキストなし)が必要です。商品写真には説明的なテキストが必要ですが、装飾的な背景には不要です。画像のユーザーエクスペリエンスにおける役割に基づいて、AI生成の代替テキストを常にレビューして改良してください。
これは既存のデザインでも機能しますか、それとも新しいデザインのみですか?
両方で機能します — そして遡及的なチェックが最も価値の高い使用例かもしれません。エージェントを既存のフレームに向けてアクセシビリティレビューを依頼してください。すでに存在するものを分析してアノテーションを生成します。これは、チームがアクセシビリティ基準を採用する前にデザインされた画面を監査する際に特に強力で、修正の優先順位を導く迅速なベースライン評価を提供します。
開示:この記事の一部のリンクはアフィリエイトリンクです。私たちは個人的にテストして定期的に使用しているツールのみを推奨しています。完全な開示ポリシーをご覧ください。