Blyxo Accessibility Linter

Real-time accessibility linting for HTML, JSX, TSX, Vue, and Svelte files directly in VS Code. Catch WCAG 2.0/2.1/2.2 violations as you type — no browser or runtime needed.

Features

25+ accessibility rules covering WCAG Level A, AA, and AAA
Real-time linting — issues appear as you type with inline squiggles
Quick fixes — one-click fixes for common issues (add alt, add lang, add aria-label)
Sidebar issue browser — browse all issues grouped by severity
Status bar — see error/warning/info counts at a glance
WCAG level filtering — choose A, AA, or AAA conformance level
JSX/TSX support — handles className, htmlFor, and other JSX attributes
Git pre-push hook — block pushes with accessibility issues above a severity threshold

Supported File Types

HTML, JSX, TSX, Vue, Svelte, Handlebars, Markdown

Getting Started

Install the extension from the VS Code Marketplace
Open any HTML, JSX, or TSX file
Accessibility issues appear immediately in the editor and Problems panel

No configuration needed — works out of the box with sensible defaults.

Commands

Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and type "Blyxo":

Command	Description
`Blyxo: Toggle Linter`	Enable or disable the linter
`Blyxo: Install Pre-Push Hook`	Add a git hook that blocks pushes with a11y issues
`Blyxo: Show Issue Detail`	View full details for an issue in a side panel

Settings

Configure in VS Code Settings (Cmd+, / Ctrl+,) under "Blyxo Accessibility Linter":

Setting	Default	Description
`blyxo.linter.enabled`	`true`	Enable or disable static linting
`blyxo.linter.wcagLevel`	`"AA"`	WCAG conformance level: `A`, `AA`, or `AAA`
`blyxo.linter.severityThreshold`	`"minor"`	Minimum severity to show: `critical`, `serious`, `moderate`, `minor`
`blyxo.gitHook.enabled`	`false`	Enable pre-push accessibility gate
`blyxo.gitHook.blockOnSeverity`	`"serious"`	Minimum severity that blocks a push
`blyxo.maxProblems`	`100`	Maximum number of issues per file

Rules

Critical

Rule	WCAG	Description
`image-alt`	1.1.1 (A)	Images must have alt attributes
`button-name`	4.1.2 (A)	Buttons must have accessible names
`link-name`	2.4.4 (A)	Links must have accessible names
`input-label`	1.3.1 (A)	Form inputs must have associated labels
`empty-heading`	1.3.1 (A)	Headings must have text content

Serious

Rule	WCAG	Description
`html-lang`	3.1.1 (A)	`<html>` must have a lang attribute
`heading-order`	1.3.1 (A)	Heading levels must not skip
`aria-valid`	4.1.2 (A)	ARIA roles and attributes must be valid
`color-contrast`	1.4.3 (AA)	Inline styles must meet 4.5:1 contrast ratio
`viewport-zoom`	1.4.4 (AA)	Viewport must not disable zoom
`page-title`	2.4.2 (A)	Pages must have descriptive titles
`skip-link`	2.4.1 (A)	Pages should have a skip navigation link
`no-autoplay`	1.4.2 (A)	Autoplaying media must be muted with controls
`media-alt`	1.1.1 (A)	Videos should have captions
`label-in-name`	2.5.3 (A)	Accessible name must contain visible text

Moderate

Rule	WCAG	Description
`tabindex-positive`	2.4.3 (A)	No positive tabindex values
`duplicate-id`	4.1.1 (A)	Element IDs must be unique
`table-headers`	1.3.1 (A)	Data tables must have header cells
`autocomplete-valid`	1.3.5 (AA)	Autocomplete values must be valid
`list-structure`	1.3.1 (A)	List items must be in list containers
`landmarks`	1.3.1 (A)	Pages should have landmark regions
`image-redundant-alt`	1.1.1 (A)	Alt text should not contain "image", "photo", etc.
`valid-nesting`	4.1.1 (A)	No buttons inside links or links inside buttons

Minor (AAA)

Rule	WCAG	Description
`link-purpose-alone`	2.4.4 (AAA)	No generic link text like "click here"

Git Pre-Push Hook

Block pushes that contain accessibility issues:

Run Blyxo: Install Pre-Push Hook from the Command Palette
The hook runs static analysis on changed HTML/JSX/TSX/Vue/Svelte files before each push
Push is blocked if issues at or above the configured severity are found

To uninstall, delete the blyxo section from .git/hooks/pre-push.

License

MIT

Blyxo - WCAG Accessibility Checker

Blyxo