Figma 用のアクセシビリティ注釈キット「A11y Annotations」

この記事は、アクセシビリティ Advent Calendar 2022 の19日目の記事です。


ウェブサイトやアプリケーションのプロトタイピングツールとして、Figma を使うプロジェクトも多いと思います。私自身は主にワイヤーフレーム作成に Figma を使うことがありますが、ワイヤーフレームを最終的に画面設計仕様書として仕上げるにあたり、要所要所にアクセシビリティに関する注釈を付けるようにしています。たとえば、以下のようなものです。

こうした注釈を介して、アクセシビリティを担保するうえで欠かせない実装上の留意事項について、ワイヤーフレーム (あるいはプロトタイピング) の段階から意識し、チーム内で共有することで、アクセシブルなプロダクト開発をスムーズに進めることが期待できます。

「A11y Annotations」を公開

このたび、Figma で作成したウェブサイト/アプリケーションの画面設計 (ワイヤーフレームやプロトタイプ) に対して、アクセシビリティに関するアノテーション (注釈) を付けるためのキットを、Figma Community にて公開しました。私自身が実際の設計プロジェクトで使っているものを共有させていただくものです。よろしければ、皆さんのプロジェクトやチームの活動で、ご活用いただければ幸いです。

「A11y Annotations」のワイヤーフレームへの適用イメージ
アクセシビリティに関するアノテーション (注釈) が付けられたワイヤーフレーム

「A11y Annotations」の使いかた

同キット内に用意されている「A11y Annotations」フレームの中に、以下のカテゴリーで、アノテーションが格納されています。

アノテーションが格納されている「A11y Annotations」フレーム
「A11y Annotations」フレームのスクリーンショット

各アノテーションはコンポーネントとして作成されています。「A11y Annotations」フレームごと、ご自身の Figma ファイルにコピーいただき、個々のアノテーションを、作成されたワイヤーフレームやプロトタイプにコピー&ペーストしてお使いください。

ペーストされたアノテーションはインスタンスとして配置されます。必要に応じて、要素名を変更したり属性を追記したり、といった編集も可能です。


Figma には、アクセシビリティに関するアノテーションを付加することに特化したキットが、他にもいくつか存在しています。

アノテーションの種類が少ないシンプルなものもあれば多い (細かい) ものもありますし、今回ご紹介した「A11y Annotations」では敢えて用意しなかったアノテーション (たとえば、Tab オーダーやスクリーンリーダーの読み上げ順など) を含むものもあったりします。いろいろと見比べてみて、皆さんご自身のプロジェクトやチームにフィットしそうなものを使ってみると、よいかなと思います。