要約

hr要素を使用してコンテキスト（文脈）の区切りを示すと、支援技術によってユーザーはコンテキストの変化がわかるようになります。

テクニック

例

例 1 — 空白行のコンテキスト変更

CSS のmarginプロパティは、 hrタグの周囲に 1em のスペースを追加するために使用されます (上下に 0.5em)。 widthを 0 に設定すると、罫線が描画されなくなります。

<style type="text/css">hr.transition {
   width: 0;
   margin: 0.5em 0;
}
</style>

<p></p>
<hr class="transition"/>
<p></p>
例 2 — アステリズム（訳注：⁂、三ッ星印）

ルールの代わりに複数のアスタリスクを追加するのに背景画像を使用します。

<style type="text/css">hr.transition {
   background: url('img/asterisks.gif') no-repeat center;
   height: 1em;
   border: none;
   margin: 0.5em 0em;
}
</style>

<p></p>
<hr class="transition"/>
<p></p>

よくある質問

同じ効果を得るために、CSS を使用してパディングやマージンを増やすべきではないのはなぜですか？

同じ視覚効果が得られるかもしれませんが、コンテキストの変化が発生したという情報はユーザーには提供されません。CSS クラス名には意味的なものはありません。

印刷優先ワークフローツールでは、エクスポート時にコンテキストの変化を示すためにこの CSS テクニックがよく使用されますが、本質的にはアクセシブルではありません。

コンテキストの変化を示すためにimgタグを挿入できますか？

画像はセマンティックな情報を持たないため、コンテキストの変化を示す最適な方法とは言えません。単なるCSSでの解決策とは異なり、alt属性はコンテキストの変化を示すために使うことができますが、 hr要素が提供するような、より統一的なユーザー体験は補えません。

解説

コンテキストの区切りはフィクションやノンフィクションの作品における考え、時間、場所などの変化を表します。これらの変化は、通常、段落間の目立つ空白スペース（つまり、段落間に発生するよりもかなり長い）によって表されます。伝統的にコンテキストの変化が印刷ページ下の境で発生し、目立たない場合などでは、コンテキストの区切りにはアスタリスクやその他の装飾が付けられることがあります。

これまで、コンテキストの区切りを付けるためにCSSのマージンと画像が使用されていましたが、HTML5仕様では、この目的のためにhr要素のセマンティクスが再定義されました。CSSスタイルの適用により、デフォルトの外観を変更できます。

hr要素は、セクション間の装飾やセクションの先頭または末尾の装飾など、純粋に装飾的な目的では使用しないでください。

関連リンク