Vue accessibility linting across components

Vue templates often distribute headings, landmarks, ids, and controls across single-file components. ZemDomu can follow statically imported components to identify semantic source patterns that are not visible in one template alone.

Start with a complete Vue template check

Local template checks catch issues that are fully visible in one single-file component. In this form, the label is not associated with the input and the icon-only button has no accessible name.

<!-- Broken ProfileForm.vue -->
<template>
  <form>
    <span>Display name</span>
    <input type="text">
    <button type="button"><CloseIcon /></button>
  </form>
</template>

<!-- Corrected markup -->
<template>
  <form>
    <label for="display-name">Display name</label>
    <input id="display-name" name="displayName" type="text">
    <button type="button" aria-label="Close profile form">
      <CloseIcon aria-hidden="true" />
    </button>
  </form>
</template>

Check headings across imported Vue components

AccountPage.vue establishes h1 and then imports SettingsPanel.vue, whose template begins at h3. The hierarchy only becomes h1 to h3 after Vue composes the imported child.

Change the panel heading to h2 for this page outline. If a panel is reused at different depths, make its heading semantics an explicit part of the component contract rather than choosing the element for its default font size.

<!-- AccountPage.vue -->
<script setup lang="ts">
import SettingsPanel from "./SettingsPanel.vue";
</script>

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

<!-- SettingsPanel.vue: broken h3; use h2 in this outline. -->
<template>
  <section>
    <h3>Security settings</h3>
    <p>Manage passkeys and recovery codes.</p>
  </section>
</template>

Enable cross-component analysis in editor and CLI

Set zemdomu.crossComponentAnalysis to true in .vscode/settings.json, then run ZemDomu: Scan Workspace for Semantic Accessibility Issues when you want supported Vue imports analyzed together. The CLI equivalent uses --cross; --cross-depth 3 limits how far the analyzer follows nested imports.

  1. Add "zemdomu.crossComponentAnalysis": true to the workspace's .vscode/settings.json.
  2. Run ZemDomu: Scan Workspace for Semantic Accessibility Issues from the VS Code Command Palette.
  3. For a repeatable local check, install ZemDomu and run the command below from the repository root.
npm install --save-dev zemdomu
npx zemdomu "src/**/*.vue" --cross --cross-depth 3

Understand Vue analysis limitations

Cross-component source analysis depends on imports and templates that can be resolved statically. A runtime-selected <component :is="..."> target, content supplied through slots, async components, render functions, generated templates, and branches controlled by live data may produce a different final tree.

ZemDomu also cannot prove focus movement, dynamic announcements, accessible-name accuracy, color contrast, or screen-reader behavior. Inspect the rendered DOM and accessibility tree, exercise conditional states with a keyboard, and include representative assistive-technology testing.

Related ZemDomu rules