デジタル庁デザインシステム：React Aria Componentsによる高度なアクセシビリティ実装

【免费下载链接】design-system-example-components デジタル庁デザインシステムのサンプルコンポーネント 项目地址: https://gitcode.com/GitHub_Trending/de/design-system-example-components

あなたのチームがユーザー数10万人を超えるWebアプリケーションを開発中だとします。ある日、視覚障害を持つユーザーから「ボタンが全く操作できない」という苦情が寄せられました。調査の結果、フォーカス状態が視覚的に識別できないことが原因でした。このようなアクセシビリティ(Accessibility、a11y)の問題は、多くの開発現場で発生しています。デジタル庁デザインシステムのサンプルコンポーネントを使用することで、このような問題を未然に防ぐことができます。本記事では、このデザインシステムがどのように高度なアクセシビリティを実現しているかを解説します。

コンポーネントのアクセシビリティ設計原則

デジタル庁デザインシステムのコンポーネントは、以下の3つの原則に基づいて設計されています。

1. ユニバーサルデザイン(Universal Design)

すべてのユーザーが利用できるように設計することを目指しています。例えば、ボタンコンポーネントでは、色だけでなく形状やテキストでも状態を表現しています。

2. WCAG準拠

Web Content Accessibility Guidelines (WCAG) 2.1のAAレベルを満たすことを目指しています。これにより、視覚、聴覚、運動機能などに障害を持つユーザーでも利用可能なコンポーネントを提供しています。

3. インクルーシブデザイン(Inclusive Design)

多様なユーザーのニーズを取り入れた設計を行っています。例えば、キーボード操作のみですべての機能を利用できるようにしています。

具体的なアクセシビリティ実装例

ボタンコンポーネント

ボタンコンポーネント(src/components/Button/Button.tsx)では、以下のようなアクセシビリティ対策が施されています。

フォーカス状態の可視化

export const buttonBaseStyle = `
  underline-offset-[calc(3/16*1rem)]
  focus-visible:outline focus-visible:outline-4 focus-visible:outline-black focus-visible:outline-offset-[calc(2/16*1rem)] focus-visible:ring-[calc(2/16*1rem)] focus-visible:ring-yellow-300
  aria-disabled:pointer-events-none aria-disabled:forced-colors:border-[GrayText] aria-disabled:forced-colors:text-[GrayText]
`;

このCSSスタイルにより、キーボードでフォーカスが当たったときに、ボタンの周囲に太い黒いアウトラインと黄色のリングが表示されます。これにより、視覚障害のあるユーザーでも現在フォーカスがどこにあるかを把握しやすくなります。

無効状態の適切な表現

export const buttonVariantStyle: { [key in ButtonVariant]: string } = {
  'solid-fill': `
    // ...
    aria-disabled:bg-solid-gray-300
    aria-disabled:text-solid-gray-50
  `,
  // ...
};

aria-disabled属性が設定されている場合、ボタンの背景色とテキスト色がグレーに変わります。さらに、pointer-events:noneによりクリックも無効になります。

チェックボックスコンポーネント

チェックボックスコンポーネント(src/components/Checkbox/Checkbox.tsx)では、以下のようなアクセシビリティ対策が施されています。

チェック状態の多様な表現

<input
  className={`
    // ...
    checked:before:block checked:before:[clip-path:path('M5.6,11.2L12.65,4.15L11.25,2.75L5.6,8.4L2.75,5.55L1.35,6.95L5.6,11.2Z')]
    indeterminate:before:block indeterminate:before:[clip-path:path('M3.25,7.75H10.75V6.25H3.25V7.75Z')]
    // ...
  `}
  // ...
  type='checkbox'
  // ...
/>

CSSのclip-pathを使用して、チェックマークと中間状態を表現しています。これにより、高コントラストモードや拡大表示を使用しているユーザーでも状態を確認しやすくなります。

ラベルとの関連付け

return children ? (
  <label
    className='flex w-fit items-start py-2 data-[size=sm]:gap-1 data-[size=md]:gap-2 data-[size=lg]:gap-2'
    data-size={size}
  >
    {checkbox}
    <span
      className='text-solid-gray-800 data-[size=sm]:pt-px data-[size=sm]:text-dns-16N-130 data-[size=md]:pt-1 data-[size=md]:text-dns-16N-130 data-[size=lg]:pt-2.5 data-[size=lg]:text-dns-17N-130'
      data-size={size}
    >
      {children}
    </span>
  </label>
) : (
  checkbox
);

チェックボックスとラベルが<label>要素で囲まれているため、ラベルをクリックしてもチェックボックスの状態を変更できます。これは、運動機能に障害があるユーザーにとって特に便利です。

インプットコンポーネント

インプットコンポーネント(src/components/Input/Input.tsx)では、以下のようなアクセシビリティ対策が施されています。

エラー状態の明示

<input
  className={`
    // ...
    aria-[invalid=true]:border-error-1 aria-[invalid=true]:[&:read-write]:hover:border-red-1000
    // ...
  `}
  aria-invalid={isError || undefined}
  // ...
/>

isErrorプロパティがtrueの場合、aria-invalid属性が設定され、ボーダーの色がエラー色に変わります。これにより、スクリーンリーダーなどの支援技術がエラーを認識し、ユーザーに通知することができます。

読み取り専用状態の適切な表現

<input
  className={`
    // ...
    read-only:border-dashed
    // ...
  `}
  readOnly={props['aria-disabled'] ? true : readOnly}
  // ...
/>

読み取り専用の場合、ボーダーが破線になります。これにより、ユーザーは編集可能なフィールドと区別することができます。

アクセシビリティテスト方法

デジタル庁デザインシステムのコンポーネントは、以下の方法でアクセシビリティをテストしています。

自動テスト

StorybookのAccessibilityアドオンを使用して、コンポーネントのアクセシビリティを自動的にチェックしています。例えば、ボタンコンポーネントのStorybookファイル(src/components/Button/Button.stories.tsx)では、さまざまな状態のボタンが定義されており、それぞれの状態でアクセシビリティチェックが行われます。

手動テスト

以下の方法で手動テストを行っています。

1. キーボードのみでの操作
2. スクリーンリーダー(JAWS、NVDA、VoiceOverなど)を使用したテスト
3. 高コントラストモードでの表示確認
4. ブラウザの拡大機能を使用した表示確認

ユーザーテスト

実際に障害を持つユーザーによるテストを定期的に実施しています。これにより、実際の使用シーンでの問題を発見することができます。

まとめ

デジタル庁デザインシステムのサンプルコンポーネントは、高度なアクセシビリティを実現するためのさまざまな技術を取り入れています。フォーカス状態の可視化、適切なARIA属性の使用、多様な状態表現などにより、多くのユーザーが利用しやすいWebアプリケーションを構築することができます。

アクセシビリティは、単なる規制遵守ではなく、多様なユーザーにサービスを提供するための重要な要素です。今後も、デジタル庁デザインシステムはアクセシビリティの向上に取り組み続けていきます。

ぜひ、このデザインシステムを使用して、インクルーシブなWebアプリケーションを開発してください。詳細な使用方法については、公式ドキュメント(src/docs/introduction.mdx)を参照してください。

【免费下载链接】design-system-example-components デジタル庁デザインシステムのサンプルコンポーネント 项目地址: https://gitcode.com/GitHub_Trending/de/design-system-example-components