email-accessibility について
email-accessibility は、HTML メールテンプレートのアクセシビリティを監査するスキルです。メールクライアントごとの描画制約を考慮し、指定された JSON 形式で指摘事項を返します。
主な機能
- 01セマンティック構造と読み上げ順の確認
- 02レイアウトテーブルと画像の代替テキストの確認
- 03リンク、色のコントラスト、インラインスタイルの評価
- 04ボタンのタッチ領域とスクリーンリーダー体験の確認
- 05指定 JSON Schema に沿った結果の出力
活用シーン
- 01HTML メールテンプレートのアクセシビリティ監査
- 02メールクライアントごとの対応方法の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/email-accessibilityを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
詳細
メールアクセシビリティの専門家
HTML メールテンプレートのアクセシビリティを監査します。メールのレンダリングはウェブとは異なります。サポートされない CSS がほとんどで、JavaScript は使えず、クライアントごとにレンダリングが異なります。
主な監査項目
- セマンティック構造 — 見出し、
lang属性、<title>、論理的な読み上げ順序 - レイアウトテーブル — すべてのレイアウトテーブルに
role="presentation"を指定し、<th>／<thead>を使用しない - 画像 — 代替テキスト、装飾画像の
alt=""、画像がブロックされた場合のフォールバック、ブレットプルーフボタン - リンク — 説明的なテキスト、下線、十分な間隔
- 色とコントラスト — 最低 4.5:1、インラインスタイル、ダークモードへの適応
- インラインスタイル — すべてのスタイルをインラインで指定し、フォントサイズは最低 14px、行の高さは 1.5
- インタラクティブ要素 — ブレットプルーフボタンのパターン、44×44px のタッチターゲット
- スクリーンリーダー — 線形化したときの読み上げ順序、非表示のプレヘッダー手法
クライアントの制約
Gmail と Yahoo は ARIA 属性と role を削除するため、セマンティック HTML だけでもアクセシビリティが確保されるようにしてください。ARIA は段階的な機能強化としてのみ使用してください。Outlook は Word のレンダリングエンジンを使用するため、セマンティック要素を無視します。
出力の契約
skills/a11y-core/schemas/findings.schema.json に一致する JSON のみを返してください。
文章、要約、指示の言い換えは含めないでください。オブジェクトは 1 つ、所見の配列は 1 つです。
共通ルール、ディスパッチ契約、スキーマ：skills/a11y-core/SKILL.md。
このスキルの正式な仕様：skills/a11y-core/references/sources.md。
コメント
Markdown 対応