One more accessibility issue: Can someone tell me if the way Scrivener handles separators meets this standard? Unfortunately, I don’t know html at all, so I can’t judge.
Suggested solution (from the same source):
Source: https://www.accessiblepublishing.ca/common-epub-issues/
From Sigil for reference, I copied some html around an image separator from my Scrivener-generated epub3 file:
Thanks in advance for any thoughts or tips about this!
Regards,
Laurel
The default Ebook format itself uses the least accessible method, an empty space. I would never use this default myself (for other preferential reasons too—I think ebooks are better designed with visible scene breaks because we can’t predict when they will fall between screen flips).
So this is what a scene break looks like with stock settings:
<p class="separator"><br /></p>
As noted in the guide, not the best result, a screen reader will read right over that without pause and create an ambiguous transition.
You can easily make your ebooks a bit better though. If you go into the Separators compile format tab, selecting “Text Section”, you can set the Between separator to “Custom”, and type in some asterisks. (You may need to edit a few different Layouts’ separator settings, it depends on how you structure things, but “Text Section” is the typical vanilla bulk content layout.)
Now you should get:
<p class="separator">* * *</p>
Still maybe not the best, but at least a screen reader will say something that would be commonly spoken aloud when the context shifts. That’s probably the easiest way all around, and is the second method on their list.
For both this and the next approach, at the moment, these only work on the Mac.
The “Custom” separator field is granted a special exclusion that allows you to put raw HTML into it, without it being escaped and turned into visible text. So you can type out the full, recommended image reference:
<img src="images/separator.png" alt="scene break" />
Of course what goes into ‘src’ depends on your image name, but do make sure you follow capitalisation precisely. What you don’t want to do is use Scrivener’s image placeholder, which it looks like you might be doing, as it has no way of specifying the ‘alt’ field, and without that you might as well be using an empty line, as far as accessibility goes.
As with the methods we might use to add ‘alt’ text to figures in the editor, you need to include the separator graphic in the draft somewhere. Scrivener won’t export it into the ePub’s images folder just because you type in its name somewhere.
Note that one does not actually need to use an image for the visual scene break. We could use an invisible 1x1 pixel transparent image, and then use CSS to insert text around the image, instead. In some ways this may in fact be the best way to insert text breaks, because screen readers will only read the crafted alt text, while those reading the book visually will see a theme-appropriate text sequence, which can potentially use a custom font for special glyphs, that look equally good in light and dark mode ebook readers.
Note: in my testing the page you linked to overstates the quality of this result. Not every screen reader will announce a horizontal rule verbally, and in my testing multiple ebook readers do not allow them to be styled in a completely different fashion (such as replacing them with images or text).
As with the image method above, we can type in the HTML directly:
<hr />
As this will be placed within a classed paragraph, we do not need anything special for it, as we can address it specifically with the following CSS selector:
p.separator hr {
...
}
The separator field would be the same exact thing, the only difference with this method is using their example CSS for printing asterisks instead of a full horizontal rule.
As noted, you can’t really do anything other the first two methods on Windows, becaeuse it doesn’t handle HTML in the separators field correctly. One approach is to use some text in the custom field, and then open the compiled .epub in Sigil and bulk replace all instances of that text to the proper HTML. If the ePub already has the right CSS in place, it should immediately look correct.
The alternative is using Pandoc’s ePub conversion, which Scrivener does integrate with, but that is a whole separate conversation. If anyone on Windows reads this and is curious, I can provide some links to threads on that. With Pandoc you can do all of the above easily.
Thank you so much for another detailed response! I’ve been working through it for days and just realized I never responded here. I’m learning a lot of new things.
I didn’t find hr.center anywhere. Is it in Scrivener’s default CSS? I might have given up on the hr separator idea for now, because I don’t want the screen readers to alert the listeners twice to one scene change.
Or is having two class=separator statements not redundant?
I went back to adding ALT text for the separator, but I’m happy with that. Thank you!
Unfortunately, I have another question, but I’m putting it in a separate comment, in case you want to split that off too.
The ACE Daisy epub checker is giving me “Serious” errors on what seem to be kind of basic things, but I don’t know how to add the “answers” into the epub or if Scrivener can do that somehow. Daisy has buckets of tutorials for figuring out the answer, but it would be lovely to build as much of this as possible into my project, so I don’t have to go into Sigil to add stuff.
Did Gemini hallucinate a “Project-level custom metadata” in Scrivener? It kept telling me I had settings in the Project settings custom metadata menu that I didn’t see.
I do use Scrivener’s standard project metadata, including en for English language, but the Ace epub checker doesn’t seem to like the way the epub language is specified.
Is there a place to add custom metadata that is project-wide where I could add these accessibility info fields?
Missing accessibility Metadata:
• a11y:certifiedBy
• a11y:certifierCredential
• a11y:certifierReport
• dcterms:conformsTo
• schema:accessMode (Serious)
• schema:accessModeSufficient (Moderate)
• schema:accessibilityFeature (Serious)
• schema:accessibilityHazard (Serious)
• schema:accessibilitySummary (Moderate)
Thanks very much in advance for considering even more questions!
Regards,
Laurel
For anyone coming along and looking for an applied example, I’ve added an accessibility-friendly scene break example to the sample project in the thread about adding alt text to images.
I would also add that in my testing, the “hr” method may not be as well supported as this web page indicates. Many screen readers will not announce it verbally and just skip right over it, making it as bad as the empty line approach. Plus, the methods described on this page for styling HRs to present themselves as something other than an actual screen-width horizontal rule, do not actually work in a number of ebook readers. You will just get the horizontal rule—which while perhaps not the worst way to cut scenes, certainly isn’t conventional.
I therefore think using an <img ... alt="Scene break" /> type construct is probably the best all around. For those that would prefer a text-based separator instead, such as * * *, or even a custom font symbol, using a 1x1 pixel transparent PNG for the separator, so you get the alt attribute, and the CSS to insert the text itself, might be all around the best option. Using images themselves do have the drawback of easily breaking in different ebook reader themes (black symbols on very dark grey backgrounds in dark mode, for example).
