zhangxiang
09ff3e026b
新增可复用的全站 dogfood 审计工具链（Playwright，31 路由约 2 分钟跑完）： - scripts/audit/ui-audit.mjs —— 主审计器。9 维自动化探针：对比度（WCAG 相对亮度 + alpha 合成 + 大文本 3:1 / 小文本 4.5:1）、横向溢出、触控目标 （WCAG 2.2 AA 2.5.8 24x24）、img alt、标题层级、form label、文本截断、 颜色频次（品牌红覆盖）、性能（LCP + CLS）。支持多视口采集与 P1/P2/P3 自动分级。 - scripts/audit/audit-fullpage.mjs —— 核心页 fullPage 长图（首屏看不全叙事结构） - scripts/audit/verify-tabbar.mjs —— 移动端 Tab bar 遮挡修复验证 - scripts/audit/contact-diag.mjs —— 单页诊断（console/pageerror/requestfailed 捕获） 防刷绿机制：对比度探针命中 aria-hidden 祖先时跳过，但累计 decorativeSkipped 让豁免量可见；触控探针把 aria-hidden 内的可聚焦元素计入 ariaHiddenFocusable 单独上报，不静默跳过。 已知盲区（需在报告中人工补判）：effectiveBg 遇到渐变或图片背景返回 unknown 并跳过整节点 —— 详情页 hero 的装饰数字因此从未被自动报出。 .gitignore 增加 dogfood-ui-audit/（采集产物单轮可达 39MB，只提交脚本与报告）。 Refs: UI_UX_UE_AUDIT_2026-09-01.md
381 lines
21 KiB
Markdown
381 lines
21 KiB
Markdown
# Dogfood UI/UX/UE 审计 · 2026-09-01
|
||
|
||
> 本报告由 Playwright + agent-browser dogfood 采集 + 静态扫描 + 视觉审图自动产出，覆盖 31 个公开路由。
|
||
> 审计目标：UI（视觉/令牌一致性）+ UX（信息架构/叙事模型/转化路径）+ UE（交互/可达性/性能/反馈）合规度。
|
||
|
||
---
|
||
|
||
## 0. 结论先行
|
||
|
||
| 维度 | 评估 | 关键证据 |
|
||
|---|:---:|---|
|
||
| 设计语言统一度 | **B** | 字体/动效/缓动 ✅；书法字例外 1 处（/about/brand） |
|
||
| 品牌红触达点 | **A** | 30/31 路由 ≥3 处；仅 /privacy 违规（2 处） |
|
||
| 品牌红使用克制 | **A** | 全部 token 化、无大面积滥用 |
|
||
| 可访问性 WCAG AA | **C** | 29 页页脚 `text-gray-500` 4:1（需 4.5）；1 页大号装饰数字 1.47:1 |
|
||
| 移动端触控目标 | **C** | 29/31 页页脚链接 18px 高 <24px；首页 CTA 23px |
|
||
| **四层叙事完整性** | **D** | **6 个详情页 Layer 3 信任层（案例/证言/认证/伙伴）全部 = 0** |
|
||
| Hero 视觉差异化 | **C** | 所有详情页 Hero 纯文本、无视觉（违反 Hero 变化策略） |
|
||
| 交互 / 性能 / 稳定性 | **B** | 无 console error；CLS/LCP 全站正常 |
|
||
| 视觉留白与节奏 | **C** | 详情页 Hero 后大空白 200px+；视觉节奏单调 |
|
||
| 移动端底部固定 Tab bar | **C** | 遮挡正文（"联系我们"被截） |
|
||
|
||
**总体评级：C+ （功能/性能合格，叙事模型与可访问性明显欠债）**
|
||
|
||
---
|
||
|
||
## 1. 审计范围与方法
|
||
|
||
### 1.1 范围
|
||
- 31 个公开路由（marketing 组 + privacy/terms + 16 个动态详情页）
|
||
- admin 组（共 9 个页面）需登录态，**不在本次审计范围**
|
||
- 视口：desktop 1440×900 + mobile 390×844 + tablet 768×1024（仅核心页）
|
||
- 单次首屏截图 90 张（31×desktop + 31×mobile + tier1×tablet + 核心 fullPage 10 张）
|
||
|
||
### 1.2 方法
|
||
- **Playwright（headless chromium）自动化采集**
|
||
- 9 维度探针：对比度 / 横向溢出 / 触控目标 / alt / 标题层级 / label / 文本截断 / 颜色频次 / 性能 LCP+CLS
|
||
- 动态探针：console error / 网络失败 / Tab 焦点可见性
|
||
- **agent-browser 交互态深挖**（聚焦 /contact / 导航 / 表单；agent-browser reload 命令有 bug，已切回 Playwright）
|
||
- **静态扫描**：globals.css 设计令牌 / 颜色硬编码 / framer-motion spring 残留 / shadow-* 使用
|
||
- **视觉审图**：6 张首屏 + 2 张 fullPage（首页 + contact fullPage）人工审查
|
||
|
||
### 1.3 输出
|
||
- `dogfood-ui-audit/2026-09-01T07-07-49/`
|
||
- `probes.json` —— 31 路由 × 3 视口全量数据
|
||
- `summary.md` —— 自动分级汇总
|
||
- `screenshots/desktop|mobile|fullpage/` —— 视觉证据
|
||
- 采集脚本：`scripts/audit/ui-audit.mjs`（主）+ `audit-fullpage.mjs`（fullPage 补截）
|
||
|
||
---
|
||
|
||
## 2. P1（必须修复 · 系统性 / 阻断性）
|
||
|
||
### P1-1 ⛔ Layer 3 信任证明层 100% 缺失
|
||
**影响面**：6 个核心详情页 × 4 个 Layer 3 子项 = 24/24 完全为 0
|
||
**详情**：
|
||
|
||
| 路由 | 案例 | 证言 | 认证 | 伙伴 |
|
||
|---|:---:|:---:|:---:|:---:|
|
||
| /products/erp | 0 | 0 | 0 | 0 |
|
||
| /products/bi | 0 | 0 | 0 | 0 |
|
||
| /products/crm | 0 | 0 | 0 | 0 |
|
||
| /solutions/finance | 0 | 0 | 0 | 0 |
|
||
| /solutions/healthcare | 0 | 0 | 0 | 0 |
|
||
| /services/consulting | 0 | 0 | 0 | 0 |
|
||
|
||
**根因**：CONTEXT.md 已明确记录 "Layer 3 信任证明：全新层，现有页面完全缺失"。这是**设计债而非 bug**，但未启动建立。
|
||
**修复路径**（建议）：
|
||
1. **/cases 列表页与详情页打通**—— 当前 /cases 没有详情链接（详见 P3-2）
|
||
2. 详情页增加 "客户案例" Section（logo 墙 + 1-2 段客户故事）
|
||
3. 增加 "客户证言" 区块（头像 + 公司 + 职位 + 引言）
|
||
4. 增加 "资质认证" 区块（ISO/等保/合规徽标）
|
||
**优先级**：**P0**（设计 DNA 的核心叙事层，整个转化链路的最短板）
|
||
|
||
### P1-2 ⛔ 页脚 `text-hint` 对比度 4:1（需 4.5）—— 29 页
|
||
**影响面**：全站统一页脚分隔符 `|`，29/31 路由受影响
|
||
**证据**：
|
||
```
|
||
[29 页 / 29 处] rgb(107, 114, 128) ON rgb(10, 14, 20) | ratio=4.0 | need=4.5
|
||
span.hidden.sm:inline :: "|" (14.625px/400)
|
||
```
|
||
**根因**：页脚 `src/components/layout/footer.tsx:166` 直接写死 `text-gray-500`（Tailwind 内置色 `#6B7280`），**未走设计令牌** `text-hint`（#7C8CA5）。globals.css 同时定义了 `--color-text-hint: #7C8CA5`（line 83）和 `#94A3B8`（line 415），但页脚没用。
|
||
**修复**：将 `text-gray-500` → `text-text-hint`（统一使用 `--color-text-hint`），并在 hover/focus 提深一档（如 `--color-text-secondary`）以确保 4.5:1。文件改动 1 处，全站生效。
|
||
**验证**：跑 `npm run check:contrast` 应全部通过。
|
||
**优先级**：P1（已知遗留，IMPECCABLE_AUDIT.md 6/20→14/20→17/20 评分轮次中"剩 text-hint"被点名未修）
|
||
|
||
### P1-3 ⛔ /about "服务编号" 大号数字对比度 1.47:1
|
||
**证据**：
|
||
```
|
||
[1 页 / 6 处] rgba(100, 116, 139, 0.3) ON rgb(255, 255, 255) | need=3 | ratio=1.47
|
||
div.text-4xl.md:text-5xl :: "01" (63px/900)
|
||
div.text-4xl.md:text-5xl :: "02" (63px/900)
|
||
div.text-4xl.md:text-5xl :: "03" (63px/900)
|
||
```
|
||
**影响**：WCAG 大文本阈值 3:1，实际 1.47:1 —— 几乎不可见。
|
||
**判定**：服务编号（Service Number 设计语言）的"大号浅色水印"风格，**设计意图是大背景装饰数字**，但数字属可见元素（非纯装饰），不能跳过对比度规则。
|
||
**修复选项**（任选一）：
|
||
1. 加 `aria-hidden="true"` + CSS `opacity: 0.5`（明确纯装饰属性，跳过 WCAG 文本检查）
|
||
2. 提高 rgba alpha 到 0.5+（约 3:1）
|
||
3. 改为 `text-text-hint`（#7C8CA5）作为视觉弱化，但对比度 5.8:1 反而**过高**—— 需要找到既弱化又合规的色值（如 #BCC3CE alpha=0.6 → 约 3.1:1）
|
||
**优先级**：P1（设计意图可保留，但需正式标记或调色）
|
||
|
||
### P1-4 ⛔ /methodology "服务编号" 装饰数字对比度 1.13:1
|
||
**证据**：
|
||
```
|
||
[1 页 / 16 处] rgba(100, 116, 139, 0.1) ON rgb(255, 255, 255) | need=3 | ratio=1.13
|
||
span.text-4xl.font-bold :: "01" (45px/700)
|
||
```
|
||
**影响**：更夸张，几乎完全不可见 —— alpha=0.1 意味着 10% 不透明度，是水印。
|
||
**修复**：同 P1-3，建议走 aria-hidden + opacity 0.3 路线。
|
||
**关联**：4 处 /team 页相同问题（4 处 `text-[11px]` eyebrow + "正式成立"/"研发启航" 等小字）。
|
||
|
||
---
|
||
|
||
## 3. P2（重要修复）
|
||
|
||
### P2-1 移动端触控目标 < 24px —— 29/31 页
|
||
**根因聚类**（29 页统一模式）：
|
||
```
|
||
[29 页 / 145 处] 56x18 | a 例: "贸易零售","教育培训","医疗健康"...
|
||
[29 页 / 29 处] 86x18 | a 例: "ERP 管理系统"
|
||
[29 页 / 29 处] 91x18 | a 例: "CRM 客户管理"
|
||
[29 页 / 29 处] 73x18 | a 例: "BI 数据平台"
|
||
[29 页 / 29 处] 90x18 | a 例: "CMS 内容平台"
|
||
[29 页 / 29 处] 101x18 | a 例: "SDS 供应链决策"
|
||
[29 页 / 29 处] 79x18 | a 例: "OA 协同办公"
|
||
[29 页 / 29 处] 84x18 | a 例: "睿视 NovaVis"
|
||
[29 页 / 29 处] 42x18 | a 例: "制造业"
|
||
```
|
||
**根因**：**Footer 链接行高不足 18px**（页脚 `src/components/layout/footer.tsx` 链接文本容器 `py-1.5` → 18px = 1.5 × 12px row + 14px text）。
|
||
**WCAG 2.2 AA 2.5.8**：最小 24×24 CSS px，**或** 间距豁免（与相邻目标间距使 24px 圆不重叠）。
|
||
**修复选项**：
|
||
1. 提页脚链接 `py-2.5` (20px) → 不够 24px。建议 `py-3` 或 `min-h-[28px]`
|
||
2. 检查间距豁免条件（页脚是垂直列表，行距 > 6px 可豁免）—— 当前垂直间距通常 ≥4px，**可能豁免**。需人工评估
|
||
3. **首选**：在链接容器设 `min-h-[24px]` + `inline-flex items-center`
|
||
**优先级**：P2（WCAG 2.2，间距豁免可能成立，但若间距不足则违规）
|
||
|
||
### P2-2 移动端首页底部 Tab bar 遮挡内容
|
||
**证据**：mobile 首屏截图，`联系我们` 被截断显示为"联系"。
|
||
**根因**：固定底部 Tab bar 高度约 64px，但页面 main 容器未加 `pb-16` / `pb-[64px]`。
|
||
**影响**：所有 mobile 页面底部内容都会被遮挡，不仅是首页。
|
||
**修复**：Footer 全局加底部安全区适配，或 Tab bar 组件本身在页面 main 上加 `padding-bottom: 64px`。
|
||
**优先级**：P1（影响所有 mobile 用户，视觉完整性问题）
|
||
|
||
### P2-3 详情页 Hero 大量空白（200px+）
|
||
**影响页面**：/about /products/erp /products/bi /products/crm /products/oa /products/cms /products/sds /solutions/* /services/* /methodology /contact 全员
|
||
**证据**：见各页首屏截图，Hero 顶部 ~200px 空白（视口起始到 eyebrow 之间）。
|
||
**根因**：Hero 组件固定 `min-h-screen` 或 `py-32` padding，未根据内容自适应。
|
||
**修复**：
|
||
1. 桌面端 Hero padding 收敛（`pt-24 md:pt-28` 而非 `pt-32`）
|
||
2. 或允许 Hero 高度按视口比例（`min-h-[calc(100vh-200px)]`）
|
||
3. **首选**：填充内容（呼应 P1-1 Layer 3 —— 详情页可加 hero 区装饰）
|
||
**优先级**：P2（视觉节奏问题，影响"高级感"）
|
||
|
||
### P2-4 详情页 Hero 缺乏视觉差异化（Hero 变化策略违反）
|
||
**证据**：所有详情页 Hero 均为纯文本（左对齐 + eyebrow + 标题 + 副文 + CTA），无图、无装饰、无动效背景。
|
||
**CONTEXT.md 约束**："色调+背景纹理+布局微调" 三类变化允许；当前零差异化。
|
||
**影响**：详情页之间同质化严重，削弱 HSI 架构（Hub-Spoke-Independent）的 Spoke 与 Independent 区分度。
|
||
**修复**：为每个 Spoke/Independent 详情页实现 Hero 视觉变体（如 ERP 几何网格 / CRM 数据流 / 安全产品盾牌纹样等语义化背景）。
|
||
**优先级**：P2（设计 DNA 层级，渐进式推进）
|
||
|
||
### P2-5 /about/brand 字体语言不一致（书法字）
|
||
**证据**：`睿新致远` 使用书法字体（毛笔字），其他所有页面均为统一的黑体（思源黑体变体）。
|
||
**判定**：设计意图？还是回归 bug？
|
||
- 若**有意**——需要正式确认（CONTEXT.md 当前未提及书法字），并在设计文档中明确
|
||
- 若**无意**——替换为与全站统一的字体
|
||
**影响**：跨页面字体语言断裂；移动端尤为突兀（书法字在小尺寸可读性下降）。
|
||
**优先级**：P2（需张翔决策——保留还是回滚）
|
||
|
||
### P2-6 /privacy 品牌红触达点仅 2 处（违反 ≥3 处约束）
|
||
**证据**：`brandCount = 2`（仅 `rgb(196, 30, 58)` 1 个变体）
|
||
**其他 30 路由均 ≥4 处**。
|
||
**修复**：在 /privacy 页面加 1 处品牌红触达点（建议：Section eyebrow 或结尾 CTA）。
|
||
**优先级**：P2（硬约束违反，但只 1 页）
|
||
|
||
---
|
||
|
||
## 4. P3（体验优化）
|
||
|
||
### P3-1 /cases 列表页缺失详情路由
|
||
**根因**：`scripts/audit/ui-audit.mjs` 从 /cases 抓链接 0 条（列表页可能是客户端渲染，curl 抓不到）。
|
||
**手动确认**：/cases 页面是否真有可点击的详情链接？若无—— /cases 详情页路由 `/cases/[slug]` 在静态审计中未发现真实数据。
|
||
**影响**：Layer 3 信任层（案例）的依赖项阻塞。
|
||
**优先级**：P0（与 P1-1 联动）
|
||
|
||
### P3-2 /privacy 与 /terms 缺少 h1 验证
|
||
**证据**：自动探针发现 /privacy 无 h1。
|
||
**影响**：SEO + 可访问性。
|
||
**优先级**：P3
|
||
|
||
### P3-3 表格焦点无可见指示（2 页）
|
||
**证据**：`/about` 与 `/contact` Tab 焦点元素 `outline: none` 且无 box-shadow 替代。
|
||
**修复**：增加 `focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2`。
|
||
**优先级**：P3（键盘可达性）
|
||
|
||
### P3-4 数据大字报单页品牌红元素过多
|
||
**证据**：`/about/brand` 用 4 个品牌红数据（2026 / 10+ / 6 / 100%），`/team` 用 3 个（2026 / 10+ / 6）。
|
||
**CONTEXT.md 约束**："数据高亮（≤2 个/页）"—— 这是软约束，但当前突破。
|
||
**建议**：保留 ≤2 个品牌红数据高亮，其余用次级色。
|
||
**优先级**：P3
|
||
|
||
### P3-5 视觉审查观察：装饰元素与标题文字重叠
|
||
**证据**：首页 mobile Hero 标题"驱"字右上角有红色装饰点压在文字边缘（红点是 Hero 背景"星座图"的一部分）。
|
||
**影响**：轻微 —— 装饰与文字重叠在"软化设计"语境下可接受，但需确认无更多文字被装饰挤压。
|
||
**优先级**：P3
|
||
|
||
### P3-6 `/products/oa` 触控目标违规数 +1（14 vs 13）
|
||
**证据**：其他产品详情页统一 13 处，唯独 oa 多 1 处。
|
||
**修复**：定位 OA 页独有的 1 处 <24px 元素，可能是某个 spec 卡片或步骤列表项。
|
||
**优先级**：P3
|
||
|
||
---
|
||
|
||
## 5. 静态扫描补充
|
||
|
||
| 检查 | 结果 | 说明 |
|
||
|---|---|---|
|
||
| spring 残留 | ✅ 0 | `grep type:'spring'` = 0，IMPeccable 评分项保持 |
|
||
| ease-ink 缓动 | ✅ 已定义 | `--ease-ink: cubic-bezier(0.22, 1, 0.36, 1)` |
|
||
| 阴影系统 | ⚠️ 1 异常 | `solution-service-card.tsx:128` 使用 `shadow-blue-500/20`，**非设计令牌**。应迁到 `shadow-brand-hover` 或新设计令牌 |
|
||
| 颜色硬编码 | ⚠️ 1 处 | `footer.tsx:166` `text-gray-500`（与 P1-2 同源） |
|
||
| `text-[11px]` 极小字号 | ⚠️ 1 页 | /team "正式成立"/"研发启航" eyebrow 11px——过小不易识别，建议 ≥12px |
|
||
|
||
---
|
||
|
||
## 6. 修复优先级矩阵（建议）
|
||
|
||
| 优先级 | 项 | 工作量 | 决策依赖 |
|
||
|:---:|---|:---:|---|
|
||
| P0 | P1-1 Layer 3 信任层 + P3-1 /cases 详情 | L (大型) | 内容策划 + CMS 字段 |
|
||
| P0 | P1-2 页脚 text-hint → token | XS (1 文件) | 无 |
|
||
| P1 | P1-3 / P1-4 大号装饰数字 aria-hidden | XS | 张翔决策（保留/调色） |
|
||
| P1 | P2-2 移动端 Tab bar 遮挡 | XS | 无 |
|
||
| P2 | P2-1 移动端触控目标 | S | 张翔决策（间距豁免判定） |
|
||
| P2 | P2-3 Hero 空白 | S | 无 |
|
||
| P2 | P2-5 书法字决策 | XS | 张翔决策 |
|
||
| P2 | P2-4 Hero 视觉差异化 | L | 设计 + 实现（按产品逐个） |
|
||
| P2 | P2-6 /privacy 品牌红补齐 | XS | 无 |
|
||
| P3 | P3-2 /privacy h1 | XS | 无 |
|
||
| P3 | P3-3 焦点可见 | XS | 无 |
|
||
| P3 | P3-4 品牌红数据高亮 ≤2 | XS | 无 |
|
||
| P3 | P3-5 装饰与文字重叠 | XS | 无 |
|
||
| P3 | P3-6 /products/oa 唯一 1 处 | XS | 无 |
|
||
| P3 | shadow-blue-500 → token | XS | 无 |
|
||
|
||
**SLA 建议**：
|
||
- P0（4 项）应在 Phase 2 首批闭环
|
||
- P1（3 项）同批推进
|
||
- P2（4 项）按张翔决策后分批
|
||
- P3 顺带处理
|
||
|
||
---
|
||
|
||
## 7. 证据清单（可复核）
|
||
|
||
```
|
||
dogfood-ui-audit/2026-09-01T07-07-49/
|
||
├── probes.json # 31 路由 × 3 视口全量探针数据
|
||
├── summary.md # 自动分级汇总
|
||
└── screenshots/
|
||
├── desktop/ 31 张首屏（home/about/about-brand/cases/contact/methodology/products/team/products-erp...）
|
||
├── mobile/ 31 张首屏
|
||
├── tablet/ 8 张首屏（核心页）
|
||
└── fullpage/ 10 张长图（home/products/products-erp/solutions-finance/services-consulting/about/contact × 2 视口）
|
||
```
|
||
|
||
复跑命令：
|
||
```bash
|
||
node scripts/audit/ui-audit.mjs # 全站
|
||
node scripts/audit/audit-fullpage.mjs # 核心页 fullPage
|
||
```
|
||
|
||
---
|
||
|
||
## 8. 已知遗留 & 与 IMPECCABLE_AUDIT 对齐
|
||
|
||
| 项 | IMPECCABLE 轮次 | 本次 | 状态 |
|
||
|---|---|---|---|
|
||
| text-hint 对比度 | 6/20 → 14/20 → 17/20 仍"剩 text-hint" | **P1-2 仍未修** | 1 行 CSS 可解，建议本批闭环 |
|
||
| 字体加载 | 已修 | 本次未复查 | — |
|
||
| 渐变文字 / 弹性 / 特效库 | 全部 0 | 确认 | ✅ |
|
||
| 阴影系统 | 文档已定义 | 1 处 `shadow-blue-500` 不在令牌系统 | 新发现 |
|
||
|
||
---
|
||
|
||
## 9. 不在本次范围
|
||
|
||
- admin 模块（9 个页面）—— 需登录态，建议下一轮单独审计
|
||
- API Routes / 路由处理函数 —— 性能 + 安全审计
|
||
- 浏览器兼容性（Firefox / WebKit / Safari）—— e2e 已有基线（`test:visual:browsers`）
|
||
- Lighthouse / Core Web Vitals 整体 —— 已纳入 CI，本次只采样 CLS/LCP
|
||
|
||
---
|
||
|
||
---
|
||
|
||
## 10. 修复记录（2026-09-01 同日闭环）
|
||
|
||
### 10.1 Phase 1 —— 4 文件 5 处
|
||
|
||
| # | 文件 | 改动 | 对应项 |
|
||
|---|---|---|---|
|
||
| 1 | `src/components/layout/footer.tsx:149` | `text-gray-500` → `text-text-hint`（走令牌，消除硬编码） | P1-2 |
|
||
| 2 | `src/app/globals.css:1280-1294` | 移动端 `main` / `[role="main"]` / `footer` 增加 64px + `env(safe-area-inset-bottom)` 安全区 | P2-2 / P1-4 |
|
||
| 3 | `src/app/(marketing)/products/product-detail-content-v3.tsx:420` | ERP 专题链接加 `py-0.5`（23px → 27px） | P3-6（已修正归因为 `/products/erp` 非 `/products/oa`） |
|
||
| 4 | `src/components/detail/solution-service-card.tsx:128` | `shadow-blue-500/20` → `shadow-brand`（纳入令牌系统） | §5 静态扫描 |
|
||
| 5 | 同上 CSS 块 | nav/header/footer 交互元素 mobile `min-height/width: 44px` | P2-1 部分 |
|
||
|
||
**关键坑**：marketing layout 使用 `<div role="main">` 而非真 `<main>` 元素，首版 CSS 只写 `main {}` 不命中 —— 表现为 CSS chunk 已含新规则但截图 MD5 完全一致。选择器必须写 `main, [role="main"]`。且只补 `main` 不够，`footer` 在 main 之外同样被 64px Tab bar 截断。
|
||
|
||
### 10.2 Phase 2 —— 5 文件 8 处（残存 P1 清零）
|
||
|
||
用户决策：装饰数字走 `aria-hidden`；页脚触控认定 WCAG 2.5.8 间距豁免不改；`/about/brand` 书法字保留。
|
||
|
||
**执行时对决策做了必要拆分** —— 残存 3 处 P1 不全是装饰元素：
|
||
|
||
| 类别 | 位置 | 处理 | 理由 |
|
||
|---|---|---|---|
|
||
| A 装饰 | `about-content-v4.tsx:212`（01/02/03） | `aria-hidden="true"` | 与右侧 `value.title` 并列，无独立语义 |
|
||
| A 装饰 | `team-content-v3.tsx:82`（01-05）、`:115`（01-03） | `aria-hidden="true"` | 同上，1.13:1 |
|
||
| A 装饰 | `product-detail-content-v3.tsx:288`、`solution-detail-content-v3.tsx:378` | `aria-hidden="true"` | 客户名首字占位图形；探针盲区（渐变背景被跳过），同类问题一并修 |
|
||
| B 语义 | `brand-content.tsx:129`、`team-content-v3.tsx:206` | `text-text-secondary/70` → `/80` | **真实副文案，不可 aria-hidden**；4.35:1 → 5.74:1，视觉几乎无变化 |
|
||
| B 语义 | `brand-content.tsx:271` | `text-text-muted` → `text-text-secondary` | 「正式成立/研发启航」标签在 `bg-tertiary #F1F5F9` 上 4.34:1 → 9.45:1 |
|
||
|
||
> **对决策的纠正**：B 类若按「一律 aria-hidden」处理，会把公司简介与里程碑年份从屏幕阅读器中删除 —— 用可访问性缺陷替换对比度缺陷。已按语义拆分处理。
|
||
|
||
### 10.3 探针同步改造（否则证据无法闭环）
|
||
|
||
`ui-audit.mjs` 原本不识别 `aria-hidden`，改完页面数字不会下降。已增加：
|
||
|
||
- 对比度检测：命中 `[aria-hidden="true"]` 祖先则跳过，并累计 `decorativeSkipped` **让豁免量可见**（防止用 aria-hidden 刷绿）
|
||
- 触控检测：命中 `aria-hidden` 的可聚焦元素计入 `ariaHiddenFocusable` 单独上报，**不静默跳过**（隐藏内容不应可聚焦，属 ARIA 误用）
|
||
|
||
### 10.4 验证数据
|
||
|
||
| 指标 | 修复前基线 | Phase 1 后 | Phase 2 后 |
|
||
|---|---:|---:|---:|
|
||
| P1 | 29 | 3 | **0** |
|
||
| P2 | 34 | 34 | 34 |
|
||
| P3 | 0 | 0 | 0 |
|
||
| 有对比度违规的页面 | 29 | 3 | **0** |
|
||
| 触控目标违规总数 | 441 | 441 | 441（用户决策：认定豁免，不改） |
|
||
|
||
豁免核对（证明未刷绿）：`/about` decorativeSkipped=3、`/team` =8（5+3）、`/about/brand` =0；三页 `ariaHiddenFocusable` 全为 0。
|
||
|
||
门禁：`type-check` 0 error · `check:contrast` 7/7 ✅ · `eslint`（5 个受影响文件）0 error · 全站 31 路由复跑 0 P1。
|
||
|
||
产物：`dogfood-ui-audit/2026-09-01T07-59-30/`（终态）、`2026-09-01T07-34-54/`（Phase 1）。
|
||
|
||
---
|
||
|
||
## 11. P0-1 Layer 3 定位修正（重要）
|
||
|
||
审计把「Layer 3 信任层 100% 缺失」列为 P0。用户选定其为下一步后做了数据源勘察，**结论需要修正**：
|
||
|
||
| Layer 3 子项 | 数据源 | 现状 |
|
||
|---|---|---|
|
||
| 客户案例 | `prisma/seeds/case-studies.ts` | **空数组**，注释：「公司成立于 2026-01-15，处于首批客户共创阶段，暂无对外可验证的客户案例，因此保持为空数组。待真实案例获得客户授权后再补充。」 |
|
||
| 客户证言 | `src/lib/constants/` | 无任何 testimonial 数据文件 |
|
||
| 资质认证 | 同上 | 无任何 certification 数据文件 |
|
||
| 合作伙伴 | 同上 | 无任何 partner 数据文件 |
|
||
|
||
**即 Layer 3 不是「忘了做」，而是刻意留空以避免编造未授权的客户案例**（公司成立仅 7 个月）。这符合 `AGENTS.md` 的「零编造」原则，但意味着：
|
||
|
||
- 案例 / 证言 **不可由 AI 生成** —— 虚构客户案例属商业诚信风险
|
||
- 该层只有拿到真实内容授权后才能建立
|
||
|
||
**零编造前提下可推进的替代信任信号**（不虚构事实）：
|
||
|
||
1. **方法论透明度** —— `/methodology` 已有真实内容，在详情页交叉引用「我们怎么做」
|
||
2. **团队资历** —— `/team` 有真实 strengths/culture 数据，复用为「谁来做」
|
||
3. **成立与里程碑透明** —— `/about/brand` 有真实里程碑，可作为「坦诚的早期公司」叙事
|
||
4. **服务承诺 / 交付标准** —— 需业务确认，属可设计项（不虚构已发生的事实）
|
||
|
||
建议：把 P0-1 从「填充案例」改为「建立 Layer 3 骨架 + 接入上述 4 类真实信号」，案例/证言位留占位待授权后填充。
|
||
|
||
---
|
||
|
||
**报告生成时间**：2026-09-01
|
||
**审计脚本**：`scripts/audit/ui-audit.mjs`、`scripts/audit/audit-fullpage.mjs`
|
||
**审计员**：dogfood (Playwright + agent-browser) |