For example, to apply a yellow background to each section of prose as it is read, as is traditionally found in accessible talking books, you would define the following definition in your CSS file:

.-epub-media-overlay-active
{
    background-color: yellow;
}

And that’s the long and short of creating overlays.

Structural Considerations

I briefly touched on the need to escape nested structures, and skip unwanted ones, but let’s go back to this functionality as a first best practice, as it is critical to the usability of the overlays feature in exactly the same way markup is to content-level navigation.

If you have the bad idea in your head that only par elements matter for playback, and you can go ahead and make overlays that are nothing more than a continuous sequence of these elements, get that idea back out of your head. It’s the equivalent of tagging everything in the body of a content file using div or p tags.

Using seq elements for problematic structures like lists and tables provides the information a reading system needs to escape from them.

Here’s how to structure a simple list, for example:

<seq id="seq002" epub:type="list" epub:textref="chapter_012.xhtml#ol01">
    <par id="list001item001" epub:type="list-item">
        <text src="chapter_012.xhtml#ol01i01"/>
        <audio src="audio/chapter12.mp4" clipBegin="0:26:48" clipEnd="0:27:11"/>
    </par>
    <par id="list001item002" epub:type="list-item">
        <text src="chapter_012.xhtml#ol01i02"/>
        <audio src="audio/chapter12.mp4" clipBegin="0:27:11" clipEnd="0:27:29"/>
    </par>
    …
</seq>

A reading system can now discover from the epub:type attribute the nature of the seq element and of each par it contains. If the reader indicates at any point during the playback of the par element list items that they want to jump to the end, the reading system simply continues playback at the next seq or par element following the parent seq. If the list contained sub-lists, you could similarly wrap each in its own seq element to allow the reader to escape back up through all the levels.

A similar nested seq process is critical for table navigation: a seq to contain the entire table, individual seq elements for each row, and table-cell semantics on the par elements containing the text data.

A simple three-cell table could be marked up using this model as follows:

<seq epub:type="table" epub:textref="ch007.xhtml#tbl01">
    <seq epub:type="table-row" epub:textref="ch007.xhtml#tbl01r01">
        <par epub:type="table-cell">…</par>
        <par epub:type="table-cell">…</par>
        <par epub:type="table-cell">…</par>
    </seq>
</seq>

You could also use a seq for the table cells if they contained complex data:

<seq epub:type="table-cell" epub:textref="ch007.xhtml#tbl01r01c01">
    <par>…</par>
    …
</seq>

But attention shouldn’t only be given to seq elements when it comes to applying semantics. Readers also benefit when par elements are identifiable, particularly for skipping:

<par id="note21" epub:type="note">
    <text src="notes.xhtml#c02note03"/>
    <audio src="audio/notes.mp4" clipBegin="0:14:23.146" clipEnd="0:15:11.744"/>
</par>

If all notes receive the semantic as in the above example, a reader could disable all note playback, ensuring the logical reading order is maintained. All secondary content that isn’t part of the logical reading order should be so identified so that it can be skipped.

This small extra effort to mark up structures and secondary content does a lot to make your content more accessible.