@webability/eslint-plugin
v0.1.1
Published
Static accessibility linting for JSX/TSX and HTML as ESLint rules — WCAG 2.1 + Section 508 citations on every finding.
Maintainers
webabilityioReadme
@webability/eslint-plugin
Static accessibility linting for JSX/TSX and plain HTML, as ESLint rules. Every finding cites its WCAG 2.1 success criterion and the Section 508 reference — squiggles show up as you type in any editor with ESLint integration (VS Code, Cursor, WebStorm, Zed, Neovim, …), no dedicated extension required.
Powered by the same static analyzer as the WebAbility IDE linter: it
parses source text itself, so rules are conservative by design — dynamic
values (alt={someVar}) and JSX spreads ({...props}) are never flagged
as "definitely missing". We'd rather under-report than false-positive.
Install
npm i -D @webability/eslint-pluginUsage (flat config, ESLint 9)
// eslint.config.js
import webability from '@webability/eslint-plugin';
export default [
// ...your existing config,
webability.configs.recommended,
];Or enable rules individually:
import webability from '@webability/eslint-plugin';
export default [
{
plugins: { '@webability': webability },
rules: {
'@webability/img-alt': 'error',
'@webability/label-control': 'error',
},
},
];Legacy eslintrc (ESLint 8)
{ "extends": ["plugin:@webability/legacy-recommended"] }Linting .html files
The rules analyze raw source text, so they work on HTML too — you just
need a parser that lets ESLint accept .html files:
import webability from '@webability/eslint-plugin';
import htmlParser from '@html-eslint/parser';
export default [
webability.configs.recommended,
{
files: ['**/*.html'],
plugins: { '@webability': webability },
languageOptions: { parser: htmlParser },
rules: webability.configs.recommended.rules,
},
];Rules
| Rule | Checks | WCAG 2.1 SC |
|---|---|---|
| img-alt | <img> missing alt | 1.1.1 (A) |
| input-image-alt | <input type="image"> missing alt | 1.1.1 (A) |
| iframe-title | <iframe> missing/empty title | 4.1.2, 2.4.1 (A) |
| label-control | form control with no accessible name | 1.3.1, 4.1.2 (A) |
| empty-link | <a href> with no accessible text | 2.4.4, 4.1.2 (A) |
| empty-button | <button> with no accessible text | 4.1.2 (A) |
| invalid-aria-role | unrecognized role="..." | 4.1.2 (A) |
| redundant-role | role restating a native implicit role | 4.1.2 (best practice, warns) |
| positive-tabindex | tabindex > 0 | 2.4.3 (A) |
| html-lang | <html> missing/empty lang | 3.1.1 (A) |
| missing-title | document with no non-empty <title> | 2.4.2 (A) |
| duplicate-id | same id twice in one file | 4.1.1 (A) |
Checks that require a rendered page (color contrast, target size, focus order, overlap) are intentionally not approximated statically — those run in WebAbility's runtime scanner instead.