HTML checks
Handrix checks the page’s HTML for structural mistakes and common accessibility problems. Results update as you edit.
Where they appear
| Location | Shows |
|---|---|
| Checks → Element checks (Props tab) | Problems with the selected element(s). |
| Page settings → Accessibility & validation (Props tab) | Every problem on the page, each prefixed with the element it concerns (<img>#hero, <a>.nav-link). |
Levels
| Level | Icon | Meaning |
|---|---|---|
| Error | ✕ in red | Invalid HTML or something that breaks behavior. |
| Warning | ! in amber | An accessibility or reference problem. |
| Info | i faded | A suggestion. Not counted in tool badges. |
Problems are listed errors first, then warnings, then info.
Element rules
| Rule | Level | Triggered when |
|---|---|---|
| Duplicate id | Error | Another element uses the same id. |
| Id with spaces | Error | The id contains whitespace. |
| Required attribute | Error | img without src; track without src; map without name; optgroup without label; object without data; embed without src; area without alt; image button (input type="image") without alt; source with neither src nor srcset. |
| Wrong parent | Error | An element is outside the parent it requires: li in ul/ol/menu; dt/dd in dl (or div); tr in a table section; td/th in tr; thead/tbody/tfoot/caption/colgroup in table; col in colgroup; option in select/datalist/optgroup; optgroup in select; figcaption in figure; summary in details; legend in fieldset; source in video/audio/picture; track in video/audio; area in map; param in object. |
| Block inside paragraph | Error | A p directly contains a block element (div, ul, table, a heading, another p, …). Browsers split the paragraph. |
| Nested interactive | Error | A link or button contains another interactive element (link, button, form field, iframe, details, label, media with controls, or anything with tabindex). |
| Nested form | Error | A form inside another form. |
| Missing alt text | Warning | img has no alt attribute. An empty alt="" is accepted for decorative images. |
| Iframe title | Warning | iframe without a title. |
| Empty link or button | Warning | A link (with href) or button has no text, aria-label, aria-labelledby, title, or image with alt text inside. |
| Form label | Warning | A form field (input other than hidden, submit, reset, button and image; select; textarea) has no label for, no wrapping label, and no aria-label, aria-labelledby or title. |
| Broken reference | Warning | for, list, form, headers, popovertarget, aria-labelledby, aria-describedby, aria-controls, aria-owns, aria-activedescendant, aria-details or aria-errormessage names an id that doesn’t exist; usemap names a map that doesn’t exist. |
| Skipped heading level | Warning | A heading is more than one level below the previous heading (h2 followed by h4). |
| First heading | Info | The first heading on the page isn’t h1. |
| Button type | Info | A button inside a form has no type, so it submits the form. |
| New-tab link | Info | A link with target="_blank" has neither noopener nor noreferrer in rel. |
Page rules
| Rule | Level | Triggered when |
|---|---|---|
| Page language | Warning | <html> has no lang. |
| Page title | Warning | The head has no <title> with text. |
| Viewport | Info | No <meta name="viewport">. |
| Description | Info | No <meta name="description">. |
| Several h1 | Info | The page has more than one h1. |
Related
- How-to: Fix accessibility issues
- Reference: Props panel