必须为time标签添加符合ISO 8601标准的datetime属性，否则屏幕阅读器无法识别日期语义、触发快捷操作；内容文本可自由表达，但datetime须精确对应真实时间点并置于语义上下文中。
<time></time> 标签不是装饰性元素，它直接决定屏幕阅读器能否正确识别、播报和操作时间信息——没加 datetime 属性，或格式不合法，读屏软件就只能把“2026年8月26日”当普通字符串读，无法触发日期快捷操作（如长按复制、唤起日历）。
为什么<time></time>必须带datetime属性
屏幕阅读器不解析中文日期文本，只信任 datetime 的机器可读值。没有该属性时，NVDA/VoiceOver 会跳过语义识别，仅朗读可见文字，且无法提供任何时间相关交互能力。
-
datetime值必须符合 ISO 8601 标准：如"2026-08-26"、"2026-08-26T12:59+08:00"，不能是"2026年8月26日"或"2026/08/26" - 内容文本可自由书写（如“今天”“下周三”），但
datetime必须精确对应其真实时间点 - 若仅需年份或月份，仍需用标准格式：
datetime="2026"、datetime="2026-08"
<time></time>在DOM中位置错误的典型表现
常见错误是把它塞进非语义容器里，导致辅助技术无法关联上下文。比如新闻卡片里写成 <div class="meta"><time datetime="2026-08-26">昨天</time></div>，读屏器可能读出“昨天”，但无法判断这是发布时间还是截止时间。
- 应紧邻其描述的事件：如
<p>活动将于<time datetime="2026-09-15">9月15日</time>开始。</p> - 避免包裹在
<span>或无语义<div>中；优先放在段落、列表项或标题内 - 动态渲染时（如 React/Vue），确保
datetime值随数据实时更新，不能固化为初始值
多个<time></time>共存时的可访问性风险
同一页面出现多个 <time></time> 且未区分用途，会导致屏幕阅读器用户无法分辨哪个是发布日期、哪个是更新时间、哪个是截止时间。
立即学习“前端免费学习笔记（深入）”；
- 用
aria-label显式说明角色：<time datetime="2026-08-26" aria-label="发布日期">今天</time> - 不要依赖 CSS 视觉分组（如浮动、颜色差异），读屏器看不到这些
- 搜索引擎同样依赖
datetime+ 上下文推断内容时效性；缺失或错配会削弱富摘要（Rich Snippets）生成
最易被忽略的一点：即使写了 <time datetime="2026-08-26"></time>，如果该节点被 aria-hidden="true" 或 display: none 隐藏，它就彻底从可访问性树中消失——时间信息既不被读出，也无法被 JS 获取。语义标签的生命力，始终绑定在真实、可见、结构正确的 DOM 节点上。
