Page number context

[claireristow]

This is a low priority issue but it would be helpful to provide context for screen reader users regarding the page number. If we could add a "page" label in there somehow that would be great. As sighted users, we can see the design pattern and understand that it's a page number but screen reader users don't have that context.

Here are two options for how to add "page" for screen reader users only:

<div class="page-number">
      <div><span class="visually-hidden">Page: </span>1</div>
</div>

<div class="page-number">
      <div aria-label="Page: 1">1</div>
</div>

If it's not a heavy lift, maybe we could add context for how many pages there are in the ebook? So for example, 1/10 or something. Not required for a11y but I think it would improve the experience for all users!

Eg. https://ebooks.lullabot.com/ebooks/over-structured-content/chapters/chapter-1/