应使用语义化的 + / 组合表达退款状态，每个阶段用 包裹，当前步骤的 添加 aria-current="step"，时间用 iso 8601 格式 datetime 属性并配合 tolocalestring() 渲染。
退款状态怎么用 HTML 表达才清晰可读
纯 HTML 本身不提供“进度状态”语义，<progress></progress> 标签只适合表示数值型进度（如 0%→100%），而退款流程通常是离散阶段（如“已申请→审核中→已打款”），硬套 <progress></progress> 反而误导用户。正确做法是用语义化标签组合表达状态 + 时间。
用 <dl></dl> + <dt></dt>/<dd></dd> 标注多阶段退款状态
这是最贴近真实业务场景的写法：每个状态是独立节点，可单独加 class 控制样式，也方便后续用 JS 动态更新某一项。时间戳和状态文本自然分组，无障碍阅读友好。
- 已申请
- 审核中
- 已打款
-
<time></time>的datetime属性必须用 ISO 8601 格式（含时区），否则屏幕阅读器可能读错时间 - 别用
<ol></ol>或<ul></ul>替代<dl></dl>—— 退款阶段不是“有序列表”，而是“状态定义列表” - 如果某个阶段尚未发生，不要留空
<dd></dd>，应省略整个<div class="status-item">，避免 DOM 膨胀 <h3>状态文本要不要加 <code>aria-current？要，但只加在当前进行中的那一个
<dt></dt>上。它能让辅助技术明确告诉用户“现在卡在这一步”。注意不是加在<dd></dd>或外层容器上。- 审核中
- 值必须是
"step"，不是"true"或"page" - 同一组里只能有一个
aria-current="step"，多了会破坏语义 - 服务端渲染时就该判断好哪一项是当前状态，不要依赖 JS 注入 —— 首屏加载时无障碍支持就失效了
时间戳显示本地时区还是服务器时区？
显示本地时区时间，但存储和传输必须用 UTC。前端用
toLocaleString()渲染，后端返回 ISO 字符串（如"2024-05-20T14:22:00Z"）即可。new Date("2024-05-20T14:22:00Z").toLocaleString(navigator.language, { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" })- 别手动拼接“年月日 时分”，不同地区格式差异大（如 en-US 是 “5/20/2024, 2:22 PM”）
- 如果后端返回的是无时区的时间字符串（如
"2024-05-20 14:22:00"），前端需明确补上时区，否则new Date()解析结果不可靠 - 用户切换系统语言或时区时，
toLocaleString()会自动适配，不用额外监听
<time></time>标签的datetime属性格式和aria-current的作用范围——这两处出错，对普通用户影响小，但会让依赖读屏软件的用户完全无法理解当前进度卡在哪一环。
