Summary

A page list and page break indicators allow users in mixed print-digital environments to coordinate their positions.

Techniques

Examples

Example 1 — Page list (EPUB-only)

The page list is a simple ordered list of links to the page break locations. It is identified by the epub:type attribute value page-list.

Note that the page list includes the hidden attribute so that the list is not presented to users if the table of contents is also included in the spine.

An ARIA role attribute (see the next example) is not necessary if the page list is always hidden from users or the EPUB navigation document is not included in the spine.

<nav epub:type="page-list" hidden="hidden">
 <ol>
   <li><a href="georgia.xhtml#page752">752</a></li>
   <li><a href="georgia.xhtml#page753">753</a></li>
   <li><a href="georgia.xhtml#page754">754</a></li>
   <li><a href="georgia.xhtml#page755">755</a></li>
   <li><a href="georgia.xhtml#page756">756</a></li>
   <li><a href="georgia.xhtml#page757">757</a></li>
   <li><a href="georgia.xhtml#page758">758</a></li>
 </ol>
</nav>
Example 2 — Page list (Web)

A page list for use on the Web generally is identified by the role attribute value doc-pagelist. The aria-label attribute is used to provide a title for the navigation element, but an explicit heading is also valid.

<nav role="doc-pagelist" aria-label="Page list">
 <ol>
   <li><a href="georgia.xhtml#page752">752</a></li>
   <li><a href="georgia.xhtml#page753">753</a></li>
   …
 </ol>
</nav>
Example 3 — Page break marker (inline)

An empty span element identifies a page break inside a block element. It is identified as a page break using the role attribute with the value doc-pagebreak. The aria-label attribute provides an announceable value.

<p>
   …
   <span
       role="doc-pagebreak"
       id="pg24"
       aria-label="24"/>
   …
</p>
Example 4 — Page break marker (block)

A div element identifies a page break where inline elements are not allowed. This example shows an example of a page number that is intended to be visible in the content.

<div role="doc-pagebreak" id="pg24">24</div>

Frequently Asked Questions

What if the order of my ebook doesn't exactly match the order of the print equivalent?

It is sometimes the case when converting to digital that front and back matter material gets shuffled around and/or omitted. These changes in content order are not unexpected, and users will understand that their ebooks may not be formatted exactly the same way as the print, and may not include all the print content.

If some content is ordered differently in the digital version, or not included, best practice is to make note of this in the accessibility summary for the publication.

Does the page number reflect the page that is ending or the page that is starting?

The page number always reflects the page that is starting.

Should the page break marker placement follow the print position?

No, page break markers are always placed at the start of the page's content, regardless of whether the page number is printed at the top or bottom of the page in the print edition. When a user jumps to a specific page, they want to jump to the start of the content for that page, not the end.

Should I include the page numbers as content or empty elements?

There are pros and cons to each approach.

If you include the page numbers as text content within a span or div, the pages will be more easily accessible to both sighted users and users using assistive technologies. This method has been employed in previous DAISY standards. The potential downside, however, is that mainstream user agents will not provide equivalent functionality to turn off unwanted content, forcing users to hear and view the page numbers.

Page numbers as empty elements are the more traditional mainstream approach, with anchor tags having served this function in the past. Using the aria-label attribute on an empty element, however, limits the users who will have access to the page number while reading.

Although user agents don't support toggling the visibility of page numbers, it is possible to provide the functionality using JavaScript. A script could be included in each document to show/hide the numbers.

Should I use the aria-label or title attribute for the page number?

The use of aria-label is recommended when the page number is not included as text content, but both attributes can be used. aria-label has higher precedence than title in the accessible name computation algorithm.

Where do I put a page number when the page break occurs in the middle of a list?

Lists often break across pages, with one item ending at the bottom of one and a new item starting at the top of the next. In these cases, it is not possible to locate the page number between the two list items, as it is not valid for a list to contain anything but list items.

The obvious solutions are to either insert the page number as the very last element in the item that ends the page:

<li>….<span
     epub:type="pagebreak"
     aria-label="24"/></li>
   <li>…</li>

or to place it as the very first element in the list item that starts the page

<li>….</li>
   <li><span
     epub:type="pagebreak"
     aria-label="24"/>…</li>

One practice to avoid is creating a new list item just for the page break. As page breaks are often not visible content, an empty list item will be confusing to all users and may alter the meaning of the list.

Where do I put the page break if a word is hyphenated across a page?

Place the page marker after the word. Do not retain the print hyphenation and insert the number in the middle of the word.

Can I use a tags for page numbers?

The a element has two specific uses defined in HTML5: for links when the href attribute is present, and for placeholder links when it is not (e.g., a link that might be active in another context or after some interaction by the user). As page breaks are not links, and are never intended to be activated as links, it is not recommended to use them for page break markers.

Explanation

If a reflowable publication is derived from a statically-paginated source, such as a print edition, including a page list allows users to coordinate positions. For example, a student using a digital edition in a class where her peers are using print books would be able to jump to the same pages during instruction.

The page list itself is a list of links to all the page breaks locations. User agents can use this list to provide automatic page jump functionality, or a user can access it directly to manually select the page they wish to go to.

If a digital publication is produced from the same workflow as a print document, page break locations should also be retained (although a page list can be created without explicit page break markers so long as there is some anchor for the link to go to). Page break locations can be added to the markup using span and div tags with a role attribute set to the value doc-pagebreak. To hide the page number from visual viewing, the aria-label attribute can be used to identify the number.

An id attribute has to be attached to each page break location to enable linking to the breaks.

Identifying the source of the pagination in the publication metadata is also important to help users determine the usability of the pagination (e.g., will it match the print edition being used in a class). This source is typically identified using a dc:source element.

Note: Some publishers include a page list and/or page break markers in digital publications without paginated equivalents. In these cases, the identifier of the current publication could be identified as the source to avoid confusion and/or the lack of a source could be noted in an accessibility summary.

EPUB 2

In EPUB 2, a page list is expressed using the pageList element in the NCX file. It is not possible to include a semantic that identifies page break locations in the content, as XHTML 1.1 does not support either the ARIA role or epub:type attributes.

EPUB 3

In EPUB 3, the page list is included in the navigation document and identified with the epub:type value page-list.

References