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

[JSWolf]

Originally Posted by bookman156

That's quite an interesting idea, could be like an invisible email tracking pixel, though that seems a bit of a hack. If using a visible image as a fleuron that could be put on an hr tag anyway, but then may as well use an invisible hr of zero width, as originally suggested by the accessibility expert.

Your accessibility expert is wrong. Text in the alt field of an image is designed for a program reading the book. It can't read the image but it can read the description of the image. So don't use <hr/> of any type and forget fleurons unless you have one as a graphic image.

One thing I really dislike as it looks really ugly is * * * for the section break. I've even seen this as a graphic. It's ugly no matter what. A line, a fleuron, a symbol, etc work well. Just make it a graphic so you can use alt to describe it.

<div class-"sectionbreak">
<img alt="section break" src="images/sectionbreak.jpg"/>
</div>

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

[bookman156]

What the experts say on using the img tag:

Can I insert an img tag to indicate context change?

Images are a suboptimal way to indicate a context change because they carry no semantic information. Unlike pure CSS solutions, the alt attribute can be used to indicate the context change, but that doesn't compensate for the more uniform experience that the hr element can provide.

From: https://kb.daisy.org/publishing/docs/html/context.html

[bookman156]

The trouble, as far as I'm concerned, is that the hr tag gives too much of an indication of a context change, way more than a 3-line space does visually. And I still have no idea what happens in a screen-reader when encountering a hr tag. Accessibility is all very well, but it seems basic information like this isn't itself very accessible to the sighted.

[JSWolf]

Originally Posted by bookman156

What the experts say on using the img tag:

<p></p> does not always work. If an hr is what the reading software uses to indication a section break, then have the line show. Don't use <p></p> to add space. Use the CSS for the hr to add the space. and use padding and not margins as margins can break when you get to the bottom/top of the screen.

But I don't see why alt won't work for a section break.

[JSWolf]

Originally Posted by bookman156

The trouble, as far as I'm concerned, is that the hr tag gives too much of an indication of a context change, way more than a 3-line space does visually. And I still have no idea what happens in a screen-reader when encountering a hr tag. Accessibility is all very well, but it seems basic information like this isn't itself very accessible to the sighted.

We are talking what to do for people using a program to read the book. The 3-line space while being too large is not going to work. We need something that works for the reading program and for those reading the book. hr with the line will work if the reading program recognizes hr as a section break. alt works if the reading program supports alt.

[bookman156]

<p></p> does not always work.

I presume the experts weren't suggesting using empty tags like that, that was just their way of indicating paragraph before and after the hr.

[phillipgessert]

I was under the impression that alt text was meant to be used to describe the image, not what it's being used for. Unless that's different in the context of section break, I'd think using an image's alt text that way wouldn't be a best practice--and of course these also aren't section breaks.

I don't think there is a particularly good solution, because I can't think of any tag that describes something like a timing/pacing beat. For the most part I would think this would be mostly suggested by the content itself, though it's tough to say in this case without an example. But if there's no tag for it, there's no tag for it--and then you're just left to choose from an array of options that are all unsemantic in some way or another, including what you were already doing via CSS.

[bookman156]

We are talking what to do for people using a program to read the book. The 3-line space while being too large is not going to work. We need something that works for the reading program and for those reading the book. hr with the line will work if the reading program recognizes hr as a section break.

Yeah, you make a good point about whether a 3-line space is even any good on the small screens of ereaders, something I was yet to consider. Perhaps a half rule or quarter rule done with a styled hr tag is the way to go.

I suppose the hr could also be done in greyscale to reduce its impact somewhat.

[bookman156]

Some books of aphorisms use the § character, a section sign, which is better at least than three asterisks, though no idea how screen-readers deal with it.

[bookman156]

Good news. I used the following code on my web-page equivalent of my EPUB code, and took the margin off the p tag, and it looks great, much better than I expected. Glad to know the page is now accessible for the blind. Will adapt for the EPUB in due course:

hr.transition {
    margin: 1.5em 40% 1.6em 40%;
    border-top: 1px solid darksalmon;
  }

[phillipgessert]

What is the distinction between that and a rule/fleuron, which your original post specifically called out as inappropriate?

[bookman156]

What is the distinction between that and a rule/fleuron, which your original post specifically called out as inappropriate?

It is a lessened hr rule in being shorter and a lighter colour. It became clear that there was actually no way to make this space accessible without using an hr rule, so I styled it so as to be acceptable to me aesthetically, and it turned out to be better than I expected.

The print book of course simply uses a 3-line space, and I hadn't thought of doing it differently for the EPUB until it dawned on me that a 3-line space on an ereader would be indistinguishable from any old space that ereaders may shove in (so I have made widows and orphans 1 also).

It is pointless clinging to the usual method of putting a margin on a p tag if it is simply not going to be accessible. So I changed my mind and worked with it to my satisfaction.

[bookman156]

Oh, the original method that I regarded as unacceptable put a width of zero on the hr.

[phillipgessert]

Well, all’s well that ends well, I guess. Adding an inappropriate semantic element is not an accessibility improvement, but I assume it must have in fact been the appropriate semantic element, and is effectively a section break. And the zero width styling has nothing to do with semantics, so you landed at basically the exact accessibility solution you initially rejected. It happens, of course.

[bookman156]

It is not as much of a section break as a normal full length black hr rule.

It's just as semantic as a margin on a p tag though isn't it?

What else can you do? I would rather the book appeared fine to the blind since they somewhat transcend the pretty terrible graphic capabilities of ereaders.