はじめに
みなさんは、アクセシブルなコンポーネントをFigmaで作りたいと思ったことはありますか?
UI周りの仕様をFigma内で完結させようとした時、コメントやアノテーションを使って aria-label
とかを指定してもなかなか気がつきにくいものです。
そのため、この記事では、Code Connect を使って、 role属性や WAI-ARIAを意図的にデザイン上で表現する方法を解説します。
Code Connectとは?
Code Connectについてこちらの記事で紹介しているのでぜひご覧ください!
Code Connect を使ってアクセシブルなコンポーネントを作成する
この記事では、スイッチボタンをベースに説明していこうと思います
スイッチボタンのアクセシビリティについては、こちらをご覧ください!
① Figmaのコンポーネントを準備する
アクセシブルなコンポーネントをFigmaで作るに当たって、非表示の aria-label
用のテキストを テキスト プロパティで作成しています。
また、他のプロパティには、スイッチボタンのON/OFFを切り替える Checked というプロパティと disabled 状態を示す Disabledを入れています。
② コード上のコンポーネントを準備する
いかのような toggle コンポーネントを作成します。
import { InputHTMLAttributes } from "react"
interface props extends InputHTMLAttributes<HTMLInputElement> {
checked: boolean
disabled: boolean
}
export const Toggle = ({
checked,
disabled = false,
...props
}: props) => {
return (
<input
className={`toggle-style ${checked && "is-checked"}`}
type="checkbox"
disabled={disabled}
{...props}
/>
)
}
③ コードコネクト用のファイルを生成する
以下のコマンドを入力し、コードコネクト用のファイルを生成します。
npx figma connect
生成されたファイルを以下のように修正します!
import { Toggle } from "./Toggle"
import figma from "@figma/code-connect"
figma.connect(
Toggle,
"https://www.figma.com/design/2NoYIOk55maQuNYSvCmKFp/qiita-design%231841---Figma-Plugins%E7%94%A8-issue?node-id=10008%3A606",
{
props: {
checked: figma.boolean("Checked"),
disabled: figma.boolean("Disabled"),
ariaLabel: figma.string("aria-label"),
ariaChecked: figma.boolean("Checked"),
},
example: (props) =>
<Toggle
checked={props.checked}
disabled={props.disabled}
aria-label={props.ariaLabel}
aria-checked={props.ariaChecked}
/>,
},
)
④ Figmaのコンポーネントに紐付ける
以下のコマンドをターミナル入力することで、コード上のコンポーネントをFigmaのコンポーネントに紐付けます。
npx figma connect publish
紐付けに成功すると、FigmaのDevモードのインスペクトパネルで以下のように表示されます。
上記の画像のように、表示されることで、aria-label
を忘れたりすることは少なくなるでしょう!
ただ、表示される内容が、
aria-label=表示する
→ aria-label="表示する"
aria-checked=true
→ aria-checked={true}
といった感じに表示してもらえると、コピペでそのまま使え、嬉しいのになと感じました。
まとめ
この記事では、Code Connect を使ってアクセシブルなコンポーネントを作成する方法をまとめした。
ぜひこの記事を参考にコード上でも、Figma上でもアクセシブルなコンポーネントを作るようにしてみてはいかがでしょうか?
最後まで読んでくださってありがとうございます!
普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。