要約

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

関連リンク