Figmaデザインアクセシビリティプラグイン
コードを1行も書く前にアクセシビリティの問題を発見できます。Figma上でレイヤーを選択するだけで、WCAGコントラストとターゲットサイズのチェックを即座に確認できます。アップロードもAPIトークンも不要です。
カラーコントラスト
半透明の塗りにはアルファ合成を考慮したWCAG AA/AAAのコントラスト計算を使用します。親フレームをたどって実際の背景色を特定し、Webスキャナーと同じ計算式を使います。
ターゲットサイズ（WCAG 2.5.8）
プロトタイプのクリックまたはタップ反応を持つノード（インタラクティブ要素）のうち、24×24px未満のものを検出します。
Figma Communityマーケットプレイスには未掲載です。プラグインは完全に動作しますが、マーケットプレイスへの掲載はまだ行われていません。それまでの間は、以下の手順でソースからインストールしてください。
ソースからインストール
- 1
ソースをダウンロード
AccessiSightのリポジトリをクローンするか、packages/figma-pluginフォルダをダウンロードしてお使いのコンピューターに保存してください。
- 2
Figmaのプラグイン開発メニューを開く
Figmaデスクトップアプリで、Menu → Plugins → Development → Import plugin from manifest… に進んでください。
- 3
マニフェストを選択
ダウンロードしたpackages/figma-pluginフォルダ内にあるmanifest.jsonファイルを選択してください。
- 4
選択したレイヤーで実行
ファイル内で任意のテキストまたはインタラクティブなレイヤーを選択し、Plugins → DevelopmentからAccessiSightを実行してください。選択を変更するたびに問題が即座に表示されます。