html - 如何为屏幕阅读器的 HTML5 时间元素添加标题？

Question

我有两个time元素指示某些电视列表的开始时间和结束时间。这些时间的设计不需要任何标题，因为在屏幕上它们看起来非常不言自明。但是，我想为屏幕阅读器添加一些东西，也许是某种属性？或者也许我创建了一个标题但用 CSS 隐藏它？

处理这个问题的最佳方法是什么？

<time datetime="{{ start_time }}">{{ start_time|time:"H:i" }}</time> -
<time datetime="{{ end_time }}">{{ end_time|time:"H:i" }}</time>

Answer 1

您可以将它们放在 a中，并对非屏幕阅读器<dl>隐藏s。<dt>

例如，HTML：

<dl>
    <dt>Start time</dt>
    <dd><time datetime="{{ start_time }}">{{ start_time|time:"H:i" }}</time></dd>

    <dt>End time</dt>
    <dd><time datetime="{{ end_time }}">{{ end_time|time:"H:i" }}</time></dd>
</dl>

CSS（来自HTML5 样板 .visuallyhidden）

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

dt {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

dd {
    display: inline; 
}

dt:first-child + dd::after {
    content: ' \2013 '
}

更新：jsFiddle、ddstyle 和 en-dash 而不是连字符