HTML のアクセシビリティ簡易チェック

HTML accessibility quick check

HTML を読み込み、alt のない画像・ラベルのない入力欄・lang の指定漏れ・見出しの飛び・中身のないリンク・「こちら」のような分かりにくいリンク文言を、行番号とセレクタつきで報告します。

ClaudeHermes AgentCodexCursorMIT(改変・再配布・商用利用可)Python

できること

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.

インストール方法

  1. ダウンロードしたZIPを展開します(中に html-accessibility-check/ フォルダと SKILL.md があります)。
  2. フォルダごと、使うエージェントのスキル置き場にコピーします。
    • Claude:~/.claude/skills/(プロジェクト単位なら .claude/skills/)
    • Hermes Agent:~/.hermes/skills/
    • Codex:~/.agents/skills//Cursor:~/.cursor/skills/
    • Claude アプリ(claude.ai):「カスタマイズ → スキル」からZIPをアップロード
  3. エージェントを再起動し、スキル一覧に表示されることを確認します。

Windows・Mac 別、エージェント別のインストール手順

出品者

AI Skill Market 公式

出品スキル 44 件

出品者のプロフィールとスキル一覧