JIS A11y - アクセシビリティ診断

About this plugin

JIS X 8341-3:2016（= WCAG 2.0）のコントラスト比を、日本語のUIで、Figmaのデザイン段階のまま診断できるアクセシビリティ診断プラグインです。フレームを選ぶだけで、中のテキストをまとめてチェック。OK / NG / 要確認がひと目で分かり、NGはその場で文字色・サイズを調整して直せます。公共・自治体の案件では JIS X 8341-3 の AA 準拠が事実上の要件。海外製ツールはWCAG表記が中心で「JIS X 8341-3:2016」を明示したものはほとんどありません。日本の制作現場のために作りました。― できること ―一括診断：選択フレーム内のテキストを全走査し、コントラスト比とAA/AAA判定を一覧表示あらゆる背景に対応：テキストの真下の背景を自動で読み取り。単色・カードの上・重なり図形・半透明・グラデーション・画像・ぼかしまで対応。複雑な背景は実際の色をサンプリングし、最も読みづらい箇所を基準に判定しますその場で修正：文字色・文字サイズを変えるとコントラスト比がリアルタイム更新。OKになったらワンクリックでデザインに反映キャンバスにマーカー：NG / 要確認の箇所をキャンバス上にハイライト。結果リストと双方向で連動JISの該当項目を表示：1.4.3 コントラスト(AA) / 1.4.6(AAA) など、根拠を日本語で明示非テキストの3:1診断（任意）：図形・UI部品のコントラスト（WCAG 2.1 1.4.11）もトグルでチェック ※JIS X 8341-3 の範囲外であることを明示― 使い方（3ステップ）―フレームまたはテキストを選択「コントラスト診断」を押すNG項目をその場で修正― ご注意 ―本プラグインはデザイン段階で機械的に判定できる「コントラスト比」を診断します。代替テキスト・見出し構造・キーボード操作など実装に依存する項目は、現時点では対象外です。背景が画像でも、その上の TEXT ノードは判定します（背景の実際の色をサンプリング）。ただし、ラスター画像に焼き込まれた文字（テキストではない文字）自体は走査しません。なお、JIS X 8341-3:2016 への「準拠」の表明には、全達成基準の試験と結果の公開が必要です。本プラグインは、そのうちコントラスト（1.4.3／1.4.6）の確認を支援するものです。― 次に作っているもの：見出しの注釈 ―スクリーンリーダーは「見出し」を手がかりにページを読み進めます。文字を大きくしただけの見出しは、見た目は見出しでも、読み上げには見出しとして伝わりません。そこで、デザインの段階で見出しレベルを注釈でき、レベルの飛びも見つけられる機能を開発しています。実装より前、Figmaの時点で決められるようにするためです。※開発中の機能です。公開時期は未定です。このほか、代替テキスト・色の使い方・ターゲットサイズの診断、NGのAI一括修正、コントラスト診断の記録を残せるレポート出力も準備中です。開発の様子は X(@yama_plugins) で公開しています。― フィードバック募集 ―うまく判定できないデザインや、ほしい機能があればコメント欄で教えてください。制作現場で本当に使えるものにしたいので、ひとことでも助かります。#アクセシビリティ #JIS #コントラスト #a11y #WCAG