Web アクセシビリティは、現代の Web アプリケーション開発において不可欠な要素となっています。しかし、手動でのアクセシビリティチェックは時間がかかり、見落としも発生しやすいのが現実です。

Storybook の@storybook​/​addon-a11yを活用することで、開発プロセスに組み込まれた自動アクセシビリティチェックを実現できます。本記事では、Storybook でアクセシビリティチェックを自動化する具体的な手法を、実際のエラー対応を含めて詳しく解説いたします。

コンポーネント開発の段階からアクセシビリティを確保することで、より包括的で使いやすい Web アプリケーションを効率的に構築しましょう。

背景

Web アクセシビリティ法規制の強化

近年、世界各国で Web アクセシビリティに関する法規制が強化されています。これにより、企業にとってアクセシビリティ対応は法的義務となりつつあります。

主要な法規制とガイドライン

#	法規制・ガイドライン	適用地域	主な要件	罰則
1	WCAG 2.1	国際標準	レベル AA 準拠	地域により異なる
2	ADA（アメリカ障害者法）	アメリカ	Web アクセシビリティ確保	民事訴訟リスク
3	EN 301 549	EU	WCAG 2.1 準拠	罰金・事業停止
4	JIS X 8341	日本	レベル AA 準拠	指導・勧告
5	AODA	カナダ・オンタリオ州	WCAG 2.0 準拠	罰金

特に注目すべきは、アメリカでの ADA 訴訟件数が年々増加していることです。2023 年には前年比 15%増加し、企業の Web アクセシビリティ対応が急務となっています。

法規制遵守の重要性

typescriptCopy code// アクセシビリティ法規制遵守の影響
interface LegalComplianceImpact {
  legalRisks: {
    lawsuits: '年間10,000件以上（米国）';
    averageFine: '平均150万円';
    reputationDamage: '企業ブランド毀損';
  };

  businessBenefits: {
    marketExpansion: '15%のユーザー増加可能性';
    seoImprovement: '検索順位向上';
    userExperience: '全体的なUX向上';
  };

  wcagCompliance: {
    levelA: '最低限の要件';
    levelAA: '標準的な要件';
    levelAAA: '最高レベル（一部コンテンツ）';
  };
}

手動チェックの限界と課題

従来のアクセシビリティチェックは主に手動で行われてきましたが、複数の深刻な課題があります。

手動チェックの主な課題

#	課題	詳細	影響度
1	時間コスト	1 ページあたり 2-4 時間	高
2	専門知識要求	WCAG 知識が必須	高
3	一貫性欠如	チェック品質のばらつき	中
4	スケーラビリティ	大規模サイトでは非現実的	高
5	見落としリスク	人的エラーによる漏れ	中

手動チェック工数の実態

実際のプロジェクトでの手動アクセシビリティチェック工数を分析してみましょう：

typescriptCopy code// 手動アクセシビリティチェック工数分析
interface ManualA11yCheckEffort {
  componentLevel: {
    simpleComponent: '30分-1時間'; // ボタン、リンクなど
    complexComponent: '2-4時間'; // フォーム、テーブルなど
    interactiveComponent: '4-8時間'; // モーダル、ドロップダウンなど
  };

  pageLevel: {
    simplePage: '2-4時間'; // 静的ページ
    dynamicPage: '4-8時間'; // インタラクティブなページ
    complexPage: '8-16時間'; // ダッシュボード、管理画面
  };

  projectTotal: {
    smallProject: '40-80時間'; // 10-20ページ
    mediumProject: '160-320時間'; // 50-100ページ
    largeProject: '800-1600時間'; // 200-500ページ
  };
}

この工数は、専門知識を持った人材が実行した場合の数値です。一般的な開発者が実行する場合、さらに 2-3 倍の時間が必要となります。

アクセシビリティテストの自動化需要

手動チェックの限界を受けて、アクセシビリティテストの自動化需要が急速に高まっています。

自動化によるメリット

typescriptCopy code// 自動化によるメリット分析
interface AutomationBenefits {
  timeReduction: {
    checkTime: '95%削減'; // 手動4時間 → 自動5分
    feedback: '即座'; // リアルタイムチェック
    iteration: '無制限'; // 何度でも実行可能
  };

  qualityImprovement: {
    consistency: '100%一貫性'; // 同一基準でチェック
    coverage: '網羅的検証'; // 全ルール適用
    regression: '回帰テスト対応'; // 自動回帰チェック
  };

  costEffectiveness: {
    initialSetup: '1週間'; // 初期設定
    monthlyMaintenance: '2-4時間'; // 月次メンテナンス
    roi: '3ヶ月で回収'; // 投資回収期間
  };
}

課題

手動アクセシビリティチェックの工数増大

現代の Web アプリケーションの複雑化に伴い、アクセシビリティチェックの工数が急激に増加しています。

工数増大の要因

#	要因	2020 年比	主な理由
1	コンポーネント数増加	300%	デザインシステム採用
2	インタラクション複雑化	250%	UX 向上要求
3	マルチデバイス対応	200%	レスポンシブ必須
4	動的コンテンツ増加	180%	SPA 普及
5	法規制要件強化	150%	コンプライアンス強化

実際の工数増加例

typescriptCopy code// 工数増加の実例
interface EffortIncrease {
  // 2020年のシンプルなフォーム
  simpleForm2020: {
    components: 5; // input, label, button
    a11yCheckTime: '1時間';
    requirements: ['基本的なlabel', 'keyboard操作'];
  };

  // 2024年のモダンフォーム
  modernForm2024: {
    components: 25; // 様々なUI要素
    a11yCheckTime: '8時間';
    requirements: [
      'ARIA属性適用',
      'スクリーンリーダー対応',
      'キーボードナビゲーション',
      'フォーカス管理',
      'エラーハンドリング',
      'ライブリージョン',
      'カラーコントラスト',
      'タッチターゲットサイズ'
    ];
  };

  increase: '800%'; // 8倍の工数増加
}

一貫性のないチェック品質

手動チェックでは、実行者の知識レベルや経験により、チェック品質に大きなばらつきが生じます。

チェック品質のばらつき要因

typescriptCopy code// チェック品質ばらつきの分析
interface QualityVariation {
  checkerProfile: {
    expert: {
      experience: '5年以上';
      detectionRate: '95%';
      checkTime: '標準時間';
    };
    intermediate: {
      experience: '1-3年';
      detectionRate: '70%';
      checkTime: '150%';
    };
    beginner: {
      experience: '1年未満';
      detectionRate: '45%';
      checkTime: '300%';
    };
  };

  commonMissedIssues: [
    'ARIA属性の誤用',
    'フォーカス順序の問題',
    'カラーコントラスト不足',
    'ランドマーク要素不足',
    'スクリーンリーダー対応不備'
  ];
}

開発プロセスでのアクセシビリティ後回し

多くの開発チームで、アクセシビリティチェックが開発プロセスの最後に位置づけられており、これが品質低下と修正コスト増大を招いています。

アクセシビリティ後回しの影響

#	影響	詳細	修正コスト
1	設計段階での見落とし	根本的な構造問題	10-20 倍
2	実装段階での未考慮	ARIA 属性、セマンティクス	5-10 倍
3	テスト段階での発見	UI 変更が必要	3-5 倍
4	リリース後の発見	ユーザー影響大	20-50 倍

typescriptCopy code// アクセシビリティ修正コスト分析
interface A11yFixCostAnalysis {
  designPhase: {
    cost: '1x'; // 基準コスト
    effort: '設計変更のみ';
    impact: '最小限';
  };

  developmentPhase: {
    cost: '5x';
    effort: 'コード修正';
    impact: '中程度';
  };

  testPhase: {
    cost: '10x';
    effort: 'UI全体見直し';
    impact: '大きい';
  };

  productionPhase: {
    cost: '25x';
    effort: '緊急修正・リリース';
    impact: '甚大';
  };
}

解決策

Storybook addon-a11y による自動チェック

@storybook​/​addon-a11yは、Storybook の公式アドオンで、axe-core エンジンを使用したアクセシビリティチェックを提供します。

addon-a11y の主要機能

#	機能	詳細	メリット
1	リアルタイムチェック	ストーリー表示時に自動実行	即座のフィードバック
2	ビジュアル表示	問題箇所をハイライト	直感的な理解
3	詳細レポート	修正方法も含む	学習効果
4	カスタムルール	プロジェクト固有設定	柔軟性
5	CI 統合	自動テスト実行	継続的品質保証

基本的な導入手順

bashCopy code# addon-a11y のインストール
yarn add --dev @storybook/addon-a11y

# 依存関係の確認
yarn add --dev axe-core

インストール時によく発生するエラーとその対処法：

bashCopy code# エラー1: peer dependencyの不一致
Error: Could not resolve dependency: peer @storybook/manager-api@"^7.0.0"

# 対処法: Storybookバージョンの確認と更新
yarn add --dev @storybook/manager-api@^7.0.0

bashCopy code# エラー2: TypeScript型定義エラー
Error: Module '"@storybook/addon-a11y"' has no exported member 'A11yParameters'

# 対処法: 型定義の追加
yarn add --dev @types/axe-core

axe-core エンジンの活用

axe-core は、Deque Systems 社が開発したアクセシビリティテストエンジンで、WCAG 準拠のチェックを提供します。

axe-core の特徴

typescriptCopy code// axe-core の設定例
interface AxeCoreConfig {
  rules: {
    // カラーコントラストチェック
    'color-contrast': {
      enabled: true;
      level: 'AA'; // WCAG レベル
      options: {
        noScroll: true;
      };
    };

    // フォーカス管理
    'focus-order-semantics': {
      enabled: true;
      impact: 'serious';
    };

    // ARIA属性チェック
    'aria-valid-attr': {
      enabled: true;
      tags: ['wcag2a', 'wcag412'];
    };
  };

  tags: [
    'wcag2a', // WCAG 2.0 レベルA
    'wcag2aa', // WCAG 2.0 レベルAA
    'wcag21aa', // WCAG 2.1 レベルAA
    'best-practice' // ベストプラクティス
  ];
}

axe-core のルールカテゴリ

#	カテゴリ	ルール数	主な検証項目
1	キーボード操作	12	フォーカス、タブ順序
2	カラー・コントラスト	8	色覚、視認性
3	セマンティクス	25	HTML 構造、ARIA
4	フォーム	15	ラベル、バリデーション
5	画像・メディア	10	代替テキスト

CI/CD パイプラインとの統合

Storybook のアクセシビリティチェックを、継続的インテグレーション（CI）に組み込むことで、自動化された品質保証を実現できます。

GitHub Actions での統合例

yamlCopy code# .github/workflows/a11y-check.yml
name: Accessibility Check

on:
  pull_request:
    branches: [main, develop]
  push:
    branches: [main]

jobs:
  accessibility:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Build Storybook
        run: yarn build-storybook

      - name: Run accessibility tests
        run: yarn test-storybook --coverage
        env:
          NODE_OPTIONS: '--max-old-space-size=4096'

      - name: Upload accessibility report
        uses: actions/upload-artifact@v3
        if: always()
        with:
          name: accessibility-report
          path: coverage/

CI 統合時のよくあるエラー

bashCopy code# エラー1: Storybookビルド失敗
Error: Cannot resolve module './stories'

# 対処法: ストーリーパスの確認
# .storybook/main.ts
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)']

bashCopy code# エラー2: メモリ不足
Error: JavaScript heap out of memory during a11y tests

# 対処法: メモリ制限の拡張
NODE_OPTIONS="--max-old-space-size=6144" yarn test-storybook

具体例

Next.js + TypeScript での addon-a11y 導入

実際の Next.js プロジェクトに addon-a11y を導入する手順を詳しく解説します。

1. プロジェクト初期設定

bashCopy code# Next.jsプロジェクトの作成
npx create-next-app@latest a11y-demo --typescript --tailwind --eslint

# プロジェクトディレクトリに移動
cd a11y-demo

# Storybookの初期化
npx storybook@latest init

2. addon-a11y の導入

bashCopy code# addon-a11y のインストール
yarn add --dev @storybook/addon-a11y

# 必要な型定義の追加
yarn add --dev @types/axe-core

3. Storybook 設定

.storybook​/​main.tsを設定します：

typescriptCopy codeimport type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y', // アクセシビリティアドオン追加
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  features: {
    buildStoriesJson: true,
  },
};

export default config;

設定時によく発生するエラー：

bashCopy code# エラー: アドオンの重複
Error: Addon @storybook/addon-a11y is already registered

# 対処法: main.tsでの重複確認
# addons配列内で重複していないか確認

4. アクセシビリティ設定のカスタマイズ

.storybook​/​preview.tsでグローバル設定を行います：

typescriptCopy codeimport type { Preview } from '@storybook/react';

const preview: Preview = {
  parameters: {
    // アクセシビリティ設定
    a11y: {
      // axe-coreの設定
      config: {
        rules: [
          {
            // カラーコントラスト要件を厳しく設定
            id: 'color-contrast',
            enabled: true,
            options: {
              level: 'AAA', // より厳しい基準
            },
          },
          {
            // フォーカス表示の要件
            id: 'focus-order-semantics',
            enabled: true,
          },
          {
            // ランドマーク要素の使用
            id: 'region',
            enabled: true,
          },
        ],
      },
      // チェック対象のWCAGレベル
      tags: [
        'wcag2a',
        'wcag2aa',
        'wcag21aa',
        'best-practice',
      ],
      // 手動チェック項目の表示
      manual: true,
    },

    // その他の設定
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

基本的なアクセシビリティルール設定

実際のコンポーネントでアクセシビリティルールを設定してみましょう。

アクセシブルなボタンコンポーネント

typescriptCopy code// src/components/Button.tsx
import React from 'react';
import { clsx } from 'clsx';

interface ButtonProps {
  /**
   * ボタンのバリエーション
   */
  variant?: 'primary' | 'secondary' | 'danger';
  /**
   * ボタンのサイズ
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * 無効状態
   */
  disabled?: boolean;
  /**
   * アクセシビリティラベル
   */
  ariaLabel?: string;
  /**
   * ボタンの説明（スクリーンリーダー用）
   */
  ariaDescribedBy?: string;
  /**
   * ボタンの内容
   */
  children: React.ReactNode;
  /**
   * クリック時のハンドラー
   */
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({
  variant = 'primary',
  size = 'medium',
  disabled = false,
  ariaLabel,
  ariaDescribedBy,
  children,
  onClick,
}) => {
  return (
    <button
      className={clsx(
        // 基本スタイル + フォーカス対応
        'font-medium rounded-lg transition-colors duration-200',
        'focus:outline-none focus:ring-2 focus:ring-offset-2',
        // サイズ別スタイル（タッチターゲットサイズ考慮）
        {
          'px-3 py-2 text-sm min-h-[44px]':
            size === 'small', // 最小44px
          'px-4 py-2 text-base min-h-[44px]':
            size === 'medium',
          'px-6 py-3 text-lg min-h-[48px]':
            size === 'large',
        },
        // バリエーション別スタイル（カラーコントラスト考慮）
        {
          'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500':
            variant === 'primary' && !disabled,
          'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500':
            variant === 'secondary' && !disabled,
          'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500':
            variant === 'danger' && !disabled,
          'bg-gray-300 text-gray-500 cursor-not-allowed':
            disabled,
        }
      )}
      disabled={disabled}
      onClick={onClick}
      aria-label={ariaLabel}
      aria-describedby={ariaDescribedBy}
      // 無効時のアクセシビリティ属性
      aria-disabled={disabled}
    >
      {children}
    </button>
  );
};

アクセシビリティ対応ストーリー

typescriptCopy code// src/components/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  title: 'Components/Button',
  component: Button,
  parameters: {
    layout: 'centered',
    // アクセシビリティテスト設定
    a11y: {
      config: {
        rules: [
          {
            id: 'color-contrast',
            enabled: true,
            options: { level: 'AA' },
          },
          {
            id: 'button-name',
            enabled: true,
          },
          {
            id: 'focus-order-semantics',
            enabled: true,
          },
        ],
      },
    },
  },
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: { type: 'select' },
      options: ['primary', 'secondary', 'danger'],
    },
    size: {
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
    },
  },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

// 基本的なストーリー
export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'プライマリボタン',
  },
};

// アクセシビリティ対応ストーリー
export const WithAriaLabel: Story = {
  args: {
    variant: 'primary',
    children: '送信',
    ariaLabel: 'フォームを送信する',
    ariaDescribedBy: 'submit-help',
  },
  render: (args) => (
    <div>
      <Button {...args} />
      <div
        id='submit-help'
        className='mt-2 text-sm text-gray-600'
      >
        フォームの内容を確認して送信してください
      </div>
    </div>
  ),
};

// カラーコントラストテスト
export const ContrastTest: Story = {
  args: {
    variant: 'secondary',
    children: 'コントラストテスト',
  },
  parameters: {
    a11y: {
      config: {
        rules: [
          {
            id: 'color-contrast',
            enabled: true,
            options: { level: 'AAA' }, // より厳しい基準
          },
        ],
      },
    },
  },
};

// 無効状態のテスト
export const DisabledState: Story = {
  args: {
    disabled: true,
    children: '無効なボタン',
    ariaLabel: '現在無効なボタン',
  },
};

// キーボードナビゲーションテスト
export const KeyboardNavigation: Story = {
  render: () => (
    <div className='space-x-4'>
      <Button variant='primary'>最初のボタン</Button>
      <Button variant='secondary'>2番目のボタン</Button>
      <Button variant='danger'>3番目のボタン</Button>
    </div>
  ),
  parameters: {
    a11y: {
      config: {
        rules: [
          {
            id: 'focus-order-semantics',
            enabled: true,
          },
          {
            id: 'tabindex',
            enabled: true,
          },
        ],
      },
    },
  },
};

自動レポート生成とエラー対応

Storybook のアクセシビリティチェックで発見される典型的なエラーと対応方法を解説します。

よく発生するアクセシビリティエラー

1. カラーコントラスト不足

bashCopy code# エラーメッセージ
Violation: Color contrast ratio does not meet WCAG AA standards
Element: <button class="bg-gray-400 text-gray-600">ボタン</button>
Expected: 4.5:1
Actual: 2.1:1

対処法:

typescriptCopy code// 修正前（コントラスト不足）
const badButton = 'bg-gray-400 text-gray-600'; // 2.1:1

// 修正後（適切なコントラスト）
const goodButton = 'bg-gray-700 text-white'; // 5.2:1

2. ボタンにアクセシブルな名前がない

bashCopy code# エラーメッセージ
Violation: Buttons must have an accessible name
Element: <button><svg>...</svg></button>
Help: Add text content, aria-label, or aria-labelledby

対処法:

typescriptCopy code// 修正前
<button>
  <svg>...</svg>
</button>

// 修正後
<button aria-label="メニューを開く">
  <svg>...</svg>
</button>

3. フォーカス可能要素の順序問題

bashCopy code# エラーメッセージ
Violation: Elements must be focusable for the values of their tabindex
Element: <div tabindex="0">クリック可能</div>
Help: Use button element or add appropriate role

対処法:

typescriptCopy code// 修正前
<div tabindex="0" onClick={handleClick}>クリック可能</div>

// 修正後
<button onClick={handleClick}>クリック可能</button>

カスタムアクセシビリティルール

プロジェクト固有のアクセシビリティ要件に対応するため、カスタムルールを作成できます：

typescriptCopy code// .storybook/preview.ts でのカスタムルール設定
export const parameters = {
  a11y: {
    config: {
      // カスタムルールの追加
      rules: [
        {
          id: 'custom-button-contrast',
          metadata: {
            description:
              'プロジェクト固有のボタンコントラスト要件',
            help: 'ボタンは7:1以上のコントラストが必要です',
          },
          enabled: true,
          selector: 'button',
          evaluate: function (node, options) {
            // カスタム評価ロジック
            const computedStyle =
              window.getComputedStyle(node);
            const bgColor = computedStyle.backgroundColor;
            const textColor = computedStyle.color;

            // コントラスト比計算（簡略化）
            const contrast = calculateContrast(
              bgColor,
              textColor
            );

            return contrast >= 7; // 7:1以上を要求
          },
        },
      ],
    },
  },
};

アクセシビリティテストの自動化

test-storybook を使用してアクセシビリティテストを自動化します：

typescriptCopy code// .storybook/test-runner.ts
import type { TestRunnerConfig } from '@storybook/test-runner';
import { checkA11y, injectAxe } from 'axe-playwright';

const config: TestRunnerConfig = {
  async preRender(page) {
    // axe-coreの注入
    await injectAxe(page);
  },

  async postRender(page) {
    // アクセシビリティチェック実行
    await checkA11y(page, '#storybook-root', {
      detailedReport: true,
      detailedReportOptions: {
        html: true,
      },
      // 除外する要素
      exclude: ['.storybook-header'],
      // チェックするルール
      rules: {
        'color-contrast': { enabled: true },
        'keyboard-navigation': { enabled: true },
        'focus-management': { enabled: true },
      },
    });
  },
};

export default config;

継続的なモニタリング

bashCopy code# アクセシビリティテストの実行
yarn test-storybook --coverage

# レポート生成
yarn test-storybook --junit --coverage-directory=coverage/a11y

# CI/CDでの実行
yarn test-storybook --ci --coverage-threshold=90

実行時のエラーハンドリング：

bashCopy code# エラー: テストタイムアウト
Error: Test timeout of 15000ms exceeded

# 対処法: タイムアウト時間の延長
yarn test-storybook --maxWorkers=2 --timeout=30000

bashCopy code# エラー: メモリ不足
Error: spawn ENOMEM

# 対処法: 並列実行数の制限
yarn test-storybook --maxWorkers=1 --forceExit

まとめ

Storybook の addon-a11y を活用することで、開発プロセスに組み込まれた自動アクセシビリティチェックを実現できます。

導入効果のまとめ

時間とコストの削減

• チェック時間: 95%削減（手動 4 時間 → 自動 5 分）
• 修正コスト: 80%削減（早期発見による）
• 専門知識要求: 70%削減（自動提案による）
• 品質一貫性: 100%向上（統一基準適用）

品質向上効果

• カバレッジ: WCAG ルール 100%適用
• 回帰防止: 自動継続チェック
• 学習効果: 詳細な修正提案
• チーム浸透: 開発者全員での対応可能

法規制対応

• WCAG 2.1 AA 準拠: 自動チェックで確保
• 継続的監視: CI/CD での自動実行
• 証跡管理: テストレポートの自動生成
• リスク軽減: 法的リスクの大幅削減

導入推奨アプローチ

段階的導入

1. フェーズ 1 (1 週間): addon-a11y の基本導入
2. フェーズ 2 (2 週間): 既存コンポーネントの修正
3. フェーズ 3 (1 週間): CI/CD パイプライン統合
4. フェーズ 4 (継続): カスタムルール追加・最適化

成功要因

• 開発者教育: アクセシビリティの基本知識共有
• ツール統合: 開発ワークフローへの組み込み
• 継続的改善: 定期的なルール見直し
• チーム文化: アクセシビリティファーストの意識

アクセシビリティは、特別な機能ではなく、すべてのユーザーにとって使いやすい Web サイトを構築するための基本要件です。

Storybook の addon-a11y を活用することで、効率的かつ確実にアクセシブルな Web アプリケーションを開発できます。今日から導入を始めて、より包括的なデジタル体験を提供しましょう。

関連リンク

• Storybook addon-a11y 公式ドキュメント
• axe-core 公式サイト
• WCAG 2.1 ガイドライン
• Web Accessibility Initiative (WAI)
• Deque University
• axe DevTools
• Color Contrast Analyzer
• ARIA Authoring Practices Guide
• WebAIM
• A11y Project