메뉴
Web アクセシビリティの設計・実装ガイド（フレームワーク非依存）。WCAG 2.1 準拠の基本原則、セマンティック HTML、ARIA パターン、キーボードナビゲーション、フォームアクセシビリティ、カラーコントラスト、動的コンテンツ、テスト観点をカバー。WCAG 準拠、a11y 対応が必要な時に使用。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | accessibility |
| description | Web アクセシビリティの設計・実装ガイド（フレームワーク非依存）。WCAG 2.1 準拠の基本原則、セマンティック HTML、ARIA パターン、キーボードナビゲーション、フォームアクセシビリティ、カラーコントラスト、動的コンテンツ、テスト観点をカバー。WCAG 準拠、a11y 対応が必要な時に使用。 |
WCAG 2.1 準拠を目標としたフレームワーク非依存のアクセシビリティ設計・実装ガイド。
| 原則 | 意味 | 主な要件 |
|---|---|---|
| 知覚可能 (Perceivable) | 情報を知覚できる | テキスト代替、キャプション、コントラスト |
| 操作可能 (Operable) | UI を操作できる | キーボード操作、十分な時間、発作防止 |
| 理解可能 (Understandable) | 情報と操作が理解できる | 読みやすさ、予測可能、入力支援 |
| 堅牢 (Robust) | 支援技術と互換性がある | 適切なマークアップ、名前と役割 |
Level A: 最低限の要件（必須）
Level AA: 推奨レベル（一般的な目標）
Level AAA: 最高レベル（全ページ準拠は非現実的）
→ 通常は Level AA 準拠を目標にする
<header> → バナー（サイトヘッダー）
<nav> → ナビゲーション
<main> → メインコンテンツ（ページに1つ）
<aside> → 補足コンテンツ
<footer> → フッター
<section> → セクション（見出し付き）
<article> → 独立したコンテンツ
- h1 はページに 1 つ
- 階層を飛ばさない（h1 → h3 は NG）
- 見出しだけで文書構造が理解できるように
- 装飾目的で見出しタグを使わない
原則: ネイティブ HTML 要素を優先する
✅ <button> → クリック可能な操作
✅ <a href=""> → ナビゲーション
✅ <input>, <select>, <textarea> → フォーム入力
❌ <div onclick=""> → ボタンの代替（キーボード操作不可）
❌ <span> でリンク模倣 → スクリーンリーダーが認識しない
1. ネイティブ HTML で解決できるなら ARIA は不要
2. ネイティブのセマンティクスを上書きしない
3. インタラクティブな要素はキーボード操作可能にする
4. focusable な要素に role="presentation" を使わない
5. すべてのインタラクティブ要素にアクセシブルな名前を付ける
| 属性 | 用途 | 例 |
|---|---|---|
| aria-label | 要素に名前を付ける | <button aria-label="メニューを閉じる">×</button> |
| aria-labelledby | 別要素で名前を定義 | <div aria-labelledby="title-id"> |
| aria-describedby | 説明を関連付け | <input aria-describedby="help-text"> |
| aria-expanded | 展開状態 | <button aria-expanded="false"> |
| aria-hidden | 支援技術から隠す | <span aria-hidden="true">装飾</span> |
| aria-live | 動的更新の通知 | <div aria-live="polite"> |
| aria-required | 必須フィールド | <input aria-required="true"> |
| aria-invalid | エラー状態 | <input aria-invalid="true"> |
| role | 要素の役割を定義 | <div role="alert"> |
詳細: references/aria-patterns.md
| キー | 動作 |
|---|---|
| Tab | 次のフォーカス可能な要素へ |
| Shift + Tab | 前のフォーカス可能な要素へ |
| Enter / Space | ボタン/リンクの実行 |
| Escape | モーダル/ポップアップを閉じる |
| 矢印キー | ラジオボタン、タブ、メニュー内の移動 |
原則:
- フォーカスインジケーターを常に表示する（outline: none 禁止）
- フォーカス順序が論理的であること（tabindex の乱用を避ける）
- tabindex="0": 自然な順序でフォーカス可能にする
- tabindex="-1": プログラムでフォーカスするが Tab では到達しない
- tabindex > 0: 使用禁止（順序が混乱する）
フォーカストラップ:
- モーダル表示時はモーダル内にフォーカスを閉じ込める
- モーダルを閉じたら元の要素にフォーカスを戻す
ページ先頭に「メインコンテンツへスキップ」リンクを配置
→ キーボードユーザーがナビゲーションを飛ばせる
→ 通常は非表示、フォーカス時に表示
必須:
- すべての入力フィールドに関連付けられたラベルを付ける
- <label for="id"> または aria-label / aria-labelledby
placeholder はラベルの代替にならない:
❌ <input placeholder="メールアドレス">
✅ <label for="email">メールアドレス</label>
<input id="email" placeholder="example@mail.com">
原則:
- エラーメッセージをフィールドに関連付ける（aria-describedby）
- エラー発生時にフォーカスをエラー箇所に移動
- 色だけでエラーを示さない（アイコン + テキストも使う）
- aria-invalid="true" でエラー状態を伝える
- エラーサマリーをフォーム上部に表示（複数エラー時）
- リアルタイムバリデーションは aria-live で結果を通知
- 必須フィールドは aria-required="true" + 視覚的な印
- 入力形式のヒントを aria-describedby で提供
WCAG AA 基準:
- 通常テキスト: コントラスト比 4.5:1 以上
- 大きなテキスト（18px 以上 or 14px bold）: 3:1 以上
- UI コンポーネント・アイコン: 3:1 以上
原則:
- 色だけで情報を伝えない（形、テキスト、パターンも使う）
- リンクは色だけでなく下線でも区別
- グラフは色以外のパターンも使用
- ダークモード時もコントラスト比を確認
aria-live の使い分け:
- "polite": ユーザーの操作を中断しない（推奨）
→ トースト通知、検索結果の更新
- "assertive": 即座に通知（緊急時のみ）
→ エラーメッセージ、セッション期限切れ
aria-atomic:
- "true": 領域全体を読み上げ
- "false": 変更部分のみ読み上げ（デフォルト）
- ページ遷移時にページタイトルを更新
- 新しいコンテンツにフォーカスを移動（または通知）
- ローディング状態を aria-busy="true" で伝える
- 読み込み完了を通知（aria-live 領域で）
最低限のチェック:
- HTML バリデーション
- ランドマーク構造
- alt テキストの存在
- ラベルの関連付け
- コントラスト比
- ARIA 属性の正しい使用
キーボードテスト:
1. Tab キーですべての操作可能な要素に到達できるか
2. フォーカスインジケーターが見えるか
3. Enter/Space でボタン/リンクが動作するか
4. Escape でモーダルが閉じるか
スクリーンリーダーテスト:
1. 見出し構造でナビゲーションできるか
2. フォームのラベルが読み上げられるか
3. エラーメッセージが通知されるか
4. 動的コンテンツの更新が伝わるか
詳細: references/wcag-checklist.md
Generate draw.io diagrams as .drawio files, optionally export to PNG/SVG/PDF with embedded XML
Figma MCP を使ってデザインを FE コードに変換するスキル。 Trigger when: Figma URL が共有された時、デザインからコンポーネント実装時、 UI 実装でデザイン参照が必要な時、"Figma", "デザイン", "UI実装" への言及時、 「このデザインを実装して」「Figma から」「デザイン通りに」と言われた時。 Always use with: /web-design-principles
プロジェクト全体の統括エージェント向けスキル。要件整理から技術選定・アーキテクチャ設計・タスク分解・委譲までをカバー。git worktreeを活用した並列開発オーケストレーション（featureブランチ管理、BE/FE統括への委譲、横断レビュー）も担う。プロジェクト全体を俯瞰し、適切なエージェント/スキルに委譲する。新規プロジェクト立ち上げ、技術選定、全体設計、タスク分解・委譲、並列開発時に使用。
Webデザイン実装の鉄則ガイド。CSS/レイアウト設計の原則を提供。 Trigger when: UI/UX実装時、CSS設計時、レイアウト実装時、レスポンシブ対応時、 アクセシビリティ確認時、"レイアウト", "CSS", "スタイル" への言及時。 /figma-to-code スキルと併用する場合に自動で参照される。
Codex CLIワーカーエージェントを起動してタスクを実行する。 Claude CodeがオーケストレーターとしてCodexを呼び出すハイブリッド構成。 トリガー: 「Codexで実行」「Codexに任せて」「並列でCodex」「高速に処理」
CSS の包括的なベストプラクティスガイド（フレームワーク非依存）。パフォーマンス最適化、保守性、シンプルなコード、親子要素の相対値設計、モダン CSS 機能（Container Queries、:has()、ネイティブネスティング、Cascade Layers）をカバー。CSS 設計・実装・レビュー時に使用。Tailwind CSS 等のユーティリティフレームワーク使用時は tailwind-css スキルを参照。