Fitten Code 自动生成无障碍前端代码指南

前端开发中，经常需要编写同时满足功能与WCAG 2.1 AA标准的组件——例如一个具备语义化标签、键盘导航支持、正确ARIA属性及高对比度的按钮或表单。Fitten Code可以直接生成合规代码，但前提是必须遵循特定的触发方式并完成结果验证。

安装与启用：完成Fitten Code环境配置

第一步，在VS Code扩展市场搜索“Fitten Code”，点击安装后重启编辑器。安装成功后，右下角状态栏会显示绿色Fitten图标。若图标未出现，打开命令面板（Ctrl+Shift+P），运行“Extensions: Show Enabled Extensions”，确保该扩展已启用。

用自然语言明确需求：注释约束是关键

新建一个.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片段。

验证：运行测试而非仅审查代码

生成的代码是否符合标准？必须实际测试。下面介绍两种验证方法。

**方法一：自动审查**

在浏览器中打开生成的HTML页面，按F12进入开发者工具，切换到Lighthouse面板，勾选“Accessibility”，点击“Generate report”，即可获得详细审计报告。

**方法二：手动检查三项核心**

① 检查元素是否包含role="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”。