Summary

Adding page break markers enables users of digital publications to discover the equivalent static page they are on.

Techniques

• Identify page break locations in the text. [[WCAG-1.3.1]]

Examples

<p>
   …
   <span
       role="doc-pagebreak"
       id="pg24"
       aria-label="24"/>
   …
</p>

<div role="doc-pagebreak" aria-label="page 24" 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.

Do not renumber the page break markers to be sequential when the digital order is different from the static source. Their purpose is to help users locate the static equivalent location.

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 role="doc-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 role="doc-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 put the page break inside a heading?

No, do not put page breaks inside headings. If you do this, the page number will become part of the accessible name for the section (i.e., it is calculated as part of the text content of the heading).

Put the page break number before the heading tag. If you are using an empty element for the page break (i.e., the value is in a title attribute as in example 1), moving the page break before the heading will not add add extra space to the layout.

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 digital publication is produced from the same workflow as a print document, page break locations should be retained. Retaining the page break locations, together with providing a page list, can allow assistive technologies and reading systems to announce the current page users are on and also allow users to move forward or backward by page.

Page break locations can be added to the markup using span and div tags with a role attribute set to the value doc-pagebreak.

<div role="doc-pagebreak" id="pg2">2</div>

To hide the page number from visual viewing, the aria-label attribute can be used to identify the number.

<span role="doc-pagebreak" id="pg5" aria-label="5"/>

The id attribute on the page break allows linking to the location from the page list.

Although page breaks have traditionally been retained for accessibility purposes (i.e., to allow users who must use a digital version to coordinate with those using print), it is becoming more common to find them as a general user aid. Digital-only publications (i.e., that do not have a statically paginated source), often include page break markers to make it easier for users to coordinate their position.

Related Links

• HTML — The nav element
• DPUB-ARIA — doc-pagebreak property
• EPUB 3 — pagebreak property