|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "e6d0f456dfc22afb41bbdefeb5ec179d",
|
|
|
"translation_date": "2025-10-24T14:54:35+00:00",
|
|
|
"source_file": "1-getting-started-lessons/3-accessibility/assignment.md",
|
|
|
"language_code": "ja"
|
|
|
}
|
|
|
-->
|
|
|
# 包括的なウェブアクセシビリティ監査
|
|
|
|
|
|
## 指示
|
|
|
|
|
|
この課題では、実際のウェブサイトのプロフェッショナルレベルのアクセシビリティ監査を行い、学んだ原則と技術を適用します。この実践的な経験により、アクセシビリティの障壁とその解決策についての理解を深めることができます。
|
|
|
|
|
|
アクセシビリティに問題があると思われるウェブサイトを選びましょう。すでに完璧なサイトを分析するよりも、学びの機会が増えます。良い候補には、古いウェブサイト、複雑なウェブアプリケーション、またはリッチなマルチメディアコンテンツを含むサイトが挙げられます。
|
|
|
|
|
|
### フェーズ1: 戦略的な手動評価
|
|
|
|
|
|
自動化ツールを使用する前に、包括的な手動評価を行いましょう。この人間中心のアプローチは、ツールでは見逃されがちな問題を明らかにし、実際のユーザー体験を理解するのに役立ちます。
|
|
|
|
|
|
**🔍 必須評価基準:**
|
|
|
|
|
|
**ナビゲーションと構造:**
|
|
|
- キーボード（Tab、Shift+Tab、Enter、Space、矢印キー）のみでサイト全体をナビゲートできますか？
|
|
|
- すべてのインタラクティブ要素でフォーカスインジケーターが明確に見えますか？
|
|
|
- 見出し構造（H1-H6）は論理的なコンテンツのアウトラインを作成していますか？
|
|
|
- メインコンテンツにジャンプするスキップリンクはありますか？
|
|
|
|
|
|
**視覚的アクセシビリティ:**
|
|
|
- サイト全体で十分な色のコントラストがありますか（通常のテキストで最低4.5:1）？
|
|
|
- 重要な情報を伝えるために色だけに依存していませんか？
|
|
|
- すべての画像に適切な代替テキストがありますか？
|
|
|
- レイアウトは200%にズームしても機能しますか？
|
|
|
|
|
|
**コンテンツとコミュニケーション:**
|
|
|
- 「ここをクリック」や曖昧なリンクテキストはありませんか？
|
|
|
- 視覚的な手がかりなしでコンテンツや機能を理解できますか？
|
|
|
- フォームフィールドは適切にラベル付けされ、グループ化されていますか？
|
|
|
- エラーメッセージは明確で役立つものですか？
|
|
|
|
|
|
**インタラクティブ要素:**
|
|
|
- すべてのボタンやフォームコントロールはキーボードだけで動作しますか？
|
|
|
- 動的コンテンツの変更はスクリーンリーダーに通知されますか？
|
|
|
- モーダルダイアログや複雑なウィジェットは適切なアクセシビリティパターンに従っていますか？
|
|
|
|
|
|
📝 **具体的な例、スクリーンショット、ページURLを使用して結果を記録**してください。問題点と良い点の両方を記載しましょう。
|
|
|
|
|
|
### フェーズ2: 包括的な自動テスト
|
|
|
|
|
|
次に、業界標準のアクセシビリティテストツールを使用して手動評価の結果を検証し、拡張します。各ツールには異なる強みがあるため、複数のツールを使用することで完全なカバレッジを得ることができます。
|
|
|
|
|
|
**🛠️ 必須テストツール:**
|
|
|
|
|
|
1. **Lighthouse Accessibility Audit**（Chrome/Edge DevToolsに内蔵）
|
|
|
- 複数のページで監査を実行
|
|
|
- 特定の指標と推奨事項に焦点を当てる
|
|
|
- アクセシビリティスコアと具体的な違反を記録
|
|
|
|
|
|
2. **axe DevTools**（ブラウザ拡張機能 - 業界標準）
|
|
|
- Lighthouseより詳細な問題検出
|
|
|
- 修正のための具体的なコード例を提供
|
|
|
- WCAG 2.1基準に基づいてテスト
|
|
|
|
|
|
3. **WAVE Web Accessibility Evaluator**（ブラウザ拡張機能）
|
|
|
- アクセシビリティ機能の視覚的表現
|
|
|
- エラーとポジティブな特徴の両方を強調
|
|
|
- ページ構造の理解に最適
|
|
|
|
|
|
4. **色のコントラスト分析ツール**
|
|
|
- WebAIM Contrast Checkerで特定の色ペアをテスト
|
|
|
- ページ全体の分析用ブラウザ拡張機能
|
|
|
- WCAG AAおよびAAA基準に対してテスト
|
|
|
|
|
|
**🎧 実際の支援技術テスト:**
|
|
|
- **スクリーンリーダーテスト**: NVDA（Windows）、VoiceOver（Mac）、またはTalkBack（Android）を使用
|
|
|
- **キーボードのみのナビゲーション**: マウスを外してサイト全体をナビゲート
|
|
|
- **ズームテスト**: 200%および400%のズームレベルで機能をテスト
|
|
|
- **音声コントロールテスト**: 利用可能であれば音声ナビゲーションツールを試す
|
|
|
|
|
|
**📊 結果を整理**して、以下を含むマスタースプレッドシートを作成:
|
|
|
- 問題の説明と場所
|
|
|
- 深刻度（重大/高/中/低）
|
|
|
- 違反したWCAG成功基準
|
|
|
- 問題を検出したツール
|
|
|
- スクリーンショットと証拠
|
|
|
|
|
|
### フェーズ3: 包括的な結果文書化
|
|
|
|
|
|
技術的な問題とその人間への影響を理解していることを示すプロフェッショナルなアクセシビリティ監査レポートを作成します。
|
|
|
|
|
|
**📋 必須レポートセクション:**
|
|
|
|
|
|
1. **エグゼクティブサマリー**（1ページ）
|
|
|
- ウェブサイトURLと簡単な説明
|
|
|
- 全体的なアクセシビリティ成熟度レベル
|
|
|
- 最も重要な問題トップ3
|
|
|
- 障害を持つユーザーへの推定影響
|
|
|
|
|
|
2. **方法論**（½ページ）
|
|
|
- テストアプローチと使用したツール
|
|
|
- 評価したページとデバイス/ブラウザの組み合わせ
|
|
|
- 評価した基準（WCAG 2.1 AA）
|
|
|
|
|
|
3. **詳細な結果**（2-3ページ）
|
|
|
- WCAG原則（知覚可能、操作可能、理解可能、堅牢）ごとに分類された問題
|
|
|
- スクリーンショットと具体的な例を含む
|
|
|
- 見つけたポジティブなアクセシビリティ機能を記載
|
|
|
- 自動ツール結果とのクロスリファレンス
|
|
|
|
|
|
4. **ユーザー影響評価**（1ページ）
|
|
|
- 特定された問題が異なる障害を持つユーザーに与える影響
|
|
|
- 実際のユーザー体験を説明するシナリオ
|
|
|
- ビジネスへの影響（法的リスク、SEO、ユーザーベースの拡大）
|
|
|
|
|
|
**📸 証拠収集:**
|
|
|
- アクセシビリティ違反のスクリーンショット
|
|
|
- 問題のあるユーザーフローのスクリーン録画
|
|
|
- ツールレポート（PDFとして保存）
|
|
|
- 問題を示すコード例
|
|
|
|
|
|
### フェーズ4: プロフェッショナルな改善計画
|
|
|
|
|
|
アクセシビリティの問題を解決するための戦略的で優先順位付けされた計画を作成します。これにより、実際のビジネス制約に対応するプロフェッショナルなウェブ開発者としての能力を示すことができます。
|
|
|
|
|
|
**🎯 詳細な改善提案を作成（最低10件の問題）:**
|
|
|
|
|
|
**特定された各問題について、以下を提供:**
|
|
|
|
|
|
- **問題の説明**: 問題点とその問題がなぜ問題なのかの明確な説明
|
|
|
- **WCAG参照**: 違反した具体的な成功基準（例:「2.4.4 リンクの目的（文脈内） - レベルA」）
|
|
|
- **ユーザー影響**: これが異なる障害を持つ人々にどのように影響するか
|
|
|
- **解決策**: 具体的なコード変更、デザイン修正、またはプロセス改善
|
|
|
- **優先度レベル**: 重大（基本的な使用を妨げる）/ 高（重要な障壁）/ 中（使いやすさの問題）/ 低（改善点）
|
|
|
- **実装努力**: 時間/複雑さの推定（簡単な修正 / 中程度の努力 / 大規模な改修）
|
|
|
- **テスト検証**: 修正が機能することを確認する方法
|
|
|
|
|
|
**改善例エントリー:**
|
|
|
|
|
|
```
|
|
|
Issue: Generic "Read more" link text appears 8 times on homepage
|
|
|
WCAG Reference: 2.4.4 Link Purpose (In Context) - Level A
|
|
|
User Impact: Screen reader users cannot distinguish between links when viewed in link list
|
|
|
Solution: Replace with descriptive text like "Read more about sustainability initiatives"
|
|
|
Priority: High (major navigation barrier)
|
|
|
Effort: Low (30 minutes to update content)
|
|
|
Testing: Generate link list with screen reader - each link should be meaningful standalone
|
|
|
```
|
|
|
|
|
|
**📈 戦略的実装フェーズ:**
|
|
|
|
|
|
- **フェーズ1（0-2週間）**: 基本的な機能を妨げる重大な問題
|
|
|
- **フェーズ2（1-2ヶ月）**: ユーザー体験を向上させる高優先度の改善
|
|
|
- **フェーズ3（3-6ヶ月）**: 中優先度の強化とプロセス改善
|
|
|
- **フェーズ4（継続的）**: 継続的な監視と強化
|
|
|
|
|
|
## 評価基準
|
|
|
|
|
|
アクセシビリティ監査は、技術的な正確性とプロフェッショナルなプレゼンテーションの両方で評価されます:
|
|
|
|
|
|
| 基準 | 優秀 (90-100%) | 良好 (80-89%) | 満足 (70-79%) | 改善が必要 (<70%) |
|
|
|
|----------|-------------------|---------------|---------------------|------------------------|
|
|
|
| **手動テストの深さ** | POUR原則をすべて網羅した包括的な評価、詳細な観察とユーザーシナリオ | ほとんどのアクセシビリティ領域を良好にカバーし、明確な結果と一部のユーザー影響分析 | 主要な領域をカバーした基本的な評価、十分な観察 | 限られたテスト、表面的な観察、最小限のユーザー影響考慮 |
|
|
|
| **ツールの利用と分析** | 必須ツールをすべて効果的に使用し、結果をクロスリファレンス、明確な証拠を含む、ツールの限界を分析 | ほとんどのツールを使用し、良好な文書化、一部のクロスリファレンス、十分な証拠 | 必須ツールを使用し、基本的な文書化と一部の証拠 | ツール使用が最小限、文書化が不十分、または証拠が欠如 |
|
|
|
| **問題の特定と分類** | WCAG原則全体で15以上の具体的な問題を特定、深刻度で正確に分類、深い理解を示す | WCAG原則のほとんどで10-14の問題を特定、良好な分類、しっかりした理解を示す | 7-9の問題を特定、WCAGカバレッジが十分で基本的な分類 | <7の問題を特定、範囲が限られているか分類が不十分 |
|
|
|
| **解決策の質と実現可能性** | 10以上の詳細で実行可能な解決策、正確なWCAG参照、現実的な実装スケジュール、検証方法 | 8-9の良好に開発された解決策、ほとんど正確な参照、良好な実装詳細 | 6-7の基本的な解決策、一部の詳細と一般的に現実的なアプローチ | <6の解決策または詳細が不十分、実現不可能な実装 |
|
|
|
| **プロフェッショナルなコミュニケーション** | レポートが非常に整理され、明確に書かれ、エグゼクティブサマリーを含む、適切な技術言語を使用、ビジネス文書標準に従う | 良好に整理され、良質な文章、ほとんどの必須セクションを含む、適切なトーン | 十分に整理され、許容可能な文章、基本的な必須セクションを含む | 整理が不十分、不明瞭な文章、または重要なセクションが欠如 |
|
|
|
| **実世界での応用** | ビジネスへの影響、法的考慮事項、ユーザーの多様性、実際の実装課題への理解を示す | 実際の応用への良好な理解、一部のビジネスコンテキストを示す | 実世界での応用への基本的な理解 | 実際の応用への接続が限られている |
|
|
|
|
|
|
## 高度なチャレンジオプション
|
|
|
|
|
|
**🚀 追加の挑戦を求める学生向け:**
|
|
|
|
|
|
- **比較分析**: 競合する2-3つのウェブサイトを監査し、アクセシビリティ成熟度を比較
|
|
|
- **モバイルアクセシビリティの焦点**: Android TalkBackまたはiOS VoiceOverを使用してモバイル特有のアクセシビリティ問題を深掘り
|
|
|
- **国際的な視点**: 異なる国のアクセシビリティ基準（EN 301 549、Section 508、ADA）を調査し適用
|
|
|
- **アクセシビリティ声明のレビュー**: ウェブサイトの既存のアクセシビリティ声明（ある場合）を評価し、監査結果と比較
|
|
|
|
|
|
## 提出物
|
|
|
|
|
|
プロフェッショナルレベルの分析と実践的な実装計画を示す包括的なアクセシビリティ監査レポートを提出してください:
|
|
|
|
|
|
**📄 最終レポート要件:**
|
|
|
|
|
|
1. **エグゼクティブサマリー**（1ページ）
|
|
|
- ウェブサイト概要とアクセシビリティ成熟度評価
|
|
|
- 主な発見の要約とビジネスへの影響
|
|
|
- 推奨される優先行動
|
|
|
|
|
|
2. **方法論と範囲**（1ページ）
|
|
|
- テストアプローチ、使用したツール、評価基準
|
|
|
- 評価したページ/セクションと制限事項
|
|
|
- 基準準拠フレームワーク（WCAG 2.1 AA）
|
|
|
|
|
|
3. **詳細な結果レポート**（3-4ページ）
|
|
|
- ユーザーシナリオを含む手動テストの観察結果
|
|
|
- 自動ツール結果とのクロスリファレンス
|
|
|
- WCAG原則ごとに整理された問題と証拠
|
|
|
- 特定されたポジティブなアクセシビリティ機能
|
|
|
|
|
|
4. **戦略的改善計画**（3-4ページ）
|
|
|
- 優先順位付けされた改善提案（最低10件）
|
|
|
- 実装スケジュールと努力の推定
|
|
|
- 成功指標と検証方法
|
|
|
- 長期的なアクセシビリティ維持戦略
|
|
|
|
|
|
5. **補足証拠**（付録）
|
|
|
- アクセシビリティ違反とテストツールのスクリーンショット
|
|
|
- 問題と解決策を示すコード例
|
|
|
- ツールレポートと監査概要
|
|
|
- スクリーンリーダーテストのメモまたは録画
|
|
|
|
|
|
**📊 フォーマット要件:**
|
|
|
- **文書形式**: PDF（プロフェッショナルなプレゼンテーション）
|
|
|
- **文字数**: 2,500-3,500語（付録とスクリーンショットを除く）
|
|
|
- **視覚要素**: スクリーンショット、図、例を随所に含む
|
|
|
- **引用**: WCAGガイドラインとアクセシビリティリソースを適切に引用
|
|
|
|
|
|
**💡 優れた成果を得るためのヒント:**
|
|
|
- 一貫性のある見出しとスタイリングでプロフェッショナルなレポート形式を使用
|
|
|
- 簡単にナビゲートできる目次を含む
|
|
|
- 技術的な正確性と明確でビジネスに適した言語のバランスを取る
|
|
|
- 技術的な実装とユーザー影響の両方の理解を示す
|
|
|
|
|
|
## 学習成果
|
|
|
|
|
|
この包括的なアクセシビリティ監査を完了することで、重要なプロフェッショナルスキルを習得できます:
|
|
|
|
|
|
**🎯 技術的能力:**
|
|
|
- **アクセシビリティテストの習得**: 業界標準の手動および自動テスト方法に精通
|
|
|
- **WCAGの適用**: Web Content Accessibility Guidelinesを実際のシナリオに適用する実践的な経験
|
|
|
- **支援技術の理解**: スクリーンリーダーやキーボードナビゲーションの実践的な経験
|
|
|
- **問題と解決策のマッピング**: アクセシビ
|
|
|
|
|
|
---
|
|
|
|
|
|
**免責事項**:
|
|
|
この文書はAI翻訳サービス[Co-op Translator](https://github.com/Azure/co-op-translator)を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書が正式な情報源とみなされるべきです。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当社は責任を負いません。 |
