Ensure that text highlighting during playback does not impede the ability to read the text.
- Provide sufficient contrast between foreground and background colors. [WCAG 1.4.3 and WCAG 1.4.6]
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
- G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
Frequently Asked Questions
- Can I only apply background shading?
No, you can make any changes you like to the active text, but be aware that the choices you make may impact on the accessibility of the publication.
Also consider the medium. Increasing the font size might seem to be a good choice to make the active text more pronounced, but the practical result may be text that jumps around on the page in ebooks. As one paragraph loses focus, for example, its text size will shrink and the next will increase, causing the layout to "move" on the user. It may also be the case that text that was visible when the page was originally rendered will get pushed out of the viewport as the new highlighting is applied.
- Can I highlight words within sentences (or within paragraphs) using overlays?
Yes and no. If you are using pre-recorded audio, you cannot. The playback will only be as granular as your overlay file, as highlighting is applied to each
Highlighting at both the sentence and word level is common in reading systems that provide text-to-speech playback. This rendering is typical a combination of heuristic lookaheads to determine each sentence (or part of a sentence) combined with word-level highlighting as each word is fed to the TTS engine for rendering.
Overlays can take advantage of TTS playback to offer similar functionality, but at the price of audio quality (synthesized voices) and assurance that the content will render (not all reading systems provide TTS voicing). If no
audioelement is provided in a
par, the reading system is expected to render text content synthetically (audio/video content referenced from the
textelement would be initiated). Any word-by-word highlighting offered by the TTS engine would compliment the active overlay highlighting.
But choosing this kind of playback is suboptimal for the pitfalls already listed and because of the further conflicts that may arise between the highlighting you apply and the highlighting the reading system applies during TTS playback. Color clashes could make the text illegible for users.
When mixing overlays and TTS technologies is necessary (e.g., to narrate the body and synthetically render indexes and other tedious to narrate backmatter), it's best to err on the side of a simple highlighting scheme for the overlays.
When text is synchronized during playback, it can also be styled to make it more obvious which passage is being narrated.
EPUB 3 allows you to define the CSS class to apply to the active element in the package
document metadata using the special
<meta property="media:active-class"> -epub-overlay-active </meta>
In this case, the reading system will check all attached CSS files for a class named
-epub-overlay-active and will apply whatever styles are defined in it to each synchronized
element for the duration of its playback
The name that you use for the CSS class is not important, but a name that indicates the purpose of the class is recommended for clarity.