🛠️ 開発・MCP コミュニティ

web-accessibility

ウェブアクセシビリティの専門家として、WCAG 2.1/2.2基準に基づき、監査やスクリーンリーダー互換性テスト、キーボード操作検証を通じて、包括的なウェブデザインを確保するSkill。

📜 元の英語説明(参考)

Web accessibility compliance specialist. Use when conducting WCAG compliance audits, testing screen reader compatibility, validating keyboard navigation, or ensuring inclusive design. Focuses on WCAG 2.1/2.2 standards.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o web-accessibility.zip https://jpskill.com/download/6935.zip && unzip -o web-accessibility.zip && rm web-accessibility.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/6935.zip -OutFile "$d\web-accessibility.zip"; Expand-Archive "$d\web-accessibility.zip" -DestinationPath $d -Force; ri "$d\web-accessibility.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して web-accessibility.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → web-accessibility フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-17
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Webアクセシビリティ

このスキルは、WCAG準拠、スクリーンリーダー互換性、およびインクルーシブデザインに焦点を当てた、包括的なウェブアクセシビリティ分析と改善を提供します。

このスキルを使用するタイミング

WCAG準拠監査を実施する場合
スクリーンリーダーの互換性をテストする場合
キーボードナビゲーションを検証する場合
色のコントラストを分析する場合
インクルーシブデザインを確保する場合
アクセシビリティの問題を改善する場合

このスキルができること

WCAG準拠: WCAG 2.1/2.2 (A、AA、AAA) への準拠を評価します。
スクリーンリーダーテスト: セマンティックHTMLとARIAの使用を検証します。
キーボードナビゲーション: キーボードアクセシビリティとフォーカス管理をテストします。
色のコントラスト: 色のコントラスト比を分析します。
代替テキスト: altテキストとメディアのアクセシビリティを評価します。
フォームのアクセシビリティ: フォームのラベルとエラー処理を検証します。

使用方法

アクセシビリティの監査

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監査

入力: Audit homepage for WCAG compliance

出力:

## 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
<!-- Before -->
<img src="hero.jpg">

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

2. Missing Form Labels

Location: Email input (line 78)
Issue: Input has no associated label
Fix: Add proper label

<!-- Before -->
<input type="email" id="email">

<!-- After -->
<label for="email">Email Address</label>
<input type="email" id="email" aria-required="true">

Warnings (Level AA)

3. Color Contrast

Location: Button text (line 92)
Issue: Contrast ratio 3.2:1 (needs 4.5:1)
Fix: Darken text color


## ベストプラクティス

### アクセシビリティガイドライン

1. **セマンティックHTML**: 適切なHTML要素を使用します。
2. **必要な場合のARIA**: 複雑なインタラクションにはARIAを使用します。
3. **キーボードアクセス**: すべての機能がキーボードでアクセス可能であることを確認します。
4. **色のコントラスト**: WCAGのコントラスト要件を満たします。
5. **テスト**: スクリーンリーダーとキーボードのみでテストします。

## 関連するユースケース

- WCAG準拠監査
- スクリーンリーダーテスト
- キーボードナビゲーション検証
- 色のコントラスト分析
- インクルーシブデザインの実装

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Web Accessibility

This skill provides comprehensive web accessibility analysis and remediation, focusing on WCAG compliance, screen reader compatibility, and inclusive design.

When to Use This Skill

When conducting WCAG compliance audits
When testing screen reader compatibility
When validating keyboard navigation
When analyzing color contrast
When ensuring inclusive design
When remediating accessibility issues

What This Skill Does

WCAG Compliance: Assesses compliance with WCAG 2.1/2.2 (A, AA, AAA)
Screen Reader Testing: Validates semantic HTML and ARIA usage
Keyboard Navigation: Tests keyboard accessibility and focus management
Color Contrast: Analyzes color contrast ratios
Alternative Text: Evaluates alt text and media accessibility
Form Accessibility: Validates form labels and error handling

How to Use

Audit Accessibility

Conduct a WCAG compliance audit of this website

Test keyboard navigation and screen reader compatibility

Specific Analysis

Check color contrast ratios and suggest improvements

WCAG Standards

Level A (Minimum)

Text alternatives for images
Captions for videos
Keyboard accessible
No seizure-inducing content
Proper heading structure

Level AA (Recommended)

Color contrast ratio 4.5:1 (text)
Resizable text up to 200%
Multiple navigation methods
Consistent navigation
Error identification

Level AAA (Enhanced)

Color contrast ratio 7:1 (text)
Sign language interpretation
Extended audio descriptions
No timing restrictions
Context-sensitive help

Examples

Example 1: WCAG Audit

Input: Audit homepage for WCAG compliance

Output:

## 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
<!-- Before -->
<img src="hero.jpg">

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

2. Missing Form Labels

Location: Email input (line 78)
Issue: Input has no associated label
Fix: Add proper label

<!-- Before -->
<input type="email" id="email">

<!-- After -->
<label for="email">Email Address</label>
<input type="email" id="email" aria-required="true">

Warnings (Level AA)

3. Color Contrast

Location: Button text (line 92)
Issue: Contrast ratio 3.2:1 (needs 4.5:1)
Fix: Darken text color



## 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