OmniAccess AI — HTML Analyzer
Detect performance, accessibility, SEO, and best-practice issues in HTML files — with rich hover explanations and one-click quick fixes, directly inside VS Code.
Features
Live Squiggly Underlines
Issues are flagged as you type (debounced 600 ms). No manual scan needed.
- Red underline — Error severity (WCAG violation, critical Lighthouse failure)
- Yellow underline — Warning severity (optimization opportunity)
Hover any underlined element to see a full breakdown:
| Section |
What you see |
| What |
Plain-English description of the issue |
| Why this happens |
Root cause — browser behavior, spec rule, or audit logic |
| How to fix |
Ready-to-paste corrected HTML code block |
Quick Fixes (Lightbulb)
Place your cursor on an underline and press Ctrl+. (or click the lightbulb icon):
| Issue |
Quick Fix |
Missing loading="lazy" |
Inserts loading="lazy" on the <img> |
Unsafe target="_blank" |
Inserts rel="noopener noreferrer" |
Missing <meta charset> |
Inserts <meta charset="UTF-8"> after <head> |
| Missing viewport meta |
Inserts the full viewport meta tag |
<html> without lang |
Inserts lang="en" on the <html> tag |
| Render-blocking script |
Inserts defer attribute |
Image without alt |
Inserts alt="" (fill in your description) |
Issues Panel
Click $(list-unordered) OmniAccess in the status bar, or right-click any HTML file and choose OmniAccess: Show Issues Panel. Opens a collapsible side panel listing every issue with its full What / Why / Fix detail.
Status Bar
A persistent ⚡ OmniAccess item in the bottom-left status bar shows the extension is active and opens the issues panel on click.
What Gets Detected
| ID |
Issue |
Severity |
img-lazy |
Image missing loading="lazy" |
Warning |
img-dimensions |
Image missing explicit width & height (causes CLS) |
Error |
script-blocking |
<script src> in <head> without defer/async |
Error |
Accessibility (WCAG 2.1)
| ID |
Issue |
Severity |
html-lang |
<html> missing lang attribute (SC 3.1.1) |
Error |
img-alt |
Image missing alt text (SC 1.1.1) |
Error |
input-label |
Form input without <label> or aria-label (SC 1.3.1) |
Error |
SEO
| ID |
Issue |
Severity |
meta-description |
Missing <meta name="description"> |
Warning |
page-title |
Missing or empty <title> |
Error |
multiple-h1 |
More than one <h1> on the page |
Warning |
no-h1 |
No <h1> heading found |
Warning |
Best Practices
| ID |
Issue |
Severity |
no-viewport |
Missing <meta name="viewport"> |
Error |
no-charset |
Missing <meta charset> declaration |
Warning |
link-noopener |
target="_blank" link without rel="noopener noreferrer" |
Warning |
deprecated-font |
Deprecated <font> tag |
Warning |
deprecated-center |
Deprecated <center> tag |
Warning |
deprecated-marquee |
Deprecated <marquee> tag |
Error |
Installation
From .vsix (recommended for local use)
# Inside the vscode-extension/ folder:
npm install
npm run package
code --install-extension omniaccess-1.0.0.vsix
Then reload VS Code (Ctrl+Shift+P → Developer: Reload Window).
From VS Code Marketplace
(Coming soon — not yet published)
Settings
| Setting |
Default |
Description |
omniaccess.enableLiveAnalysis |
true |
Analyze as you type (600 ms debounce) |
omniaccess.severityLevel |
"all" |
"all" reports errors + warnings; "errors-only" hides warnings |
Configure via File → Preferences → Settings and search for OmniAccess.
Commands
| Command |
Description |
OmniAccess: Scan Current File |
Force re-scan the active HTML file |
OmniAccess: Show Issues Panel |
Open the full issues webview panel |
Access via Ctrl+Shift+P or by right-clicking an HTML file.
Security
See SECURITY.md for the full security guide, threat model, and hardening checklist.
TL;DR:
- The extension runs entirely offline — no data leaves your machine
- Diagnostic data is never stored, logged, or transmitted
- The webview panel uses
enableScripts: true — the HTML it renders is generated internally (never from user input)
- All webview output is HTML-escaped to prevent XSS
Works With
This VS Code extension shares the same issue knowledge base (ISSUES_DB) as the OmniAccess Chrome Extension, which scans live websites in the browser. Together they cover both the development-time workflow (VS Code) and the runtime inspection workflow (Chrome DevTools panel).
License
MIT — see LICENSE
