fitten code 可生成符合 wcag 2.1 aa 的可访问前端组件，需英文注释声明约束、ctrl+enter 触发，并通过 lighthouse 或手动检查 role、键盘导航、屏幕阅读器播报及颜色对比度验证。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要快速生成既功能完整又满足 WCAG 2.1 AA 级可访问性要求的前端组件，比如带语义化标签、键盘导航支持、正确 ARIA 属性和足够颜色对比度的按钮或表单——Fitten Code 能直接输出合规代码，但必须按特定方式触发和校验。
安装并启用 Fitten Code 插件
在 VS Code 扩展市场搜索 “Fitten Code”，点击安装，重启编辑器后右下角状态栏会出现 Fitten 图标。
若图标未出现，请检查是否已启用该扩展：打开命令面板（Ctrl+Shift+P），输入 “Extensions: Show Enabled Extensions”，确认 Fitten Code 已勾选启用。
用自然语言描述需求并添加可访问性约束
新建一个 .html 文件，在光标处输入英文注释，明确声明可访问性要求。例如：// Generate an accessible primary button with keyboard focus, screen reader label, and sufficient contrast。
这一步不能省略中文描述或模糊表达如“做个好用的按钮”——Fitten Code 的模型训练基于英文可访问性术语，【中文指令会导致生成的 aria-label 缺失或 role 值错误】。
按下 Ctrl+Enter 触发代码生成，等待右下角提示 “Fitten Code: Ready” 后，光标位置将插入完整 HTML 片段。
验证生成结果是否真正符合 Accessibility 标准
方法一：使用 Chrome DevTools 自动检测
对设计或页面进行 WCAG 2.1 AA 无障碍审计。触发关键词：“audit accessibility”、 “check a11y”、 “is this accessible?” 或在审查设计时使用。
在浏览器中打开生成的 HTML 页面 → 按 F12 打开开发者工具 → 切换到 Lighthouse 面板 → 勾选 “Accessibility” → 点击 “Generate report”。
方法二：手动检查三项关键项
① 查看元素是否含 role="button" 或原生 <button></button> 标签；非原生按钮必须有 tabindex="0" 和 onkeydown 处理 Space/Enter 键。
② 运行屏幕阅读器（如 NVDA 或 VoiceOver）朗读该控件，确认播报内容包含有意义的操作描述，而非仅 “button”。
③ 用浏览器插件 Color Contrast Analyzer 测量文本与背景色比值，确保 ≥ 4.5:1（普通文本）或 ≥ 3:1（大号文本）。
若任一检查失败，说明 Fitten Code 当前未正确理解你的约束条件，需返回第二步修改英文提示词，加入更具体的属性要求，例如追加 “use aria-label='Submit form' and ensure contrast ratio is at least 4.5”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
