AccessGuard · Shopify 网站无障碍合规扫描 SaaS

技术信息

语言技术
postgres、Docker、Redis、React、TypeScript系统类型
Web行业分类
电商、企业服务

作品详情

行业场景

面向海外 Shopify 独立站商家的无障碍（ADA/WCAG）合规检测工具。美国近年针对电商网站的无障碍诉讼逐年攀升，中小商家普遍没有专职人员核查网站是否符合无障碍标准，一旦被起诉最低索赔可达数千美元，但市面工具要么夸大宣传"一键合规"、要么面向大型企业定价过高，中小商家缺少一款诚实、可负担的自助检测与持续监控工具。

功能介绍

支持输入任意 Shopify 店铺网址，一键扫描首页及全站多个页面，基于 axe-core 引擎按 WCAG 2.0/2.1/2.2 AA 标准检测颜色对比度、图片 alt 文本缺失、表单标签、键盘可达性等问题，生成带评分等级（A-F）和分级问题清单的检测报告；提供 AI 自动生成图片 alt 文本建议、无障碍声明页生成器、店铺分数变动持续监控与邮件预警、8 种语言的多语言报告展示；免费版限次扫描用于获客，付费 Pro/Premium 版解锁全站深度扫描与持续监控。

项目实现

Next.js / React 19 / TypeScript / Playwright / axe-core
独立完成产品从 0 到 1 的设计与开发。前端 Next.js 16 + React 19 + Tailwind + Framer Motion；扫描引擎是独立的 Node.js Worker（Playwright 常驻浏览器 + axe-core），通过内部 HTTP 与主应用通信，避免 Playwright 拖垮 Next 构建；实现并发信号量控制、空闲浏览器自动释放、robots.txt 合规检测等资源与法律合规优化；账号体系用 JWT + httpOnly Cookie，订阅付费对接 Creem（Merchant of Record 收款方案，个人可合规收取美元）；持续监控用定时调度器复用扫描逻辑，通过 Resend 发送分数下降告警邮件。难点在于 4 核 4G 低配服务器下需要兼顾扫描并发与内存占用，通过资源请求拦截、并发信号量、空闲浏览器回收三重手段解决。