ToolCraft
HomeAI ToolsDeveloper ToolsUnit ConverterImage Tools
ToolCraft

© 2026 ToolCraft. All rights reserved.

Privacy PolicyTerms of Service
DMCA.com Protection Status
HomeAccessibilityForm Label Checker

Accessibility

Heading Outline CheckerAlt Text AuditorARIA Landmark VisualizerForm Label Checker

Form Label Checker

Paste an HTML form to verify every <input>, <select>, <textarea>, and <button> has an accessible name per WCAG 3.3.2.

HTML is parsed entirely in your browser. No form data is collected.

0
Controls
0
Labeled
0
Unlabeled
0
Required
Paste an HTML form to begin.

View all Accessibility

View all
100% offline
New

Heading Outline Checker

Paste HTML, see the H1-H6 outline as a tree, and get WCAG accessibility warnings for skipped levels, missing H1, and empty headings.

Accessibility
100% offline
New

Alt Text Auditor

Paste HTML to audit <img>, <svg>, <input type=image> and role=img elements against WCAG 2.1 alt-text rules.

Accessibility
100% offline
New

ARIA Landmark Visualizer

Paste HTML to see the page's landmark tree (banner/main/nav/aside/footer + ARIA roles) and structural a11y issues.

Accessibility

Why every form control needs a label

When a screen reader hits an <input>, it announces the accessible name of that field so the user knows what to type. If you forgot a <label> or only wrote a placeholder, the reader announces "edit, blank" — no clue what the field is. WCAG 3.3.2 (Labels or Instructions) is one of the most-violated success criteria in commercial sites; even teams using component libraries often skip wiring up htmlFor/id pairs correctly. The Form Label Checker parses any HTML form you paste — a static page, a CMS export, a React component's rendered output — and checks every <input>, <select>, <textarea>, <button>, and <output> against the accessible-name lookup chain: aria-labelledby → aria-label → <label for> → wrapping <label> → title attribute → value/text for buttons. It flags placeholders used as the only label (they vanish on focus), <label for=""> pointing at missing IDs, duplicate IDs that break label associations, orphan <label> elements, missing aria-describedby targets, and missing autocomplete on email/tel/password fields. Audit before you push, after every component refactor, or on third-party form embeds you have to integrate.

Accessible name priority chain

Per ARIA spec, browsers compute a form control's accessible name by walking this chain in order, taking the first non-empty result: (1) aria-labelledby — IDs resolved and concatenated; (2) aria-label — verbatim string; (3) <label for="id"> elsewhere in the document; (4) wrapping <label>; (5) for <button>, the visible text; (6) for <input type=submit|button|reset>, the value attribute; (7) for <input type=image>, the alt attribute; (8) title attribute as last resort. The tool reports the first source it finds and flags when fallback sources (especially placeholder or title) are doing work that should belong to a real label.

FAQ