Markup is valid and well-formed

Invalid HTML — duplicate IDs, improperly nested elements, unclosed tags — causes screen readers to parse the DOM incorrectly or skip content entirely. WCAG 2.2 SC 4.1.1 (Parsing) is a Level A requirement. Duplicate id values break aria-labelledby, aria-describedby, and for associations — the very attributes that connect form labels to inputs and error messages to fields. A heading nested inside a <button> confuses the accessibility tree in ways that vary unpredictably across screen readers.

Run automated HTML validation as part of your CI pipeline to catch duplicate IDs and nesting errors before they reach production.

# Install htmlhint as a dev dependency
npm install --save-dev htmlhint

# Add to package.json scripts
"lint:html": "htmlhint 'src/**/*.html' 'public/**/*.html'"

# Or use Nu Validator for rendered output in CI
npx @nicolo-ribaudo/nuhtml-check http://localhost:3000

For React/JSX specifically, duplicate id values are the most common violation. Search the codebase for hardcoded id= strings that appear more than once — every duplicate breaks any ARIA attribute referencing that ID. Also check for <div> or <p> inside <button> and <p> inside <p>, which are invalid nesting patterns that corrupt the accessibility tree.