Structuring and describing lines of poetry and lyrics improves access for users who cannot see the difference in layout from regular prose.
- Use the
brtag to identify line breaks [[WCAG-1.3.1]]
spantags when additional line formatting is needed.
- Include descriptions for poetry that conveys meaning through its visual layout.
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
detailselement). 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
pretags for layout?
Yes, but the
pretag is best reserved for poetry that relies on positioning of individual characters and words. For simple indenting, using
divtags 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
- Do I need whitespace around the
Yes, many reading systems do not support reading by line when
brtags are present. If you run the text of each line into a
brtag as in the following example:
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
brtag. Adding a line break after each
brtag, as in the examples above, will avoid this issue, as will adding a space before the
Although HTML does not include semantically meaningful markup for expressing poetry, it is possible to mark up lines of verse using native elements.
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).
There is a known bug with chromium-based reading systems on MacOS where VoiceOver repeats lines
br tags are used inside a
blockquote. This affects quoted poetry
and lyrics (e.g., in epigraphs). For more information on the current status, refer to the bug report.
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.