How to use an accessibility linter in VS Code

Use ZemDomu in VS Code for source-level accessibility feedback while you edit HTML, JSX, TSX, and Vue. Inline diagnostics catch local markup problems, while a workspace scan can analyze supported structure spread across imported components.

Install ZemDomu and review your first diagnostic

The extension starts checking supported source files after it is installed and a project is open. You do not need to add a project configuration before reviewing the first diagnostic.

  1. Install ZemDomu from its VS Code Marketplace listing.
  2. In VS Code, open the project folder or workspace that contains the source you want to check.
  3. Open an HTML, JSX, TSX, or Vue file. ZemDomu reports supported findings as editor diagnostics and in the Problems panel.
  4. Select a diagnostic to open its file and line, then use the displayed ZemDomu rule code to open the matching rule documentation.
  5. Correct the source and save the file. Confirm that the diagnostic clears, then test the rendered behavior when the issue depends on runtime state or interaction.

HTML: add a text alternative

An informative image needs an alt attribute that communicates its purpose. Use alt="" only when an image is genuinely decorative.

<!-- Broken: the image has no text alternative. -->
<img src="quarterly-growth.png">

<!-- Corrected: the alt text communicates the chart's result. -->
<img
  src="quarterly-growth.png"
  alt="Quarterly sign-ups increased from 420 to 610"
>

JSX: give an icon button an accessible name

An SVG does not give its parent button a useful name by itself. Add visible text when possible, or label an icon-only control with the action it performs.

// Broken: assistive technology may announce only "button".
<button type="button">
  <CloseIcon />
</button>

// Corrected: the control has a concise accessible name.
<button type="button" aria-label="Close dialog">
  <CloseIcon aria-hidden="true" />
</button>

TSX: associate a label with its form control

React uses htmlFor in JSX and TSX. Its value must match the input id so the visible label becomes the control's accessible name.

// Broken: the text is not programmatically associated with the input.
export function EmailField() {
  return <><span>Email address</span><input type="email" /></>;
}

// Corrected: htmlFor and id create the label relationship.
export function EmailField() {
  return (
    <>
      <label htmlFor="email">Email address</label>
      <input id="email" name="email" type="email" />
    </>
  );
}

Vue: preserve a sequential heading outline

Vue templates use normal HTML heading elements. Choose the level from the composed page outline, not from the component's visual size.

<!-- Broken: the template skips from h1 to h3. -->
<template>
  <main>
    <h1>Account</h1>
    <h3>Security settings</h3>
  </main>
</template>

<!-- Corrected: the subsection follows the page heading. -->
<template>
  <main>
    <h1>Account</h1>
    <h2>Security settings</h2>
  </main>
</template>

Run a workspace scan when context crosses files

Use inline diagnostics for issues contained in the file you are editing, such as a missing alt attribute or an empty button. Use a workspace scan when the answer depends on project context: headings or landmarks assembled across imports, repeated ids from component composition, or a baseline review of an unfamiliar project.

A workspace scan is also useful before opening a pull request or after a structural refactor. It does not need to replace the faster inline feedback you use for isolated edits.

  1. Open the Command Palette with Ctrl+Shift+P on Windows or Linux, or Cmd+Shift+P on macOS.
  2. Choose ZemDomu: Scan Workspace for Semantic Accessibility Issues and run it for the open workspace.
  3. Review each reported file, line, and rule code in the Problems panel. Fix source issues first, then rerun the scan to confirm the workspace is clear.
ZemDomu: Scan Workspace for Semantic Accessibility Issues

Follow static linting with rendered testing

ZemDomu can identify supported source patterns and cross-component structure before rendering. It cannot prove that alt text is accurate, dynamic ARIA state stays synchronized, focus moves correctly, colors have sufficient contrast, or a completed interaction works with assistive technology.

After the source diagnostics are resolved, test the rendered DOM, keyboard flow, important interaction states, and representative screen-reader behavior. Static linting is an early feedback layer, not a replacement for those checks.

Related ZemDomu rules