如何爲屏幕閱讀器添加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

你可以把它們放在一個<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風格，短破折號，而不是連字符