Figma プラグイン「Axe for Designers」

ウェブサイト/アプリケーションの UI デザインツール「Figma」のプラグインとして、Deque Systems が「Axe for Designers」を公開しました。ウェブアクセシビリティ検証ツール「axe」の開発元として知られている同社が、プロダクト開発におけるアクセシビリティの意識づけを上流工程に前倒し (シフトレフト) すべく、実装前のワイヤーフレームやプロトタイピングの段階で、アクセシビリティに関連するチェックをある程度できるようにしたプラグインです。

現時点でこのプラグインは、Figma 上の任意のフレームに対する Auto Scan (自動検証) によって、以下のアクセシビリティ要件を検証できるようになっています。

それぞれについて、以下、実際に触ってみてわかったことをご紹介します。

文字色と背景色のコントラスト

WCAG 2.1 達成基準 1.4.3「コントラスト (最低限) (レベル AA)」を満たしているかを検証します。テキストの文字サイズが24ピクセル以上 (Bold の文字であれば19ピクセル以上) であれば、文字色と背景色との間に 3:1 以上のコントラスト比が確保されているか、それより小さい文字サイズであれば、4.5:1 以上のコントラスト比が確保されているか、をチェックしてくれます。

「Axe for Designers」の Auto Scan (自動検証) による、文字色と背景色のコントラストのチェック。
Auto Scan (自動検証) によるコントラストのチェック画面

コントラスト比が足りない場合は、修正のヒントとして Color Suggestions (色の提案) のパレットが提示されるので、その中から適用したい文字色または背景色をクリックしてクリップボードにコピーし、Figma 画面右側のプロパティパネルにあるテキストの「塗り」欄にペーストすることができます。

コントラストのチェック画面の下方にある「Color Suggestions (to fix)」で、文字色 (Foreground Color) として #6E6E6E をコピーし、Figma 画面右側のプロパティパネルにあるテキストの「塗り」欄にペーストした様子。
コントラストのチェック画面で文字色の修正をする様子

なお、このコントラストのチェックは、Auto Scan だけでなく、手動での検証 (任意のテキストノードを選択して、その部分だけを対象に検証すること) も可能です。

手動による、任意のテキストノードを選択したうえでの、文字色と背景色のコントラストのチェック。
手動によるコントラストのチェック画面

タッチターゲットのサイズ

WCAG 2.1 達成基準 2.5.5「ターゲットのサイズ (レベル AAA)」を満たしているかを検証します。ボタンなどタッチターゲットとなるオブジェクトについて、その大きさが 44 × 44ピクセル以上あるかをチェックしてくれます。

「Axe for Designers」の Auto Scan (自動検証) による、タッチターゲット (ボタン) サイズのチェック。
Auto Scan (自動検証) によるタッチターゲットのサイズのチェック画面

何をもってタッチターゲットとみなすかについては明示的ではありませんが、フレーム内に配置されたボタンが、以下のいずれかを満たすとき、タッチターゲットとして検証対象になるようです。

なお、この「button」という語ですが、それ以外の、タッチターゲットになりそうな語 (たとえば「CTA」「submit」「save」など) についても同様にいろいろと試したのですが、私がやってみた限りでは、「button」という語以外はタッチターゲットとしてみなされないように見受けられます。

見出しの有無

任意のフレームの中に、見出しがあるかどうかをチェックしてくれます。

「Axe for Designers」の Auto Scan (自動検証) による、見出しの有無のチェック。
Auto Scan (自動検証) による見出しの有無のチェック画面

しかしながら、何をもって見出しとみなすかが明示的でなく、見出しのつもりで配置したテキストにアノテーション (後述) を用いて見出しである旨をマークしてみたり、見出しテキストをコンポーネント化してコンポーネント (インスタンス) 名に「heading」という語を含めてみたり、などいろいろと試してみたのですが、私がやってみた限りでは、「見出しがない」という検知をなくすことができませんでした。

その他の機能

このプラグインでは、実装にあたっての注釈を付ける Annotation (アノテーション) という機能を使うことができます。下図のように、ワイヤーフレームやプロトタイプの中で、ランドマークや見出しレベルをはじめ様々な注釈を付けることで、開発者への申し送りがスムーズにできます。アノテーションは、必要に応じて表示/非表示を切り替えることができます。

「Axe for Designers」のアノテーション機能を使って、大見出しに h1 のアノテーションを付けた様子。
アノテーション機能の画面

また、このプラグインで検証した内容を記録として保存しておき、別途、ログインユーザー専用ウェブページで、ダッシュボードの形で見ることができます。ただ現時点では、ダッシュボード画面を複数人 (チーム) で見たり、ダッシュボード内容をエクスポートして共有する、といったことはできなさそうです。

「Axe for Designers」のログインユーザー専用ウェブページで、ダッシュボードを表示した様子。
ダッシュボードを表示したウェブページ

以上、「Axe for Designers」でできることを簡単にご紹介しました。文字色と背景色のコントラストについては既に他のプラグイン (例 : A11y - Color Contrast Checker) でも検証可能な中で、タッチターゲットのサイズや見出しの有無も検証対象に含めたチャレンジは評価できますが、上述の通り現時点ではまだ挙動が熟れていない印象を受けます。Figma 上のフレーム (ウェブページやアプリケーションの一画面) の中身を自動的に解析して、タッチターゲットや見出しを文脈の中で認識できるようになれば、ものすごく便利になるかもしれません。今後このプラグインがどう発展するか、楽しみにしたいと思います。