HTML フォームを貼り付けて、各 <input>、<select>、<textarea>、<button> が WCAG 3.3.2 に沿ったアクセシブルネームを持つかを検証します。
HTML はすべてブラウザ内で解析されます。フォームデータを収集しません。
HTML を貼り付け、H1-H6 アウトラインをツリー表示、スキップされたレベル、H1 不足、空の見出しに対して WCAG アクセシビリティ警告を取得。
HTML を貼り付けて <img>、<svg>、<input type=image>、role=img 要素を WCAG 2.1 alt 規則で監査します。
HTML を貼り付けてページのランドマークツリー(banner/main/nav/aside/footer + ARIA role)と構造的 a11y 問題を表示します。
スクリーンリーダーは <input> に到達すると、そのフィールドのアクセシブルネームを読み上げます。ユーザーは何を入力すべきか分かります。<label> を忘れたりプレースホルダだけを書いたりすると、リーダーは「edit、blank」と読み上げ、ユーザーはフィールドの意味が分からなくなります。WCAG 3.3.2(ラベル又は説明)は商用サイトで最も違反の多い達成基準の 1 つです。コンポーネントライブラリを使うチームでさえ、htmlFor/id ペアの正しい結線を省略しがちです。本フォームラベルチェッカーは、貼り付けた任意の HTML フォーム(静的ページ、CMS エクスポート、React コンポーネントのレンダリング出力など)を解析し、すべての <input>、<select>、<textarea>、<button>、<output> について次のアクセシブルネーム探索順に沿ってチェックします: aria-labelledby → aria-label → <label for> → ラップする <label> → title 属性 → ボタンの value / テキスト。プレースホルダだけがラベルになっているケース(フォーカス時に消える)、存在しない ID を指す <label for="">、ラベル結線を壊す重複 ID、孤立した <label>、欠落した aria-describedby ターゲット、email / tel / password フィールドの autocomplete 欠落を指摘します。push 前、コンポーネントのリファクタ後、統合が必要なサードパーティ製フォーム埋め込みなどで監査してください。
ARIA 仕様によると、ブラウザはフォームコントロールのアクセシブルネームを次の順で探索し、最初に得られる空でない結果を採用します: (1) aria-labelledby — ID を解決し連結;(2) aria-label — そのままの文字列;(3) ドキュメント内の <label for="id">;(4) ラップする <label>;(5) <button> なら可視テキスト;(6) <input type=submit|button|reset> なら value 属性;(7) <input type=image> なら alt 属性;(8) 最後の手段として title 属性。ツールは最初に見つかったソースを報告し、フォールバックソース(特に placeholder や title)が本来ラベルが担うべき役割を担っているときに警告します。