Summary

Structuring and describing lines of poetry and lyrics improves access for users who cannot see the difference in layout from regular prose.

Techniques

• Use the br tag to identify line breaks [[WCAG-1.3.1]]
• Use span tags when additional line formatting is needed.
• Include descriptions for poetry that conveys meaning through its visual layout.

Examples

<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>

<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>

<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>

Frequently Asked Questions

Can I use images for poetry?

The layout of some poetry is too complex to be represented by HTML and CSS. In these cases, the only option may be to use an image to represent the source.

If an image must be used, you must provide the text of the poem for users who cannot perceive the layout (e.g., in a details element). It will also be necessary to describe how the text is arranged in the image so that readers are able to understand the intent of the poem.

The use of images should be a last resort for only the most difficult of layouts.

Can I use pre tags for layout?

Yes, but the pre tag is best reserved for poetry that relies on positioning of individual characters and words. For simple indenting, using span or div tags with CSS styling is often a better option.

Can I identify poetry with ARIA?

No. Although the line-based formatting of poetry is visually distinctive from standard prose, and read differently from the continuous flow of prose, HTML does not provide native semantic elements for marking up poetry. ARIA also lacks roles to identify poems and their internal structures.

For books of poetry, this is generally not an issue as users know what types of works they are reading, but for works of fiction, especially, authors may randomly intersperse poems and lyrics between paragraphs of text without indicating a change in style has occurred.

At this time, users of assistive technologies are left to intuit changes in writing style by how the applications respond to the markup that is available (e.g., that they stop reading a line at a br tag).

Do I need whitespace around the br tags?

Yes, many reading systems do not support reading by line when br tags are present. If you run the text of each line into a br tag as in the following example:

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

then these reading systems will slur the words together when text-to-speech playback is enabled.

To avoid this issue, ensure that there is always at least one whitespace character before or after the br tag. Adding a line break after each br tag, as in the examples above, will avoid this issue, as will adding a space before the br tag.

Explanation

Although HTML does not include semantically meaningful markup for expressing poetry, it is possible to mark up lines of verse using native elements.

The p element is commonly associated with paragraphs of text, for example, but HTML expands the tag's meaning to include poetry:

A paragraph is typically a run of phrasing content … but can also be used for more general thematic grouping. For instance, an address is also a paragraph, as is … a stanza in a poem.

The lines within each stanza are then identified using br tags. Assistive technologies can pause reading at each br tag, allowing users to move line-by-line through the poem (refer to Example 1).

Although this markup pattern works for basic poetry, there will be many situations where it is too limited. Poetry often makes use of visual layout to convey meaning. In these cases, CSS styling will also be needed to retain indentation and placement of text (refer to examples 2 and 3).

With visual poetry, it is also important to provide a description of the layout for those who cannot see the content or have difficulty viewing the full layout. This is important not only when an image has to be used, but any time the layout conveys meaning.