【実用】アクセシビリティのためのFigmaプラグイン2024
アクセシビリティをチェックする機能が世の中にはいっぱいあるけど、どれを実際に使えばいいのか迷いますよね。
今回は以下の判断基準から厳選したトップ6のプラグインを紹介します。
Figma公式から紹介されている
海外のFigmaプラグイン紹介記事で紹介されているケースが高い
プラグインユーザー数の多さ
そして嬉しいことに、無料で使えるプラグインを集められました🎉
1. Stark
https://www.figma.com/community/plugin/732603254453395948
https://www.getstark.co/
ポイント
ユーザー数382,000人
Figmaの祭典Config2024で紹介
ユーザー数がアクセシビリティ系のプラグインの中で一番多い
無料プランでもほとんどのアクセシビリティーの問題を確認できる
チームの大半が身体に障害を持っている方々で作り上げられたツールであり、アクセシビリティ・ワークフローの合理化に役立つ統合ツールの強力な組み合わだと言われています。
できること
Contrast (文字色と背景色のコントラスト)
Typography (タイポグラフィ)
Vision Simulator (視覚に関するシミュレーター)
Touch Targets (タッチターゲットのサイズ)
Alt-Text (画像の代替テキスト)
Focus Order (フォーカス順序)
Landmarks (ランドマーク)
Headings (見出し）
Contrast、Typography、Vision Simulator、Touch Targetsはデザイン段階で使用し、Alt-Text、Focus Order、Landmarks、Headingsは、デザイン後、開発実装前に使用できるツールです。
コントラスト・チェッカーは色の提案などもしてくれて便利です。
参照：https://accessible-usable.net/2023/09/entry_230922.html
2. A11y: Color Contrast Checker
参照：https://www.figma.com/community/plugin/733159460536249875/a11y-color-contrast-checker
ポイント
ユーザー数238,000人
カラーコントラストチェックに特化
リアルタイムでオブジェクトのカラーを調整できる機能が搭載されています。
3. Color Blind
参照：https://www.figma.com/community/plugin/733343906244951586/color-blind
ポイント
ユーザー数88,400人
Figmaの祭典Config2024で紹介
ビジョン・シミュレーター（色弱者の見え方シミレーション）に特化
※画像に対しては無効です。
4. A11y - Focus Order
参照：https://www.figma.com/community/plugin/731310036968334777/a11y-focus-order
ポイント
ユーザー数27,800人
Microsoftが提供するプラグイン
Focus Order (フォーカス順序)に特化
5. Axe for Designers
ポイント
ユーザー数14,000人
アメリカのデジタルアクセシビリティに関するソフトウェアとサービスに特化したDeque Systems社が開発
できること
Figma 上の任意のフレームに対する Auto Scan (自動検証) によって、以下のアクセシビリティ要件を検証できるようになっています。
文字色と背景色のコントラスト ※手動での検証も可能です。
タッチターゲットのサイズ
見出しの有無
実装にあたっての注釈を付ける Annotation (アノテーション) という機能
少しデメリットと感じることも、、
見出しの有無は、何をもって見出しとみなすかが明示的でなく、私がやってみた限りでは、「見出しがない」という検知をなくすことができませんでした。
アノテーション機能は、FimgaのDivモードにあるので、Fimgaを有料版を使用する際は特に必要ない機能になります。
参照：https://accessible-usable.net/2022/12/entry_221213.html
Pros and Cons of 7 Top Web Accessibility Testing Tools
6. Text Color Contrast Checker
https://www.figma.com/community/plugin/1223151482923676830/text-color-contrast-checker
ポイント
ユーザー数1,600人
一般的なツールやプラグインでは、配色の組み合わせ（例えばボタンの背景色とフォント色）を評価できましたが、Text Color Contrast Checkerはフォントの大きさや太さを変えた時の可読性が向上するかどうかもチェックします。
開発は日本の企業で、プラグイン開発の背景を以下の記事にまとめられています。
参照：アクセシビリティを追求するデザイナー向けのFigmaプラグインを開発しました。
結論どのプラグインを使うといい？
Stark（無料版）で、包括的なアクセシビリティチェックを行う
基本的にはアクセシビリティチェックはこれだけでOKと思います。無料版でできることが多いし、Figma公式、シェア率も高く国際的に使用されているプラグインなので安心感があります。ぜひ使ってみてくださいー！
その他
A11y: Color Contrast CheckerとColor BlindとText Color Contrast Checker
実際のデザインに反映させながらカラー調整を行うのに便利そうです。
A11y - Focus Order
フォーカス順序をチェックするのはStarkでも可能ですが、Microsoftが提供しているこちらのプラグインも良さそうです。
追記
今回は実用で使えるFigmaのアクセシビリティのプラグインを紹介させていただきました。
Figmaのプラグインなので、使用するタイミングは、デザイン中もしくは、開発に引き継ぐタイミングに使えるツールになります。
ただ、Figmaのアクセシビリティプラグインだけでは、キーボード操作の検証、スクリーンリーダーの動作確認、動的コンテンツやインタラクションのアクセシビリティ、音声や動画コンテンツの字幕・テキスト代替などの開発後に初めて確認できる項目は確認できません。
完全なアクセシビリティを実現するには、開発後のアクセシビリティ検証ツールGoogle Lighthouseやaxeなどのツールを組み合わせて検証します。
※2023年下半期以降の日付で発行されている以下の記事を参考にさせていただきました(2024年10月末日)。
Logrocket：10 Figma accessibility plugins that make up for the lack of inbuilt options
https://blog.logrocket.com/ux-design/10-figma-accessibility-plugins/
Medium：Exploring the Best Figma Accessibility Plugins
https://medium.com/@thefinchdesignagency/exploring-the-best-figma-accessibility-plugins-1d878080012a
sitepoint：The Best Figma Plugins to Enhance Your Design Workflow in 2024
https://www.sitepoint.com/figma-plugins/
この記事を書いた人：ITO KANAKO
デザイナー(WEB／UI／UX)
カバー画像：Nishimori
シリーズ記事一覧
【基礎知識】WCAG？JIS？？アクセシビリティガイドラインの理解を深めよう
【設定】アクセシビリティの基準はこうやって決められる！
【徹底解剖】アクセシビリティJIS X 8341-3:2016とは？
【アクセシビリティの登竜門】アクセシビリティ試験とは？
【実用】アクセシビリティのためのFigmaプラグイン2024