CODEWITHSUNDEEP
htmlaccessibilitywai-aria
Ms. Molly Stewart-Gallus
Ms. Molly Stewart-Gallus

Reputation: 1168

Markup a poem or song lyrics to be accessible to the visually impaired?

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?

Upvotes: 4

Views: 204

Answers (1)

QuentinC
QuentinC

Reputation: 14742

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.

Upvotes: 1

Related Questions