0

time一部のテレビ番組表の開始時刻と終了時刻を示す2 つの要素があります。画面上では非常に自明に見えるため、デザインはこれらの時間のタイトルを必要としません. ただし、スクリーン リーダー用に何かを追加したいのですが、おそらく何らかの属性でしょうか? または、タイトルを作成しても CSS で非表示にできますか?

これを処理する最善の方法は何ですか?

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

1 に答える 1

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 ボイラープレート .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

于 2013-01-08T17:04:07.777 に答える