Improve accessibility of pagination

[meganem]

What are best practices for making pagination controls accessible, such as on Course Listing pages?
Note: We are using out-of-the-box Drupal Views pager (slightly modified in theme preprocessor)
Example: https://undergrad.stanford.edu/programs/introsems/explore/course-listing

[meganem]

See comment from TPG: https://tpg.opquast.com/en/helpdesk/deliveries/790

[meganem]

As used on the example URL provided, the pagination control is OK but could be made better with a few small changes

The title attributes on the link, such as "Go to X" are superfluous and can be removed.
There is an offscreen header here of "pages" which is a good practice.
There should be some indication of how many total pages there are and what page the user is on
The current page is unlinked and consequently won't be in the tab order. This could be a little confusing on, for instance, page 4, where a screen reader would say "... Link 3, Link 5..." One approach would be to link the current page, adding some off screen text to indicate the current page like so

<a href="foo.html">
<span>Current Page</span>
 4</a>

Alternately, simply adding that offscreen span would work in the current implementation and simply adding tabindex to it. For instance:

<li class="pager-current first" tabindex="0"> 
<span>Current Page</span>1
</li>

The last 3 list items in the pagination should be given offscreen spans to convey the necessary information, ideally using icon fonts. For instance:

<li class="pager-ellipsis">…</li>

This creates a list item that consists only of an ellipsis. Visually this seems to imply that there are more than 5 pages available. Text to speech software, depending on configuration, may read this, leaving users guessing what that means

<li class="pager-next">
<a href="/programs/introsems/explore/course-listing?title=&amp;field_stanford_course_ger_value=&amp;page=1">&gt;</a>
</li> 

This creates a greater than sign and indicates that what will happen is the user will be taken to the next page

<li class="pager-last last">
<a href="/programs/introsems/explore/course-listing?title=&amp;field_stanford_course_ger_value=&amp;page=23">&gt;&gt;</a>
</li>

This creates two greater than signs and indicates that what will happen is the user will be taken to the last page.

Unfortunately in all of these last 3 list items there's no text-based representation of what these things mean. This may be a case for icon fonts and offscreen text. Depending upon the icon font chosen, you could modify this like so:

<li class="pager-next">
<a href="/programs/introsems/explore/course-listing?title=&amp;field_stanford_course_ger_value=&amp;page=1" data-icon="next-icon"><span>Next Page, Page 2</span></a>
</li>