Best way to do three-line space/pause, for accessibility?

[bookman156]

I would normally make a space between some paragraphs in text by adding the requisite top or bottom margin to a p class. However, EPUB 3 Best Practices (ten years old) tells me this is bad for accessibility since readers for the blind (ten years ago) couldn't interpret such a margin. That book recommends instead that I use a horizontal rule, a hr tag, in which I make the width zero to dispense with the rule and then add top and bottom margin. Clever I suppose, but to me this is a bad semantic practice, since my three-line space is a pause, not a rule or a fleuron.

Some people probably still use numerous br tags, but this is a leftover from bad web design.

So my question is: Have accessibility readers improved over the past ten years so they can now 'see' such a margin on a p tag for what it is, and interpret it reliably for the blind (I have no idea, also, how they 'read' a hr tag)? Is this still a problem, or not?

How do other people approach this?

[phillipgessert]

I don't think there is any tag that maps to a "pause" semantically. And there wouldn't be a way for a screen reader to see a margin-top as one, because there's no way it could understand intent like that. So basically, anything you do here would be kind of inherently unsemantic and possibly lost to screen readers. Hypothetically you could group paragraphs together into <section>s or something, but it sounds more like these are "let that sink in" type pauses rather than actual changes in topic, so that would also be incorrect semantically if that's the case.

[bookman156]

Yes, 'let it sink in' pauses is what I mean. Typically as in a book of aphorisms.

So looks like I'll have to wait for the powers-that-be to catch up with this one and carry on for sighted readers.

[bookman156]

And there wouldn't be a way for a screen reader to see a margin-top as one, because there's no way it could understand intent like that.

I wonder about that, since anything the eyes can interpret ought to be translatable. Why else would there be an unusually large margin on some paragraphs other than because it was an increased space. I guess that may or may not be a pause between paragraphs, but I can't right now think what else it might be.

[JSWolf]

I used to use a 2em top padding. The reason for the padding instead of a top margin is that it works better when the space is at the bottom/top of the page.

But now I changed that and I use a 20% line for note a section break.

hr {
  margin-top: 1em;
  margin-right: 40%;
  margin-bottom: 0.9em;
  margin-left: 40%;
  border-top: 2px solid;
}

[bookman156]

I can see a 'half rule' as we used to call them would be good in some circumstances.

Any idea how hr tags are 'voiced' by accessibility readers? Are there any good accessibility readers one can get for free online?

[JSWolf]

Originally Posted by bookman156

I can see a 'half rule' as we used to call them would be good in some circumstances.

Any idea how hr tags are 'voiced' by accessibility readers? Are there any good accessibility readers one can get for free online?

Probably poorly. You could something like...

<p class="sectionbreak">Start of a new section.</p>

.sectionbreak {
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  text-align: center;
  text-indent: 0;
}

[bookman156]

I do something like that with margins but don't call it 'sectionbreak'.

But accessibility readers don't read p class names do they? So presumably what I call it has no impact. Or am I wrong on that?

[bookman156]

Oh, you mean actually have text saying 'Start of a new section'. That would drive people mad in a book with many 3-line pauses between bits.

[JSWolf]

Originally Posted by bookman156

Oh, you mean actually have text saying 'Start of a new section'. That would drive people mad in a book with many 3-line pauses between bits.

It would work, My <hr/> most likely won't work. But you'd have to test it to be sure.

Originally Posted by bookman156

I do something like that with margins but don't call it 'sectionbreak'.

But accessibility readers don't read p class names do they? So presumably what I call it has no impact. Or am I wrong on that?

The accessibility readers will not read the class names. But I prefer to use class names that say what they are for when I can.

[bookman156]

Well the solution I mentioned at the beginning of having hr tags of zero width to remove from sighted readers with margin top and bottom would actually work, I was hoping there was something a big more elegant.

[JSWolf]

Originally Posted by bookman156

Well the solution I mentioned at the beginning of having hr tags of zero width to remove from sighted readers with margin top and bottom would actually work, I was hoping there was something a big more elegant.

The solution of a zero width <hr/> is not a good idea for sighted readers. I want to see the line and know it's a section break easily. That's why my CSS displays the line. I use 2px solid because it looks better on a 300dpi eInk screen then the default 1px solid line.

[bookman156]

The solution of a zero width <hr/> is not a good idea for sighted readers. I want to see the line and know it's a section break easily. That's why my CSS displays the line.

I don't like removing the rule that way either, but you would see the 3-line space of its margins, that would be displayed as hoped for.

[Tex2002ans]

Originally Posted by bookman156

I would normally make a space between some paragraphs in text by adding the requisite top or bottom margin to a p class.

I've written about this many times over the years:

See my posts in:

• 2019: "How to Format Scene Breaks?"
• 2021: "Background Image w/ Text on Top"
• 2020: "Problem adding extra lines in text"

And I even cover all the pros/cons in extreme detail here:

• 2019: "Why is it so hard to preserve blank lines?"

Long story short.

DO NOT use only a gap like a physical book.

Use centered asterisks (or fleurons, or ANYTHING VISIBLE) to indicate your scenebreaks.

Originally Posted by bookman156

However, EPUB 3 Best Practices (ten years old) tells me this is bad for accessibility since readers for the blind (ten years ago) couldn't interpret such a margin. That book recommends instead that I use a horizontal rule, a hr tag, in which I make the width zero to dispense with the rule and then add top and bottom margin.

I would still stick with centered asterisks over HTML5's usage of <hr> + CSS3 to change the look.

Remember, KISS (Keep It Simple, Stupid!). And not all devices have CSS.

I discussed this all in extreme detail in:

• 2020: "<i>, <em> or <span> for italics ?" (Especially see my Posts #131 + #148 which covers <hr> specifically.)

Side Note: If you want the ultimate latest topic on "Italics <i> vs. Emphasis <em>" + Accessibility, see my breakdown in:

• 2021: "Italics and Bold"

Originally Posted by bookman156

Clever I suppose, but to me this is a bad semantic practice, since my three-line space is a pause, not a rule or a fleuron.

In HTML5, they changed the semantics of <hr>.

In the modern web, there's also this thing called the "Accessibility Tree" + ARIA Roles... and <hr> helps generate new HTML <section>s in your text. (Allowing easier navigation via Screen Readers, etc.)

Semantically, it is the correct way of doing scenebreaks... but in reality, I would tentatively avoid using <hr> like that in your ebooks.

I mean, <hr> is OKAY—and it's definitely better than your visual gap—but there are disadvantages compared to centered asterisks. (It was all discussed in those thread above.)

Originally Posted by bookman156

Some people probably still use numerous br tags, but this is a leftover from bad web design.

No. Rarely, if ever, should you use <br>.

[bookman156]

My problem with it is using the hr tag when it isn't a rule at all, it's a space. I suppose you could say a margin isn't really a 3-line space either, but it seems less bad to me, and it is the standard way to achieve this in CSS. Except blind people are losing out on the semantic flow.