应使用 data-change 属性控制趋势箭头显隐，后端注入带符号数值（如 "+2.3"），CSS 通过属性选择器渲染 ↑/↓，配合语义化 结构、分离 data-value/data-target/data-change 属性及 WCAG 合规配色。
用 data-change 控制增减箭头显隐，别靠 JS 算差值再拼 DOM
指标卡上常见的 ↑2.3% 或 ↓1.8%，本质是“当前值 vs 目标值/昨日值”的相对变化。很多人习惯在 JS 里取两个数相减、判断正负、再手动插入 ↑ 或 ↓ 标签——这会导致渲染延迟、无障碍支持断裂、且无法被 CSS 精确控制样式。
正确做法是后端直接注入 data-change 属性，值为带符号的数字（如 data-change="+2.3" 或 data-change="-1.8"），前端只做条件渲染：
-
data-change为空、null或非数字字符串时，不渲染箭头（符合 WCAG 隐式语义） - CSS 用
[data-change^="+"]::before和[data-change^="-"]::before分别定义上/下箭头，单位 % 与数值同级包裹在<dd></dd>内 - 避免用
float推动箭头位置；改用margin-inline-start: 4px配合 Flex 布局更稳
为什么 <dl></dl> 比一堆 <div class="card"> 更适合指标卡片
<p>你改一个指标的数值，就得同步改 class 名、<code>aria-label、焦点管理逻辑——维护成本指数级上升。而 <dl></dl> 是语义化定义列表，<dt></dt> 天然代表指标名（如“P95 延迟”），<dd></dd> 天然承载数值和状态，屏幕阅读器自动朗读为“P95 延迟，247 毫秒，上升 2.3%”。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 每个指标独立成一组
<dl></dl>，不共用容器，样式隔离干净 -
<dd></dd>内部结构固定：<span class="value">247</span><span class="unit">ms</span><span class="trend" aria-hidden="true">↑</span></li> <li>趋势文字（如“↑2.3%”）需同时放在 <code>aria-live
区域中，供视障用户感知更新
data-target 和 data-change 必须分离，别塞进一个 JSON 字符串
有人把所有指标元数据打包成 data-config='{"value":247,"target":300,"change":"+2.3"}'，前端还得 JSON.parse()——既增加 XSS 风险，又让调试变得困难：你没法用浏览器开发者工具一眼看出哪个值异常。
拆开为独立属性更轻、更安全、更可测：
-
data-value="247"—— 当前值（必填） -
data-target="300"—— 目标值（可选，缺省则不渲染目标线或达标徽标） -
data-change="+2.3"—— 变化率（可选，缺省则隐藏趋势箭头） -
data-timestamp="2026-10-27T21:45:00Z"—— 时间戳（用于判断数据新鲜度）
这样你在 Elements 面板里直接 hover 就能看到各字段值，连 console.log 都省了。
颜色仅用于传达状态，且深色背景上必须满足 WCAG AA 对比度
红色不等于“有问题”，绿色也不等于“安全”。真正起作用的是对比度和一致性。比如深灰背景（#1e1e1e）上用 #ff6b6b 显示下降，实测对比度仅 3.2:1，低于 WCAG AA 要求的 4.5:1，视障用户根本看不清。
推荐方案：
- 上升趋势：用
#4ecdc4（青绿，对比度 6.8:1） - 下降趋势：用
#ff6b6b改为#ff4757（更饱和的红，对比度 5.1:1） - 无变化：用中性灰
#a0a0a0，不加色感干扰 - 所有颜色必须通过 WebAIM 对比度检查器 验证
最常被忽略的一点：趋势箭头本身也要有足够对比度，不能只靠颜色区分方向——箭头形状（↑/↓）和位置（始终在数值右侧）才是主信号，颜色只是辅助强化。
