要約

詩や歌詞の行を構造化して表現すると、通常の散文とのレイアウトの違いが見えないユーザーにとってのアクセシビリティが向上します。

テクニック

例

例1 — 複数の節（スタンザ）からなる基本的な詩

詩の行には特別な書式設定は必要ないので、行末を識別するにはbrタグのみが必要です。節を区切るにはpタグを使用します。

The Tyger

Tyger Tyger, burning bright,
In the forests of the night;
What immortal hand or eye,
Could frame thy fearful symmetry?

In what distant deeps or skies.
Burnt the fire of thine eyes?
On what wings dare he aspire?
What the hand, dare seize the fire?

…

<section>
   <h2>The Tyger</h2>

   <p class="stanza">Tyger Tyger, burning bright,<br/> 
      In the forests of the night;<br/>
      What immortal hand or eye,<br/>
      Could frame thy fearful symmetry?</p>

   <p class="stanza">In what distant deeps or skies.<br/>
      Burnt the fire of thine eyes?<br/>
      On what wings dare he aspire?<br/>
      What the hand, dare seize the fire?</p>

   <p>…</p>
</section>
例2 — 空白を使用して行のインデントを維持する

次の詩では、行のインデントを維持するためにspanタグを使用しています。間隔を維持するために、CSSのwhite-spaceプロパティをpreに設定しています。

i will wade out
till my thighs are steeped in burning flowers
I will take the sun in my mouth
and leap into the ripe air
Alive
with closed eyes
to dash against darkness
in the sleeping curves of my body
Shall enter fingers of smooth mastery
with chasteness of sea-girls
Will i complete the mystery
of my flesh
I will rise
After a thousand years
lipping
flowers
And set my teeth in the silver of the moon

<p class="poem">i will wade out<br/>
<span class="preserve">               till my thighs are steeped in burning flowers</span><br/>
I will take the sun in my mouth<br/>
and leap into the ripe air<br/>
<span class="preserve">                           Alive</span><br/>
<span class="preserve">                                 with closed eyes</span><br/>
to dash against darkness<br/>
<span class="preserve">                       in the sleeping curves of my body</span><br/>
Shall enter fingers of smooth mastery<br/>
with chasteness of sea-girls<br/>
<span class="preserve">                             Will i complete the mystery</span><br/>
<span class="preserve">                             of my flesh</span><br/>
I will rise<br/>
<span class="preserve">            After a thousand years</span><br/>
lipping<br/>
flowers<br/>
<span class="preserve">        And set my teeth in the silver of the moon</span></p>
例3 — テキストインデントを使用してインデントを維持する

例2と同じ詩ですが、CSSインデント付きのspanタグを使用しています。書式設定を機能させるには、 spanタグのCSS displayもinline-blockに設定する必要があります。

<p class="poem">i will wade out<br/>
<span style="text-indent: 6rem">till my thighs are steeped in burning flowers</span><br/>
I will take the sun in my mouth<br/>
and leap into the ripe air<br/>
<span style="text-indent: 11rem">Alive</span><br/>
<span style="text-indent: 13rem">with closed eyes</span><br/>
to dash against darkness<br/>
<span style="text-indent: 10rem">in the sleeping curves of my body</span><br/>
Shall enter fingers of smooth mastery<br/>
with chasteness of sea-girls<br/>
<span style="text-indent: 11.5rem">Will i complete the mystery</span><br/>
<span style="text-indent: 11.5rem">of my flesh</span><br/>
I will rise<br/>
<span style="text-indent: 5rem">After a thousand years</span><br/>
lipping<br/>
flowers<br/>
<span style="text-indent: 3.5rem">And set my teeth in the silver of the moon</span></p>

よくある質問

詩に画像を使用できますか？

一部の詩のレイアウトは、HTMLやCSSで表現するには複雑すぎる場合があります。このような場合、原本を表現するために、画像を使用するほかないことがあります。

画像を使用する必要がある場合は、レイアウトを認識できないユーザーのために詩のテキストを提供する必要があります（details要素など）。また、読者が詩の意図を理解できるように、画像内でテキストがどのように配置されているかを説明する必要があります。

画像の使用は、レイアウトが困難な場合における最後の手段としてください。

レイアウトにpreタグを使用できますか？

はい、しかし、preタグは、個々の文字や単語の配置に依存する詩に使用してください。単純なインデントの場合は、CSSスタイルでspanタグまたはdivタグを使用する使用する方が良い場合が多いです。

ARIAで詩を識別できますか？

いいえ。詩の行ベースの書式は標準的な散文とは視覚的に異なり、散文の連続的な流れとは読み方が異なりますが、HTMLには詩をマークアップするためのネイティブなセマンティック要素はありません。ARIAにも、詩とその内部構造を識別するロールがありません。

詩集の場合、ユーザーは自分が読んでいる作品の種類を知っているので、これは通常問題にはなりませんが、特にフィクション作品の場合、著者はスタイルの変更があったことを示さずに、テキストの段落の間に詩や歌詞をランダムに散りばめることがあります。

現時点では、支援技術のユーザーは、利用可能なマークアップに対するアプリケーションの動作（たとえば、brタグで行の読み取りを停止するなど）によって、文章スタイルの変化を直感的に理解するしかありません。

brタグの周囲に空白は必要ですか？

はい、多くのリーディングシステムでは、brタグの箇所での、行ごとの読み取りはサポートしていません。次の例のように、各行のテキストがbrタグで区切られた場合、

…lipping<br/>flowers<br/>…

これらのリーディングシステムは、テキスト読み上げ（TTS）再生が有効になっているときには単語をつなげて発音します。

この問題を回避するには、brタグの前後に少なくとも 一つの空白文字を付けてください。上記の例のように、各brタグの後に改行を追加すると、この問題を回避できます。あるいは、brタグの前に空白文字を追加しても、この問題を回避できます。

解説

HTMLには詩を表現するためのセマンティックな意味のあるマークアップは含まれていませんが、ネイティブ要素を使用して詩の行をマークアップすることは可能です。

たとえば、p要素は一般的にテキストの段落に関連付けられますが、HTMLではタグの意味が詩にも拡張されます。

段落は通常、一連のフレーズの内容です…が、より一般的なテーマのグループ化にも使用できます。たとえば、住所も段落ですし…詩のスタンザも同様です。

各スタンザ内の行は、brタグを使用して識別されます。支援技術は、各brタグで読み取りを一時停止し、ユーザーが詩を行ごとに移動できるようにします（例1を参照）。

注記

MacOSのChromiumベースのリーディングシステムには、blockquote内でbrタグが使用されている場合にVoiceOverが行を繰り返すという既知のバグがあります。これは詩や歌詞（例：題詞）が引用された場合に発生します。現在の状況の詳細については、バグレポートを参照してください。

このマークアップ パターンは基本的な詩には有効ですが、制限が多すぎる状況も数多くあります。詩では、意味を伝えるために視覚的なレイアウトが使用されることがよくあります。このような場合、テキストのインデントと配置を維持するためにCSSスタイルも必要になります（例2と3を参照）。

視覚的な表現が使われた詩では、コンテンツを見ることができない人やレイアウト全体を見るのが難しい人のために、レイアウトの説明を提供することも重要です。これは、画像を使用しなければならないときだけでなく、レイアウトが意味を伝えるときはいつでも重要です。