accessibility

アクセシビリティ

アクセシブルなウェブインターフェースは、法的にも、倫理的にも、商業的にも必須です。

範囲

HTML の構造やセマンティクスの監査、ARIA 属性の設定、キーボードナビゲーションの実装、コントラストの確認、アクセシブルなフォームの設計、メディアのアクセシビリティ対応、BFSG への準拠、既存のインターフェースのアクセシビリティ監査を行う場合に、このスキルを使用します。

原則

1. アクセシビリティは特別な機能ではなく、基本要件です

アクセシブルなデザインはすべての人にメリットをもたらします。状況による制約（日差し、騒がしい環境、片手がふさがっている状態）は誰にでも影響します。

2. 後付けではなく、最初から取り入れます

後付けでの対応は、費用が10倍になり、品質も10倍悪くなります。アクセシビリティは、構想、デザイン、開発、テストのすべての段階に組み込む必要があります。

3. 4つの POUR 原則は必須です

知覚可能、操作可能、理解可能、堅牢であること。

4. 技術とデザインを連携させる必要があります

開発者だけの課題（HTML）でも、デザイナーだけの課題（コントラスト）でもありません。両方の分野が連携する必要があります。

5. 法的義務（BFSG は2025年6月28日に施行）

ドイツのアクセシビリティ強化法（BFSG）は、多くの企業にデジタルアクセシビリティの提供を義務付けています。任意ではありません。

ルール

セマンティック HTML

• 推奨：要素を本来の目的に使用します。アクションには <button>、ナビゲーションには <a>、また <nav>、<main>、<article> を使用します。
• 推奨：論理的な見出し階層を保ちます。各ページで <h1> は必ず1つにし、レベルを飛ばさないでください。
• 推奨：ランドマーク要素（<header>、<nav>、<main>、<aside>、<footer>）を使用します。
• 非推奨：インタラクティブな要素に <div> や <span> を使用しないでください。<div onclick> はボタンではありません。
• 非推奨：スタイリング目的で見出しを誤用しないでください。

ARIA 属性

• 推奨：目的を満たすネイティブ HTML 要素がない場合に限り、ARIA を使用します。
• 推奨：表示テキストのないインタラクティブな要素（アイコンボタン）には aria-label を追加します。
• 推奨：動的コンテンツ（トースト通知）には aria-live="polite" を使用します。
• 推奨：エラーメッセージには role="alert" を使用します。
• 非推奨：要素に ARIA を過剰に設定しないでください。不要な ARIA は害になります。
• 非推奨：表示されていてインタラクティブな要素に aria-hidden="true" を設定しないでください。

キーボードナビゲーション

• 推奨：すべてのインタラクティブな要素をキーボード（Tab、Enter、Space、Escape、矢印キー）で操作できるようにします。
• 推奨：視認できるフォーカスインジケーターを用意します。コントラストは最低3:1、アウトラインは2～3pxにします。
• 推奨：モーダル内でフォーカストラップを実装します。
• 推奨：最初にフォーカス可能な要素として、コンテンツへのスキップリンクを配置します。
• 推奨：タブ順序を視覚的な読み取り順序と一致させます。tabindex は値が0または-1の場合に限り使用します。
• 非推奨：tabindex > 0 を使用しないでください（自然な順序が崩れます）。
• 非推奨：適切な代替手段なしに outline: none を設定しないでください。

コントラストと色

• 推奨：通常のテキストは最低 4.5:1 にします（WCAG AA）。
• 推奨：大きなテキスト（>= 24px / >= 18.66px 太字）は最低 3:1 にします。
• 推奨：UI コンポーネントは最低 3:1 にします。
• 推奨：色だけを唯一の手がかりにしないでください。必ずテキスト、アイコン、パターンなど、別の手がかりも用意します。
• 推奨：色覚特性の違いを考慮してテストします（Chrome DevTools > Rendering > Emulate vision deficiencies）。
• 非推奨：重要な情報を赤と緑の違いだけに頼って伝えないでください（男性ユーザーの8%が影響を受けます）。

画像とメディア

• 推奨：情報を伝える画像には、見た目ではなく内容を説明する alt テキストを設定します。
• 推奨：装飾画像には alt=""（空の代替テキスト）を設定します。
• 推奨：動画には字幕を付け、音声には文字起こしを用意します。
• 推奨：アニメーションを一時停止できるようにします。CSS では prefers-reduced-motion を尊重します。
• 非推奨：点滅するコンテンツを使用しないでください（1秒あたり3回を超える点滅は、発作を引き起こす可能性があります）。

フォーム

• 推奨：すべてのフィールドを for/id を介して、表示される <label> に関連付けます。
• 推奨：必須フィールドには、テキストと aria-required="true" を使用します。
• 推奨：エラーメッセージをフィールドのすぐそばに表示し、aria-describedby を使用します。
• 推奨：標準的なフィールドには autocomplete 属性を使用します。
• 非推奨：ラベルの代わりにプレースホルダーを使用しないでください。
• 非推奨：アクセシブルな代替手段なしに CAPTCHA を使用しないでください。

レスポンシブ対応とタッチ操作

• 実施：タッチターゲットは最小 44x44px（WCAG）とし、できれば 48x48px にします。
• 実施：ターゲット間の間隔は最小 8px とします。
• 実施：機能を損なわずに最大 200% までズームできるようにします。
• 禁止：ズームをブロックしないでください（user-scalable=no、maximum-scale=1）。

モーションとアニメーション

• 実施：prefers-reduced-motion を尊重します。アニメーションを減らすか、取り除きます。
• 実施：カルーセルや動画などの自動モーションを一時停止できるようにします。
• 禁止：prefers-reduced-motion に対応する代替表示なしで、視差効果や大きなモーション効果を使用しないでください。

パターンの詳しい説明とコード例については、references/patterns.md を参照してください。

パターン

スキップナビゲーション

最初にフォーカス可能なリンクを「コンテンツへスキップ」にします。通常は視覚的に隠し、フォーカス時に表示します。<main> へリンクします。

アクセシブルなモーダル

role="dialog" + aria-modal="true" + aria-labelledby を設定します。フォーカスをトラップします。Escape キーで閉じます。フォーカスをトリガーに戻します。

エラー概要

フォームの先頭に、該当するフィールドへのリンクを含むエラー概要を表示します。role="alert" を設定します。さらに、インラインエラーも表示します。

アクセシブルなアコーディオン

aria-expanded を設定した <button> をトリガーにします。コンテンツには aria-labelledby を設定します。移動には矢印キーを使用します。

アンチパターン

Div だらけの構造

すべてを <div> と <span> で構築します。解決策：ネイティブ HTML 要素を使用します。

見えないフォーカスインジケーター

代替手段なしで outline: none を使用します。解決策：コントラスト比が最小 3:1 の、視認できるフォーカススタイルを設定します。

ラベルとしてのプレースホルダー

<label> のないフィールドです。解決策：必ず視認できるラベルを使用します。プレースホルダーは補足としてのみ使用します。

メディアの自動再生

音声付きで自動再生します。解決策：ユーザーの操作後にのみ再生を開始します。自動再生はミュート状態に限り、一時停止オプションを用意します。

ARIA の過剰な使用

<button> に role="button" を設定します。解決策：ネイティブ HTML を優先します。ARIA は最終手段としてのみ使用します。

ズームのブロック

viewport meta タグに maximum-scale=1 を指定します。解決策：ズーム制限のない viewport を使用します。

チェックリスト

構造とセマンティクス

• ページごとに <h1> がちょうど 1 つありますか？
• 見出し階層に抜けがありませんか？
• ランドマーク要素がありますか？
• コンテンツへスキップするリンクがありますか？
• インタラクティブな <div> / <span> 要素はありませんか？

コントラストと色

• 通常のテキストはコントラスト比が最小 4.5:1 ですか？
• 大きなテキストはコントラスト比が最小 3:1 ですか？
• UI コンポーネントはコントラスト比が最小 3:1 ですか？
• 色だけを唯一の識別手段として使用していませんか？
• 色覚特性の違いを考慮してテストしましたか？

キーボードと操作

• すべての要素にキーボードでアクセスできますか？
• フォーカスインジケーターが視認できますか？
• モーダル内でフォーカスがトラップされていますか？
• Tab キーの移動順序は視覚的な順序と一致していますか？
• tabindex > 0 はありませんか？

画像とメディア

• 情報を伝える画像に alt テキストがありますか？
• 装飾画像に alt="" を設定していますか？
• 動画にキャプションがありますか？
• prefers-reduced-motion を尊重していますか？

フォーム

• すべてのフィールドに視認できる <label> がありますか？
• 必須フィールドがマークされ、aria-required が設定されていますか？
• インラインエラーに aria-describedby が設定されていますか？
• プレースホルダーをラベルとして使用していませんか？

モバイルとレスポンシブ対応

• タッチターゲットは最小 44x44px ですか？
• 200% までズームできますか？

法的要件

• BFSG の適用対象かどうかを評価しましたか？
• WCAG 2.1 AA を最低基準としていますか？
• アクセシビリティ声明がありますか？

関連項目

• ui-design -- アクセシブルな UI コンポーネントと状態
• web-typography -- 読みやすいフォントサイズとコントラスト要件
• color-theory -- WCAG のコントラスト要件、色覚特性の違い
• usability -- アクセシビリティとユーザビリティの重なり
• responsive-design -- タッチターゲット、ズーム、モバイルのスクリーンリーダー
• navigation-design -- キーボードナビゲーション、スキップリンク、ランドマーク