Page tools
Page tools
Six tools that check and explain a page from inside the browser: Accessibility Copilot, a QA report with 15 WCAG checks, form review, design review, Ask page and voice commands. Run them on a practice area with real problems, or on this page.
1. A practice area with problems
Insert a small snippet with typical mistakes (a field without a label, an image without alt text, an icon button without a name, low-contrast text), then run each check on it.
Live demo
Nothing inserted yet. The checks below then run on an empty area.
"use client"
import { runQaAudit, auditToMarkdown, reviewForms, reviewDesign, createA11yCopilot } from "@yuktishaalaa/yuktai"
export function QaButton() {
function check() {
const root = document.querySelector("main") ?? document
const report = runQaAudit({ root }) // { score, passed, issues: [{ rule, wcag, message, fix }], summary }
const forms = reviewForms({ root }) // per form: fields, issues, suggestions
const design = reviewDesign({ root }) // { score, categories, findings, summary }
console.log(report.summary, auditToMarkdown(report))
const copilot = createA11yCopilot({ root })
copilot.scan()
copilot.applyAllFixes() // safe fixes only; copilot.undoAll() reverts them
}
return <button onClick={check}>Check this page</button>
}const root = document.querySelector("main")
const report = yuktai.runQaAudit({ root }) // or runQaAudit() for the whole page
console.log(report.score, report.summary)
console.log(yuktai.auditToMarkdown(report))
yuktai.reviewForms({ root })
yuktai.reviewDesign({ root, minFontSize: 16 })
const copilot = yuktai.createA11yCopilot({ root })
copilot.scan(); copilot.applyAllFixes(); copilot.undoAll()2. All six tools in one panel
This is the panel behind the 🛠 button, placed inline. It checks this whole page; the tools never audit their own UI, floating buttons included. Small targets pass when they have 24px of space around them (WCAG 2.5.8), and disabled controls are not checked for contrast (WCAG 1.4.3).
Live demo
Loading…
"use client"
import { AgenticPanel } from "@yuktishaalaa/yuktai"
export default function Tools() {
// tabs: copilot, qa, forms, design, ask, voice
return <AgenticPanel defaultTab="qa" voiceLang="te-IN" engine="rust" />
}
// or a floating 🛠 button on every page (5.3.11), in your client wrapper:
// <YuktAIWrapper showPageTools pageToolsTab="qa" voiceLang="te-IN">{children}</YuktAIWrapper><div id="tools"></div>
<script>
yuktai.mountAgenticPanel("#tools", { defaultTab: "qa", voiceLang: "te-IN", engine: "rust" })
</script>
<!-- or a floating 🛠 button on every page -->
<script>window.YUKTAI_CONFIG = { showPageTools: true, defaultTab: "qa" }</script>3. Voice commands
Type a command the way you would say it. In the panel's Voice tab the same commands work with the microphone (Chrome and Edge).
Live demo
import { parseVoiceA11yCommand, createVoiceA11yController } from "@yuktishaalaa/yuktai"
parseVoiceA11yCommand("make text bigger", { fontSizeMultiplier: 1 })
// → the setting to change and a confirmation message, or nullyuktai.parseVoiceA11yCommand("high contrast on")
yuktai.parseVoiceA11yCommand("పెద్ద అక్షరాలు", { fontSizeMultiplier: 1 })Every QA check
Read live from AUDIT_RULES in the YuktAI version this site runs.
Loading…