Accessibility checks while you write code. The same engine as the pour browser extension, inside your editor.
What it does
Checks your markup against WCAG 2.2 as you type.
Puts each problem on the tag that caused it. Hover it, or open the Problems panel, to see what is wrong and how to fix it.
Shows how serious each problem is with the pour mark next to the line number: red is critical, yellow is serious, then moderate and minor, and blue means "have a look".
Works with
HTML files
React (.jsx, .tsx)
Vue (.vue)
Svelte (.svelte)
Angular templates (.component.html)
What it checks
Things it can see in the code: missing alt text, inputs without labels, buttons and links with no name, wrong ARIA, broken lists and tables, heading order, page title and language, and more. Run "pour: what pour checks" for the full list.
What it cannot check
Anything that needs the page on screen: colour contrast, tap target size, focus, motion. For those, run pour in your browser on the real page.
Anything a script builds. Scripts do not run here.
In React, Vue, Svelte and Angular files, values that come from code, like alt={name}. Those elements are skipped, and the status bar tells you how many.
Settings
Best practices: also check heading order, landmarks and redundant ARIA. Off by default.
Check while typing: on by default.
Read linked CSS: skips elements the CSS hides. Nothing is fetched from the internet.
