A11yScope
Catches accessibility bugs in HTML, JSX, TSX, Vue, and Svelte while you type, so WCAG issues get fixed before code review.
A11yScope runs a static rule engine over your markup as you edit. Violations show up as squiggles in the editor and entries in the Problems panel, most of them with a one-click quick fix. A workspace scan collects every issue into a tree grouped by file -> issue, and a status bar item keeps a live count for the active file.
Rules
| Rule id |
What it catches |
WCAG |
Default severity |
Quick fix |
img-alt |
<img> without an alt attribute |
1.1.1 |
error |
Insert alt="" |
anchor-text |
<a> with no accessible text |
2.4.4 |
error |
Add aria-label |
button-label |
<button> with no label or aria-label |
4.1.2 |
error |
Add aria-label |
input-label |
input/select/textarea without a label, aria-label, or aria-labelledby |
3.3.2 |
warning |
Add aria-label |
click-handler |
Click handler on div/span without role and tabindex |
2.1.1 |
warning |
Add role="button" tabindex="0" |
positive-tabindex |
tabindex greater than 0 |
2.4.3 |
warning |
Change to 0 |
autofocus |
autofocus attribute |
3.2.1 |
warning |
Remove it |
iframe-title |
<iframe> without a title |
4.1.2 |
error |
Add title="" |
heading-order |
Heading level jumps such as h1 -> h3 |
1.3.1 |
warning |
- |
empty-href |
href="#" link with no click handler |
2.4.4 |
warning |
- |
redundant-alt |
Alt text starting with "image of" or "picture of" |
1.1.1 |
info |
Remove the prefix |
role-img-label |
role="img" without aria-label |
1.1.1 |
error |
Add aria-label |
html-lang |
<html> missing a lang attribute |
3.1.1 |
warning |
Add lang="en" |
marquee-blink |
<marquee> or <blink> elements |
2.2.2 |
error |
- |
aria-hidden-focusable |
Focusable element with aria-hidden="true" |
4.1.2 |
error |
Remove aria-hidden |
viewport-zoom |
Viewport meta that disables pinch zoom |
1.4.4 |
warning |
Allow zoom |
Every diagnostic carries the source A11yScope, the rule id as its code, and the WCAG criterion in its message.
Commands
All commands live under the A11yScope category in the Command Palette.
| Command |
What it does |
| A11yScope: Scan Current File |
Scans the active editor and reports the issue count |
| A11yScope: Scan Workspace |
Scans every supported file (excludes such as node_modules are skipped) and fills the issues view grouped by file -> issue |
| A11yScope: Show Issues View |
Focuses the A11yScope Issues view in the Explorer |
| A11yScope: Enable or Disable Checks |
Flips the a11yScope.enabled setting |
Quick fixes
Place the cursor on any underlined element and press Cmd+. (macOS) or Ctrl+. (Windows/Linux), then pick the suggested fix, for example:
- Insert
alt="" on an image
- Add
role="button" tabindex="0" to a clickable div
- Remove
autofocus
- Add
title="" to an <iframe>
- Re-enable pinch zoom in a viewport meta tag
Issues view
The A11yScope Issues view in the Explorer groups results by file -> issue. Click an issue to open the file with the offending range selected. Use the refresh icon in the view title to rescan the workspace.
Status bar
While a supported file is active, the status bar shows N issues for that file. Hover for a breakdown of the most violated rules, click to focus the issues view.
Settings
| Setting |
Type |
Default |
Description |
a11yScope.enabled |
boolean |
true |
Enable or disable all checks |
a11yScope.disabledRules |
string[] |
[] |
Rule ids to skip |
a11yScope.severityOverrides |
object |
{} |
Map of rule id to error, warning, or info |
Example:
{
"a11yScope.enabled": true,
"a11yScope.disabledRules": ["redundant-alt"],
"a11yScope.severityOverrides": {
"input-label": "error",
"autofocus": "info"
}
}
Getting started
On first activation A11yScope offers a short walkthrough. You can reopen it any time via Help: Get Started, then pick Get Started with A11yScope.
Supported languages
- HTML
- JSX (React)
- TSX (React + TypeScript)
- Vue
- Svelte
Requirements
Author
Kanaihya Kumar - kanaihyakmr@gmail.com
License
MIT
