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;  

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

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

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

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

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

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

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

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

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

Gaji-Labo フロントエンドエンジニア向けご案内資料