Storybook のアドオン storybook-addon-a11y で基本的なアクセシビリティをチェック


こんにちは。Gaji-Labo 横田です。今日はおなじみ Storybook のアドオン storybook-addon-a11y について紹介します。

storybook-addon-a11y

storybook-addon-a11y は Storybook 公式のアドオンで、Deque 社の axe-core を搭載し、WCAG の項目の半分以上を Storybook 上でチェックすることができるアドオンです。
導入は簡単。yarn や npm でアドオンをインストールします。

$ yarn add @storybook/addon-a11y --dev
$ npm i @storybook/addon-a11y

以下のように .storybook/main.ts ファイルにアドオンを追加します。(該当箇所のみ抜粋)

const config: StorybookConfig = {
  addons: [
    '@storybook/addon-a11y',
    ...
  ],
};
export default config;  

これで準備は整いました。
チェック項目の表示はストーリーレベルでカスタマイズすることもできますが、網羅的に対応したい時はデフォルトの設定で使用するのがおすすめです。
さっそくボタンコンポーネントを作成してみます。

Storybook で作成したボタンコンポーネントのストーリー画面。ボタンの背景色は薄いグレー色。

ページ下部に Accessibility タブができ、1 Violations と表示されているのが分かります。
Elements must meet minimum color contrast ratio thresholds 文字と背景色のカラーコントラストが WCAG2 AA の基準に満たないというエラーです。

詳細:https://dequeuniversity.com/rules/axe/4.8/color-contrast?application=axeAPI

Storybook で作成したボタンコンポーネントのストーリー画面。ボタンの背景色は黒色。

背景色を修正すると、エラーが解消されたことが分かります。ここではチェック項目が2つクリアできています。

基本的なアクセシビリティ対応

このアドオンで、HTMLバリデーション、ARIA属性、Landmark ロール、ラベリング、カラーコントラストなどをチェックできています。
スクリーンリーダーでの読み上げやキーボード操作など、アクセシビリティ対応としてチェックすべき項目の中で、基本的なマークアップの妥当性やランドマークのロールなどをコンポーネント単位で自動チェックできるのは重要です。

プロジェクトの初期フェーズで Presantational Component の実装から着手する時など、まずコンポーネント単位で invalid な箇所をチェックし解消しておくことで、ページ単位ではコンポーネントを組み合せた全体や API つなぎこみで実データが入った時のチェックに集中することができます。
また、カラーコントラストなど直接デザインに影響するチェックをコンポーネント実装段階で発見できるので、デザイナーとの連携もとりやすくなります。

このアドオンのチェックだけでアクセシビリティを担保できるわけではないので、やはりタブ操作や読み上げなど、手動でチェックする必要はあります。

プロジェクトのスピード感、フェーズ、ターゲットの限定など様々な要因によって全てのチェック項目をクリアさせる必要はないこともありますが、誰もがアクセシブルな、手ざわりのいい UI を目指すためにもチェックしておきたいものです。

Gaji-Labo は新規事業やサービス開発に取り組む、事業会社・スタートアップへの支援を行っています。

弊社では、Next.js を用いた Web アプリケーションのフロントエンド開発をリードするフロントエンドエンジニアを募集しています!さまざまなプロダクトやチームに関わりながら、一緒に成長を体験しませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください!

求人応募してみる!


投稿者 Yokota Tomoko

運用やアクセシビリティに配慮したHTML/CSSの設計やコンポーネント作成、スタイルガイドの構築、コードレビュー、組み込み、要件の整理、社内進行管理、顧客とのコミュニケーションまで、ジョインしたチームを前に進めるためにあれこれ担当しています。子育てと仕事のバランスを楽しめるよう、日々模索しています。