Aria-practices: Add pagination component

[ZoeBijl]

Would it be helpful if we added a pagination component/design pattern. It would be similar to the breadcrumb pattern. It could also have a single tab stop version.

Example markup:

<nav aria-label="pagination">
  <a href="/pages/1" rel="prev">Previous <span>page</span></a>
  <a href="/pages/1"><span>page</span> 1</a>
  <a href="/pages/2" aria-current="page"><span>page</span> 2</a>
  <a href="/pages/3"><span>page</span> 3</a>
  …
  <a href="/pages/10"><span>page</span> 10</a>
  <a href="/pages/3" rel="next">Next <span>page</span></a>
</nav>

Look forward to your feedback.

[LaurenceRLewis]

That is how I would mark-up a pagination so yes good idea.

[alastc]

I think it would help to have something to refer to.

Am I old fashioned in thinking that a fall-back grouping mechanism would be helpful?

E.g.

<nav aria-label="pagination">
  <ul>
    <li><a href="/pages/1">Previous</a></li>...

The links seem so naked on their own...

[ZoeBijl]

@alastc we could certainly add a list. We’ve a list in the breadcrumb example. If we do add one I think it should be an ordered list as the order is important in this case.

Didn’t add one to keep the code clean. I’m not sure there are any usability benefits to having the links inside a list. Had a discussion about this once with @LJWatson but I forgot what her conclusion was 😧.

[alastc]

I considered an ordered list, but often the link numbers don't match the list numbers, so I thought that could get confusing. E.g. "Item 1, previous; item 2, 1; item 3, 2, current page...".

I had a similar discussion with @LJWatson a few years back and I think the preference was for using lists as you get an immediate idea of how many items there are, and can skip over it. But that might be different in this context, so hope she can comment.

[LaurenceRLewis]

Perhaps consider using aria-posinset and aria-setsize. Not an ordered list which could become confusing.

[ZoeBijl]

@Decrepidos aria-posinset isn’t allowed on links.

[DavidMacDonald]

I think you want the word "page" in there also rather than a number, either aria-label, or offscreen text so it reads "page 1", "page 2." etc... to a screen reader.

[LaurenceRLewis]

@MichielBijl damn missed that bit 😁

[ZoeBijl]

@DavidMacDonald good point. I left it out because the thing is announced as “pagination” anyway. But perhaps it’s better to still add “page” to the links.

[DavidMacDonald]

A lot of times the user will tab into it, and won't hear the "pagination" bit, and some users won't even know what "pagination" is, it sounds weird in a screen reader, and not a common word.

[ZoeBijl]

@DavidMacDonald that makes a bunch of sense, added them to the example code.