React accessibility linting across components

React components can look valid in isolation while producing an invalid heading outline or duplicate landmark after composition. ZemDomu checks the structure assembled by the project.

Watch component boundaries

A card component that always renders an h3 may be correct below an h2 and incorrect when placed directly below the page h1. Treat heading level as part of the component's context, not only its local markup.

function Page() {
  return <main><h1>Reports</h1><ReportCard /></main>;
}

function ReportCard() {
  return <section><h3>Weekly report</h3></section>;
}

Run the same rules locally

Install the CLI as a development dependency and scan the source patterns used by the project. Keep the command in a package script so teammates and CI run the same check.

npm install --save-dev zemdomu
npx zemdomu "**/*.{html,jsx,tsx,vue}"

Follow with rendered testing

Use browser and assistive-technology testing for focus behavior, dynamic announcements, visual contrast, and interactions. Those outcomes depend on rendered state and user behavior rather than source structure alone.

Related ZemDomu rules