mcpField
W
web-accessibility

web-accessibility

github.com/89jobrienテスト・品質435 回インストール9 週間前に更新
リポジトリ

web-accessibility について

web-accessibility は、ウェブサイトのアクセシビリティを監査し、問題への対処を支援する skill です。WCAG、スクリーンリーダー、キーボード操作、コントラスト、代替テキスト、フォームを扱います。

主な機能

  1. 01WCAG 2.1/2.2 準拠の確認
  2. 02セマンティック HTML と ARIA の確認
  3. 03キーボード操作とフォーカスの確認
  4. 04色コントラストの分析
  5. 05代替テキストとメディアの確認
  6. 06フォームラベルとエラー処理の確認

活用シーン

  1. 01WCAG に基づくサイト監査
  2. 02キーボードとスクリーンリーダー対応のテスト
  3. 03コントラストとフォームの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/89jobrien/steve --skill web-accessibility

インストール後、Claude Code で/web-accessibilityを入力して読み込まれたか確認します。

詳細

Web アクセシビリティ

このスキルは、WCAG 準拠、スクリーンリーダーとの互換性、インクルーシブデザインに重点を置いた、包括的な Web アクセシビリティの分析と改善を提供します。

このスキルを使う場面

  • WCAG 準拠の監査を行うとき
  • スクリーンリーダーとの互換性をテストするとき
  • キーボード操作を検証するとき
  • 色のコントラストを分析するとき
  • インクルーシブデザインを確保するとき
  • アクセシビリティの問題を改善するとき

このスキルでできること

  1. WCAG 準拠：WCAG 2.1/2.2（A、AA、AAA）への準拠状況を評価します
  2. スクリーンリーダーのテスト：セマンティック HTML と ARIA の使用状況を検証します
  3. キーボード操作：キーボードアクセシビリティとフォーカス管理をテストします
  4. 色のコントラスト：色のコントラスト比を分析します
  5. 代替テキスト：alt テキストとメディアのアクセシビリティを評価します
  6. フォームのアクセシビリティ：フォームのラベルとエラー処理を検証します

使い方

アクセシビリティ監査
Conduct a WCAG compliance audit of this website

Test keyboard navigation and screen reader compatibility
特定の分析
Check color contrast ratios and suggest improvements

WCAG 規格

レベル A（最低限）
  • 画像のテキストによる代替
  • 動画の字幕
  • キーボードで操作できること
  • 発作を引き起こすコンテンツがないこと
  • 適切な見出し構造
レベル AA（推奨）
  • 色のコントラスト比 4.5:1（テキスト）
  • テキストを最大 200% まで拡大可能
  • 複数のナビゲーション方法
  • 一貫したナビゲーション
  • エラーの特定
レベル AAA（強化）
  • 色のコントラスト比 7:1（テキスト）
  • 手話通訳
  • 拡張音声解説
  • 時間制限がないこと
  • 状況に応じたヘルプ

例

例 1：WCAG 監査

入力：ホームページの WCAG 準拠状況を監査する

出力：

## Accessibility Audit: Homepage

### Critical Issues (Level A)

**1. Missing Alt Text**
- **Location**: Hero image (line 45)
- **Issue**: Image has no alt attribute
- **Fix**: Add descriptive alt text
```html

<img src="hero.jpg">


<img src="hero.jpg" alt="Team collaborating on project management dashboard">

2. フォームラベルの不足

  • 場所：メールアドレス入力欄（78 行目）
  • 問題：入力欄に関連付けられたラベルがありません
  • 修正方法：適切なラベルを追加します

<input type="email" id="email">


<label for="email">Email Address</label>
<input type="email" id="email" aria-required="true">
警告（レベル AA）

3. 色のコントラスト

  • 場所：ボタンのテキスト（92 行目）
  • 問題：コントラスト比が 3.2:1 です（4.5:1 が必要です）
  • 修正方法：テキストの色を暗くします

## Best Practices

### Accessibility Guidelines

1. **Semantic HTML**: Use proper HTML elements
2. **ARIA When Needed**: Use ARIA for complex interactions
3. **Keyboard Access**: Ensure all functionality is keyboard accessible
4. **Color Contrast**: Meet WCAG contrast requirements
5. **Testing**: Test with screen readers and keyboard only

## Related Use Cases

- WCAG compliance audits
- Screen reader testing
- Keyboard navigation validation
- Color contrast analysis
- Inclusive design implementation

コメント

Markdown 対応