应使用语义化的 <dl> + <dt>/<dd> 组合表达退款状态，每个阶段用 <div class="status-item"> 包裹，当前步骤的 <dt> 添加 aria-current="step"，时间用 ISO 8601 格式 datetime 属性并配合 toLocaleString() 渲染。
退款状态怎么用 HTML 表达才清晰可读
纯 HTML 本身不提供“进度状态”语义，<progress> 标签只适合表示数值型进度（如 0%→100%），而退款流程通常是离散阶段（如“已申请→审核中→已打款”），硬套 <progress> 反而误导用户。正确做法是用语义化标签组合表达状态 + 时间。
用 <dl> + <dt>/<dd> 标注多阶段退款状态
这是最贴近真实业务场景的写法：每个状态是独立节点，可单独加 class 控制样式，也方便后续用 JS 动态更新某一项。时间戳和状态文本自然分组，无障碍阅读友好。
<dl class="refund-status">
<div class="status-item">
<dt>已申请</dt>
<dd><time datetime="2024-05-20T14:22:00Z">2024-05-20 14:22</time></dd>
</div>
<div class="status-item">
<dt>审核中</dt>
<dd><time datetime="2024-05-21T09:05:00Z">2024-05-21 09:05</time></dd>
</div>
<div class="status-item">
<dt>已打款</dt>
<dd><time datetime="2024-05-22T16:40:00Z">2024-05-22 16:40</time></dd>
</div>
</dl>
-
<time>的datetime属性必须用 ISO 8601 格式（含时区），否则屏幕阅读器可能读错时间 - 别用
<ol>或<ul>替代<dl>—— 退款阶段不是“有序列表”，而是“状态定义列表” - 如果某个阶段尚未发生，不要留空
<dd>，应省略整个<div class="status-item">，避免 DOM 膨胀
状态文本要不要加 aria-current？
要，但只加在当前进行中的那一个 <dt> 上。它能让辅助技术明确告诉用户“现在卡在这一步”。注意不是加在 <dd> 或外层容器上。
<dt aria-current="step">审核中</dt>
- 值必须是
"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> 标签的 datetime 属性格式和 aria-current 的作用范围——这两处出错，对普通用户影响小，但会让依赖读屏软件的用户完全无法理解当前进度卡在哪一环。 
