[Tex2002ans]

Originally Posted by JSWolf

I used to use margins for section breaks. I forget where I picked up padding instead of margins for section breaks. But padding does work must better.

The margin/padding difference was if it occurs at the very top of a screen when you move to next page.

Margins got eaten, padding stays.

Originally Posted by DaleDe

I noticed that the image examples don't fill in the alt entry. This, if it were filled in, would identify the break automatically.

alt="" (or alt="*") is the correct choice.

See Example 8, WebAIM "Alternative Text":

Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have null alt text (alt="").

Note
When an image is used only for decorative purposes, it is often best to remove the image from the page content and add it as a background image using CSS. This will remove the need for alternative text at all and will remove the image from the semantic and structural flow of the page.

Originally Posted by DaleDe

Why wouldn't the image be available? It is for reading out loud and can be anything you want. Yes "scene break" might be the thing you would want it to say.

I think that's why HTML5 pushed for using <hr> in this case instead.

If that HTML5Doctor article was correct, it would be the same as if you did </section><section>.

<section> is a new HTML5 tag, and allows users to navigate more easily (similar to headings):

https://developer.mozilla.org/en-US/...lement/section

So let's say in a Fiction book, each scene could be in its own <section>:

<section>
	<h2>Chapter 1</h2>
	<p>The green cow woke up, [...]</p>
</section>
<section>
	<p class="scenebreak">* * *</p> <--- (or <img> here)
	<p>Stumbling through the meadow, [...]</p>
</section>

Or, (I think), equivalent would be this:

<section>
	<h2>Chapter 1</h2>
	<p>The green cow woke up, [...]</p>
	
	<hr class="scenebreak" />
	
	<p>Stumbling through the meadow, [...]</p>
</section>

and then you can load a decorative image via CSS, like Turtle91 pointed out.

This would still allow a blind reader to hop to the next section, just like they could jump to the next <h2> or chapter.

* * *

Nowadays, on more modern browsers, there's the Accessibility Tree + ARIA:

• Mozilla Hacks, "How accessibility trees inform assistive tech"
• Google Developers, "The Accessibility Tree"
• Mozilla Web Docs, "ARIA"

ARIA (Accessible Rich Internet Applications) lets you assign labels/roles, and nudge the browser in certain ways. Like you can tell the browser "these are navigation links":

Spoiler:

<div role="navigation">
<ul>
	<li><a href="HomePage.xhtml">Home</a></li>
	<li><a href="Forums.xhtml">Forums</a></li>
	<li><a href="About.xhtml">About</a></li>
</ul>
</div>

A screen reader can then treat those differently than your typical links within an article.

The Accessibility Tree lets you see the semantics and innards behind code... and the HTML5 tags, by default, already map to ARIA stuff. This is one of the reasons why semantics is much more important.

Side Note: Of course, you can also go in the complete opposite direction and begin bungling it up "when trying to be helpful" and over-assigning ARIA roles/labels. Again, this is why it's a little better to err on the side of KISS.

One of the blogs I love to read is "Marco's Accessibility Blog". He's a blind web developer and has done a ton of coding and enhancements for Mozilla/Google/WordPress/NVDA. And since he's blind... he explains all the typical pitfalls/pain-points.