HTML のアクセシビリティ簡易チェック
HTML accessibility quick check
HTML を読み込み、alt のない画像・ラベルのない入力欄・lang の指定漏れ・見出しの飛び・中身のないリンク・「こちら」のような分かりにくいリンク文言を、行番号とセレクタつきで報告します。
できること
HTML ファイルやビルド済みフォルダを読み込み、機械的に見つけられるアクセシビリティの問題を一覧にします。
- alt のない画像、ファイル名や「画像」だけの alt
- ラベルのない入力欄(placeholder だけの欄も指摘)
<html lang>や<title>の指定漏れ- 見出しレベルの飛び(h2 の次に h4 など)、h1 がないページ
- 文字も代替テキストもないリンクやボタン
- 「こちら」「詳しくはこちら」「click here」「read more」のような、行き先が分からないリンク文言
- 重複した id、title のない iframe、正の tabindex、ズームを禁止する viewport など
それぞれ、ファイル名・行・列・CSS セレクタ・直し方の例つきで報告します。
使い方
python scripts/a11y_check.py dist --md a11y-report.md --json a11y-report.json
エージェントが結果を確かめ、元のテンプレートや記事のどこを直すかを提案します。
必要な環境
- Python 3(標準ライブラリのみ)
注意点
- 機械的な簡易チェックです。WCAG への適合を保証するものではありません。
- 色のコントラスト、キーボード操作、alt の内容の適切さなどは人の確認が必要で、レポートにもその旨を書きます。
- JavaScript で後から表示される内容は対象外です。
English description
Scans HTML for images without alt, unlabeled inputs, missing lang, heading skips, empty links and buttons, and vague link text, with line numbers and selectors.
What it does
Reads HTML files or a built folder and lists accessibility problems that can be detected reliably by a machine.
- Images without alt, or with a file name or a generic word as alt
- Form fields without a label (placeholder alone is flagged)
- Missing
<html lang>or<title> - Heading level skips (h2 followed by h4) and pages without an h1
- Links and buttons with no text or accessible name
- Vague link text such as "click here", "read more" and common Japanese equivalents
- Duplicate ids, iframes without title, positive tabindex, viewport settings that block zoom
Each finding includes file, line, column, a CSS selector and an example fix.
How to use
python scripts/a11y_check.py dist --md a11y-report.md --json a11y-report.json
The agent verifies the findings and points to the template or content that needs to change.
Requirements
- Python 3 (standard library only)
Caveats
- This is a quick static check, not a WCAG conformance audit.
- Colour contrast, keyboard operation and the quality of alt text still need a human review, and the report says so.
- Content rendered later by JavaScript is not included.
インストール方法
- ダウンロードしたZIPを展開します(中に
html-accessibility-check/フォルダとSKILL.mdがあります)。 - フォルダごと、使うエージェントのスキル置き場にコピーします。
- Claude:
~/.claude/skills/(プロジェクト単位なら.claude/skills/) - Hermes Agent:
~/.hermes/skills/ - Codex:
~/.agents/skills//Cursor:~/.cursor/skills/ - Claude アプリ(claude.ai):「カスタマイズ → スキル」からZIPをアップロード
- Claude:
- エージェントを再起動し、スキル一覧に表示されることを確認します。
出品者
出品スキル 44 件