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

我有两个time元素，指示某些电视节目表的开始时间和结束时间。这些设计并不需要这些时间的任何标题，因为在屏幕上它们显得非常自我解释。但是，我想为屏幕阅读器添加一些内容，可能是某种属性？或者，也许我创建一个标题，但用CSS隐藏它？如何为屏幕阅读器添加HTML5时间元素的标题？

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

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

来源

2013-01-08 shrewdbeans

你可以把它们放在一个<dl>，并隐藏非屏幕阅读器的<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 Boilerplate.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，dd风格，短破折号，而不是连字符

来源

2013-01-08 17:04:07 newtron

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

回答

相关问题