HTML time元素datetime属性的WCAG无障碍最佳实践问询

背景参考 #

根据MDN文档：

datetime值（机器可读的日期时间值）是元素的datetime属性值，必须符合正确格式。如果元素没有datetime属性，则不能包含任何子元素，datetime值为元素的文本内容。

根据W3Schools文档：

该元素的datetime属性用于将时间转换为机器可读格式，以便浏览器为用户提供日历添加提醒功能，搜索引擎也能生成更智能的搜索结果。

我的当前<time>元素代码为：

<time>2025-01-20</time>

技术问询 #

依据无障碍最佳实践及WCAG指南，是否更推荐添加与文本内容相同值的datetime属性，即使用如下代码？

<time datetime="2025-01-20">2025-01-20</time>

需明确该操作对残障用户、无障碍工具（如屏幕阅读器）等是否存在差异，即重复设置相同值是否有必要或无影响。

回答 #

从无障碍最佳实践和WCAG指南的角度来看，重复添加与文本内容一致的datetime属性是安全且推荐的做法，不会产生负面影响，反而能提升兼容性和鲁棒性。具体分析如下：

• 屏幕阅读器表现：主流屏幕阅读器（如NVDA、VoiceOver、JAWS）对两种写法的处理基本一致——都会识别<time>元素并读取日期内容。但添加明确的datetime属性后，部分阅读器会额外确认机器可读格式的有效性，避免因文本内容格式识别偏差（尽管本例中文本是标准格式）导致的解析错误。
• WCAG合规性：WCAG并未强制要求在文本内容已是标准机器可读格式时添加datetime属性，但强调内容的机器可解析性是提升可访问性的基础。显式设置datetime属性属于"防御性编码"，确保所有用户代理（包括老旧工具）都能准确识别日期信息。
• 额外功能支持：即使文本格式标准，显式的datetime属性能确保浏览器的日历集成、搜索引擎的结构化数据提取等功能更稳定触发，这对所有用户（包括残障用户）都有帮助——比如依赖浏览器日历提醒的视障用户能更可靠地添加日程。

简言之，重复设置相同值不会造成冗余干扰，反而能让<time>元素的行为在不同环境下更一致，符合无障碍设计的稳健性原则。

内容的提问来源于stack exchange，提问作者Filip Huhta