使时间元素更易于访问

有一个名为＆lt; time＆gt;的HTML元素。它是一个语义元素。这意味着机器人可以阅读和理解它。例如，如果我的代码显示：

然后计算机知道我要说的具体日期。浏览器可以提供将事件添加到日历中的功能，或者搜索引擎可以找到在特定日期发生的事件。好漂亮！

当人们使用缩写时，就会出现问题，而使用辅助技术（如屏幕阅读器）的人可能无法使用缩写。

这是BBC新闻头版的一个例子。 “ 1h”表示故事是在1小时前发布的。查看其背后的代码：＆lt; time＆gt;元素表示故事最初发布的时间。 qa-status-date-output是该故事发布以来的相对时间的缩写。对于屏幕阅读器来说，它是使用aria-hidden =＆＃34; true＆＃34;隐藏的。 gs-u-vh是屏幕阅读器的替代文字。使用CSS的用户看不到它。

我发现这是由于Lynx渲染时间戳的方式很奇怪。由于其中一半是使用CSS隐藏的，因此变得不可读。 pic.twitter.com/7OBYOpHheb

—特伦斯·伊甸园（@edent）2020年11月29日

需要说明的是，我不是在Beeb上灌篮。他们有大量的无障碍人员。我只是想知道是否有更简单/更好的方法来做事情？

理想情况下，应该使用aria-datetime这样的方式来读出时间。 但这并不存在。 或者，屏幕阅读器可以解释＆lt; time＆gt;。 元素并用它做点什么。 但这似乎并没有得到很好的支持。 而且，屏幕阅读器将如何知道显着信息是相对持续时间而不是特定日期时间？ ISO8601 –日期时间标准–允许持续时间。 因此，您可以编写datetime =＆＃34; TP30M＆＃34; 表示30分钟。 但这并不是说30分钟前，您失去了整个约会时间。 使用＆lt; abbr＆gt; 缩写元素。 有视力的阅读器将看到“ 1h”，屏幕阅读器将显示“ One Hour Ago”，而在文本模式下浏览的人只会看到“ 1h”。 我认为这是一个非常理想的解决方案。 整洁，易读，不依赖于隐藏任何元素，并且应该易于保持同步。