GitHub - be-lenka/vscode-be-a11y: A VSCode extension for running accessibility audits using be-a11y

2 min read Original article ↗

Be-a11y VSCode Extension

A Visual Studio Code extension for running accessibility audits using be-a11y. This extension allows you to analyze your project or a remote website for accessibility issues directly from VSCode. Results are presented in a convenient way and can be saved for further review.

image

Features

  • Run accessibility audits on the current workspace (local project) or any URL
  • View results directly in VSCode
  • Save the latest accessibility report to a file
  • All actions available in the Activity Bar panel or via Command Palette

Installation

1. Prerequisites

2. Clone the Repository

git clone https://github.com/be-lenka/vscode-be-a11y.git
cd vscode-be-a11y

3. Install Dependencies

4. Compile the Extension

5. Launch the Extension

  • Open the folder in VSCode:
    • code .
  • Press F5 to open a new Extension Development Host window.
  • The "be-a11y" icon will appear in the Activity Bar (on the left side).

Usage

Running an Audit

  1. Set Target
    • In the be-a11y Activity Bar panel, select:
      • Set target (URL or Local project): Choose whether to audit a remote website or the current workspace.
  2. Run Audit
    • Click Run accessibility audit and generate report.
    • The results will open in a new editor tab.

Saving a Report

  • After running an audit, use Save last accessibility report in the Activity Bar panel to save the latest results to a file.

Commands in Command Palette

All actions are also available via the Command Palette (Ctrl+Shift+P or Cmd+Shift+P):

  • beA11y: Set target
  • beA11y: Run accessibility audit
  • beA11y: Save last accessibility report

Development

  • Source code is in the src/ directory.
  • The extension entry point is src/extension.ts.
  • TypeScript configuration: tsconfig.json.

Build & Package

To build and package the extension for distribution:

npm run build
npx vsce package

This will generate a .vsix file you can install in VSCode.

Troubleshooting

  • If you see a message about missing be-a11y library, make sure you've run npm install.
  • If the panel does not appear, check that your package.json has the correct contribution points and the extension was compiled.

License

MIT