デジタル庁デザインシステム：Webアクセシビリティ規格準拠の認証取得
项目地址: https://gitcode.com/GitHub_Trending/de/design-system-example-components あなたのWebサイトが全てのユーザーにアクセス可能であることを確認したいですか？デジタル庁デザインシステムのサンプルコンポーネントを使用することで、Webアクセシビリティ（Web Accessibility、略してa11y）の国際規格であるWCAG（Web Content Accessibility Guidelines）に準拠したWebサイトを構築できます。この記事では、デジタル庁デザインシステムのコンポーネントがどのようにアクセシビリティを実現しているかを解説し、認証取得への道をご案内します。
アクセシビリティ対応の重要性
Webアクセシビリティとは、障害を持つ人々がWebコンテンツを利用できるようにすることを指します。視覚障害、聴覚障害、運動障害などさまざまな障害を持つユーザーが、スクリーンリーダーやキーボードのみなどの支援技術を使用してWebサイトを利用できるようにすることが重要です。また、アクセシビリティは法的要件としても求められる場合があります。
デジタル庁デザインシステムのアクセシビリティ対応コンポーネント
デジタル庁デザインシステムのサンプルコンポーネントは、アクセシビリティを念頭に設計されています。代表的なコンポーネントをいくつか紹介します。
Buttonコンポーネント
src/components/Button/Button.tsxのButtonコンポーネントは、以下のようなアクセシビリティ対応を施しています。
focus-visibleを使用したキーボードフォーカスの可視化。これにより、キーボード操作でボタンにフォーカスが当たったことが明確に分かります。aria-disabled属性をサポートし、無効化されたボタンが支援技術に正しく認識されるようにしています。- ホバー（hover）およびアクティブ（active）状態のスタイル変更により、ユーザーが操作したことを視覚的にフィードバックします。
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]
`;
Inputコンポーネント
src/components/Input/Input.tsxのInputコンポーネントも、アクセシビリティに配慮された設計がされています。
aria-invalid属性を使用して、入力エラーを支援技術に通知します。read-only状態とaria-disabled状態を区別し、適切なスタイルと振る舞いを提供します。- キーボードフォーカス時の可視化をサポートしています。
<input
className={`
max-w-full rounded-8 border bg-white px-4 py-3 border-solid-gray-600 text-oln-16N-100 text-solid-gray-800
hover:[&:read-write]:border-black
data-[size=sm]:h-10 data-[size=md]:h-12 data-[size=lg]:h-14
aria-[invalid=true]:border-error-1 aria-[invalid=true]:[&:read-write]:hover:border-red-1000
focus:outline focus:outline-4 focus:outline-black focus:outline-offset-[calc(2/16*1rem)] focus:ring-[calc(2/16*1rem)] focus:ring-yellow-300
read-only:border-dashed
aria-disabled:border-solid-gray-300 aria-disabled:!border-solid aria-disabled:bg-solid-gray-50 aria-disabled:text-solid-gray-420 aria-disabled:pointer-events-none aria-disabled:forced-colors:text-[GrayText] aria-disabled:forced-colors:border-[GrayText]
${className ?? ''}
`}
aria-invalid={isError || undefined}
data-size={blockSize}
readOnly={props['aria-disabled'] ? true : readOnly}
ref={ref}
{...rest}
/>
Labelコンポーネント
src/components/Label/Label.tsxのLabelコンポーネントは、フォームコントロールに関連付けられたラベルを提供し、アクセシビリティを向上させます。
data-size属性を使用してさまざまなサイズをサポートし、視認性を向上させます。- 適切な色とフォントサイズを設定し、読みやすさを確保しています。
export const Label = (props: LabelProps) => {
const { children, className, size = 'md', ...rest } = props;
return (
<label
className={`
text-solid-gray-800
data-[size=sm]:text-std-16B-170 data-[size=md]:text-std-17B-170 data-[size=lg]:text-std-18B-160
${className ?? ''}
`}
data-size={size}
{...rest}
>
{children}
</label>
);
};
認証取得の手順
デジタル庁デザインシステムのコンポーネントを使用してアクセシビリティ認証を取得するための基本的な手順は以下の通りです。
- コンポーネントの選択と実装: 必要なコンポーネントをプロジェクトにインポートし、正しく実装します。各コンポーネントの使用方法は、ソースコード（例: src/components/index.ts）を参照してください。
- アクセシビリティチェックリストに基づいたレビュー: WCAGガイドラインに基づいて、コンポーネントの実装とページ全体の構造をレビューします。
- 支援技術によるテスト: スクリーンリーダー（NVDA、VoiceOverなど）やキーボードのみの操作など、さまざまな支援技術を使用してテストします。
- 認証申請: 必要に応じて、公式のアクセシビリティ認証機関に申請を行います。
まとめと展望
デジタル庁デザインシステムのサンプルコンポーネントは、アクセシビリティを重視した設計がされており、WCAG準拠のWebサイト構築を支援します。Button、Input、Labelなどの基本的なコンポーネントから、アクセシビリティに配慮された実装が始まります。
今後、デジタル庁はさらに多くのコンポーネント（例: src/components/Calendar/Calendar.stories.tsx、src/components/Drawer/Drawer.stories.tsx）のアクセシビリティ対応を強化していく予定です。全てのユーザーに開かれたWebを目指して、ぜひこのデザインシステムを活用してください。
アクセシビリティは、単なる規格準拠ではなく、全てのユーザーにとって使いやすいWebを構築するための重要な取り組みです。デジタル庁デザインシステムを活用して、より包容的なWeb環境を作り上げましょう。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
