hydroimperium/accessibility

アクセシビリティ

マウスなし、完全な視力なし、曖昧さへの忍耐なしでインターフェースを使えるようにします。

使用するタイミング

ユーザーが以下の場合に使用します：

• アクセシビリティレビューを依頼した場合;
• フォーム、ナビゲーション、モーダル、またはインタラクティブコンポーネントを構築している場合;
• WCAGのガイダンスが必要な場合;
• キーボードまたはスクリーンリーダーのサポートを求める場合;
• コントラストやフォーカス状態について質問した場合。

1. スコープを定義する

• 対象となるページまたはコンポーネントは？
• どのユーザーグループと支援技術が重要か？
• 適用される基準は？WCAG 2.2 AA、社内ポリシー、法的要件？
• スコープ外となるものは？

2. 基本を確認する

セマンティクス

• ネイティブ要素を使用する：button、a、input、label、nav、main。
• divをボタンとして使用しない。
• 見出しは順序通りに使用する。
• ランドマークとセクションにアクセシブルな名前を付ける。

キーボード

• すべてのインタラクティブ要素はTabキーで到達可能であること。
• フォーカス順序が視覚的な順序と一致していること。
• フォーカスが可視であること。
• キーボードトラップがないこと。
• Escapeキーでモーダルが閉じること。
• メニュー、タブ、グリッドで矢印キーが期待通りに動作すること。

フォーム

• すべての入力にラベルがあること。
• エラーが通知され、フィールドにリンクされていること。
• 必須フィールドが色だけでなくテキストで示されていること。
• オートコンプリートが適切な場所で使用されていること。
• 指示がフィールドの前に配置されていること。

画像とメディア

• 意味のある画像には代替テキストがあること。
• 装飾的な画像には空の代替テキストがあること。
• 動画にはキャプションがあること。
• 音声にはトランスクリプトがあること。
• 情報が色だけで伝えられていないこと。

コントラストとテキスト

• テキストのコントラストはWCAG AAを満たしていること。
• テキストは200%までサイズ変更しても損失がないこと。
• 行の長さと間隔が読みやすいこと。
• コンテンツが320pxでリフローすること。

動的コンテンツ

• 読み込み状態が通知されること。
• トーストとアラートは適切なライブリージョンを使用すること。
• モーダルはフォーカスを管理すること。
• クライアント側のルート変更はタイトルとフォーカスを更新すること。

3. テスト

• キーボードのみのウォークスルー。
• 利用可能であればスクリーンリーダーのスモークテスト。
• 200%にズーム。
• ハイコントラストモード。
• 動きの低減。
• 自動チェック。ただし、問題の一部しか捕捉できないことを理解しておくこと。

出力形式

## スコープ

## 発見事項

### <重大度>: <問題>

- **場所:** `<パスまたはコンポーネント>`
- **WCAG:** <基準>
- **影響:** <誰がどのようにブロックされるか>
- **修正:** <具体的な変更>
- **検証:** <テスト方法>

## 動作している点

## テストしていない点

## 優先順位

1. ...

ルール

• 自動スキャンだけで完全なWCAG準拠を主張しないこと。
• aria-*を使って悪いセマンティクスを修正しないこと。
• フォーカスアウトラインを可視の代替なしに削除しないこと。
• 色だけに依存しないこと。
• ラベルの代わりにスクリーンリーダーのみのクラスを追加しないこと。
• レビューが部分的である場合は、テストしていない点を明記すること。

品質チェック

• ネイティブセマンティクスが使用されている。
• キーボードアクセスが機能する。
• フォーカスが可視である。
• フォームにラベルとエラーがある。
• コントラストが十分である。
• 動的コンテンツが通知される。
• レビューでテストしていない点が明記されている。