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

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

My initial markup was

<ol >
<li><ol >
<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 >
<p >
<span >Roses are red</span>
<span >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 >
<p >
<span >Roses are red.</span>
<span >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?

CodePudding user response：

This is a bad half solution but maybe it can help some people.

In order to obtain a reasonable visual effect and have screen readers read each stanza as a paragraph and read each line as a sentence you want to expose to the accessibility tree each stanza as a text container and each element within the text container as a text left. In Firefox you can double check this by viewing the accessibility tree in developer tools.

A markup which exposes each stanza as a paragraph and each line as a sentence might be something like:

<div >
<p >
<span >Roses are red</span><span > . </span><br >
<span >Violets are blue</span><span > . </span><br >
</p>
</div>

<br> inserts a newline text leaf into the accessibility tree preventing text from being read as a top level domain like .com

You would hide the full stops from sighted users with CSS like

.line-end {
  color: transparent;
}

Unfortunately conventional hiding techniques don't work with inline elements.

I'm also not sure how you would hide from web scrapers.

This is also more than a bit fragile and incompatible with certain CSS effects like hanging indents.

Lines, line ends and line breaks cannot be displayed as block or inline-block without interrupting the contiguous run of text leafs in the accessibility tree (at least in Firefox.) Really not sure about the details here unfortunately.

You would expect there would be something like a Unicode character for a non visible full stop line return. I'm sure this solution can be improved on.

CodePudding user response：

There's a simple brute force answer of aria-hidden and aria-label.

<p  aria-label="Roses are red . Violets are blue .">
  <span aria-hidden="true" >Roses are red</span>
  <span aria-hidden="true" >Violets are blue</span>
</p>

This wouldn't work well with stuff like putting hyperlinks inside a stanza though.