Vue accessibility linting across components

Vue templates often distribute headings, landmarks, and controls across single-file components. ZemDomu helps identify semantic source patterns before the application reaches the browser.

Check the composed page outline

Inspect the heading rendered by a child component in the context of its parent. A reusable component should not assume that one heading level is correct everywhere it is used.

<template>
  <main>
    <h1>Account</h1>
    <SettingsPanel />
  </main>
</template>

Scan Vue files with the CLI

Run the same project-wide command used for HTML, JSX, and TSX. The file pattern keeps Vue single-file components in the scan.

npx zemdomu "**/*.{html,jsx,tsx,vue}"

Understand the boundary

Static analysis cannot confirm the final state of conditionally rendered content, focus changes after interaction, or how a screen reader announces a live application. Test those behaviors in the rendered app.

Related ZemDomu rules