Pagination #a11y

readme.md

Assumption: Next button is most clicked button in a pagination control.

The trap is to layout the HTML to match the design of the control. With the next button last and the previous button first.

By reformatting the HTML we can make things easier for everyone:

• Visual users still see the classic paging (CSS takes care of that);
• Tab focus for keyboard users is immidiately brought to next button, no need to tab over all pages;
• Screenreader users have the same benefit and also hear which page is currently active;

Any suggestions on what more we could improve?

snippet.html

<nav role="navigation" aria-label="Pagination, currently on page 3">
  
  <h1 class="implicit">Pagination</h1>
  
  <a href="/">Next</a>
  
  <a href="/">Previous</a>
  
  <ul>
    <li><a href="/">Page 1</a></li>
    <li><a href="/">Page 2</a></li>
    <li><a href="/">Page 3</a></li>
    <li><a href="/">Page 4</a></li>
    <li><a href="/">Page 5</a></li>
  </ul>
  
</nav>