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 apply any CSS properties 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 an EPUB. 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.
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.