Astro Dev Toolbar App // CHROME BUILT-IN AI

astro-dev-audit-nano

Real-time WCAG 2.1 AA/AAA accessibility and SEO dev auditor powered by Gemini Nano.

View on GitHub ↗ Quickstart Spec ↓

01. Architectural Specifications STATUS: PRODUCTION READY

[ 01 // CAPABILITY ]

WCAG Remediation

Audits heading hierarchies, low-contrast text nodes, and missing image alt tags directly in your viewport.

[ 02 // CAPABILITY ]

Context-Aware Alt Text

Extracts surrounding DOM text (headings, captions, parent paragraphs) and drafts accurate alt descriptions.

[ 03 // CAPABILITY ]

Dev Toolbar Native

Hooks directly into Astro 5 Dev Toolbar with interactive shadow DOM badges and element highlighters.

02. Implementation & Usage BUN / ASTRO 5+

// Installation CLI

bun add astro-dev-audit-nano
# or
pnpm add astro-dev-audit-nano

// Configuration astro.config.mjs

// astro.config.mjs
import { defineConfig } from "astro/config";
import devAuditNano from "astro-dev-audit-nano";

export default defineConfig({
  integrations: [
    devAuditNano({
      contrastLevel: "AA",
      autoHighlightMissingAlt: true
    })
  ]
});

// Chrome Built-in AI Prerequisites

1. Open chrome://flags in Google Chrome 128+
2. Set #prompt-api-for-gemini-nano to Enabled
3. Set #optimization-guide-on-device-model to Enabled ByPassPerfRequirement
4. Restart Chrome and verify model status at chrome://components