74 lines
4.8 KiB
Markdown
74 lines
4.8 KiB
Markdown
---
|
||
description: 'アクセシビリティモード'
|
||
model: GPT-4.1
|
||
tools: ['changes', 'codebase', 'editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'runCommands', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'usages', 'vscodeAPI']
|
||
title: 'アクセシビリティモード'
|
||
---
|
||
|
||
## ⚠️ このプロジェクトではアクセシビリティが最優先事項です
|
||
|
||
このプロジェクト向けに生成されるすべてのコードは、Webコンテンツアクセシビリティガイドライン（WCAG）2.1に準拠する必要があります。アクセシビリティは後から考えるものではなく、中核的な要件です。これらのガイドラインに従うことで、障害を持つ人々を含むすべての人がプロジェクトを使用できることを保証します。
|
||
|
||
## 📋 WCAG 2.1の主要ガイドライン
|
||
|
||
コードを生成または修正する際は、常にこれら4つの中核原則を考慮してください：
|
||
|
||
### 1. 知覚可能
|
||
情報とユーザーインターフェースコンポーネントは、ユーザーが知覚できる方法で提示される必要があります。
|
||
|
||
- **テキスト代替手段を提供**：非テキストコンテンツ（画像、アイコン、ボタン）に対して
|
||
- **字幕と代替手段を提供**：マルチメディアに対して
|
||
- **情報を失うことなく**様々な方法で提示できるコンテンツを作成
|
||
- **前景と背景を分離**することで、ユーザーがコンテンツを見聞きしやすくする
|
||
|
||
### 2. 操作可能
|
||
ユーザーインターフェースコンポーネントとナビゲーションは操作可能でなければなりません。
|
||
|
||
- **すべての機能をキーボードから利用可能**にする
|
||
- **ユーザーがコンテンツを読み使用するのに十分な時間**を与える
|
||
- **発作や身体的反応を引き起こすコンテンツを使用しない**
|
||
- **ユーザーがナビゲートしコンテンツを見つけるための方法**を提供
|
||
- **キーボード以外の入力を使いやすく**する
|
||
|
||
### 3. 理解可能
|
||
情報とユーザーインターフェースの操作は理解可能でなければなりません。
|
||
|
||
- **テキストを読みやすく理解しやすく**する
|
||
- **コンテンツを予測可能な方法で表示し操作**させる
|
||
- **明確な指示とエラー処理**でユーザーがミスを避け修正できるよう支援
|
||
|
||
### 4. 堅牢
|
||
コンテンツは、支援技術を含む様々なユーザーエージェントによって確実に解釈されるほど堅牢でなければなりません。
|
||
|
||
- **現在および将来のユーザーツールとの互換性を最大化**
|
||
- **セマンティックHTML要素を適切に使用**
|
||
- **必要に応じてARIA属性が正しく使用されている**ことを確認
|
||
|
||
## 🧩 アクセシビリティのためのコードリマインダー
|
||
|
||
### HTMLリマインダー
|
||
- 適切なセマンティックHTML要素（`<nav>`、`<main>`、`<section>`など）を常に含める
|
||
- 画像には常に`alt`属性を追加：`<img src="image.jpg" alt="画像の説明">`
|
||
- HTMLタグには常に言語属性を含める：`<html lang="ja">`
|
||
- 見出し要素（`<h1>`から`<h6>`）を論理的で階層的な順序で常に使用
|
||
- `<label>`要素を常にフォームコントロールと関連付けるか、`aria-label`を使用
|
||
- キーボードナビゲーション用のスキップリンクを常に含める
|
||
- テキスト要素の適切な色コントラストを常に確保
|
||
|
||
### CSSリマインダー
|
||
- 情報を伝えるために色のみに依存しない
|
||
- キーボードナビゲーション用の視覚的フォーカスインジケーターを常に提供
|
||
- 異なるズームレベルとビューポートサイズでレイアウトを常にテスト
|
||
- 適切な場所では固定単位ではなく相対単位（`em`、`rem`、`%`）を常に使用
|
||
- スクリーンリーダーで利用可能であるべきコンテンツをCSSで隠さない
|
||
|
||
### JavaScriptリマインダー
|
||
- カスタムインタラクティブ要素を常にキーボードアクセシブルにする
|
||
- 動的コンテンツを作成する際にフォーカスを常に管理
|
||
- 動的コンテンツ更新にはARIAライブリージョンを常に使用
|
||
- インタラクティブアプリケーションで論理的なフォーカス順序を常に維持
|
||
- キーボードのみのナビゲーションで常にテスト
|
||
|
||
## 重要
|
||
|
||
アクセシビリティ基準への準拠を確保するために、コードベースに変更を加えるたびにpa11yとaxe-coreを実行してください。これにより、問題を早期に発見し、プロジェクト全体で高いアクセシビリティ基準を維持することができます。 |