4

How would you markup a poem or song to be accessible to the visually impaired?

My initial markup was

<ol class="stanzas">
<li><ol class="stanza">
<li>Roses are red</li>
<li>Violets are blue</li>
</ol></li>
</ol>

However, this sort of markup is annoying with screen readers like Android TalkBack.

It's annoying to hear "1/4 Roses are red." I'd rather hear just "Roses are red."

Markup like the following sounds a little nicer in a screenreader but because I use CSS to style the lines as separate blocks of text each line has to be manually swiped through.

<div class="stanzas">
<p class="stanza">
<span class="line">Roses are red</span>
<span class="line">Violets are blue</span>
</p>
</div>

Each line should be read as a sentence not as a paragraph.

There's still a problem of the reader not reading each line as an individual sentence.

<div class="stanzas">
<p class="stanza">
<span class="line">Roses are red.</span>
<span class="line">Violets are blue.</span>
</p>
</div>

Sounds right but now you've changed the textual content of the poem. You could go further and hide the full stops with CSS but this feels like stacking hacks on tops of hacks.

Is there a better way for marking up a poem or song for screenreaders so that stanzas are read as paragraphs and lines are read as sentences?

Molly Stewart-Gallus
  • 1,118
  • 9
  • 25

1 Answers1

1

Against most expectations, several screen readers somehow interpret the CSS property list-style-type. Jaws, for example, announce bullets in different ways depending on the value of that property.

In particular for your case, no bullet is announced at all when list-style-type is set to none. Thus you can just keep your list as natural as it is and it will work, meaning that no extra bullet or counting will be announced for each item.

There are screen readers for which this simple trick doesn't work, sadly, but it's still probably better to keep the list natural as is. By trying to solve a problem observed with a particular screen reader using an unusual pattern like the one you suggest, you have a great risks to make it better for that particular screen reader, but worse for all others.

Accessibility is also a lot about keeping things as simple as possible. Semantically speaking, it doesn't look especially incorrect to consider a poem or song lyrics as a list of lines.

QuentinC
  • 12,311
  • 4
  • 24
  • 37
  • It's fair to keep things simple. I don't think I'm going to use an ordered list or if I do I might use role=presentation . But I'm probably going to remove the complicated and buggy full stop hack I'm currently using. I'm still going to spend a few more days exploring things though. – Molly Stewart-Gallus Nov 18 '22 at 21:22
  • Yes it's probably better to don't use that full stop hacky solution. Depending on the markup you choose at the end, pay a special attention to spacing though. You can quite easily end up with words glued together, and this is much more problematic than the absence of full stops. – QuentinC Nov 19 '22 at 06:40