TEXT IN CAPS WILL BE LOCALISED
<nav role="navigation" aria-label="PAGENAVIGATION">
<ul class="pagination-list">
<li class="disabled">
<a>
<span class="icon-first" aria-hidden="true"></span>
</a>
</li>
<li class="disabled">
<a>
<span class="icon-previous" aria-hidden="true"></span>
</a>
</li>
<li class="active">
<a aria-current="true" arial-label="PAGE1">
1
</a>
</li>
<li>
<a title="2" href="#" class="pagenav" aria-label="GOTOPAGE2">
2
</a>
</li>
<li>
<a title="3" href="#" class="pagenav" aria-label="GOTOPAGE3">
3
</a>
</li>
<li>
<a title="4" href="#" class="pagenav" aria-label="GOTOPAGE4">
4
</a>
</li>
<li>
<a href="#" class="pagenav" aria-label="GOTONEXT">
<span class="icon-next" aria-hidden="true"></span>
</a>
</li>
<li>
<a href="#" class="pagenav" aria-label="GOTOEND">
<span class="icon-last" aria-hidden="true"></span>
</a>
</li>
</ul>
</nav>
Thinking about the disabled links, I'd still include an aria-label on the link, even though it doesn't have a href and isn't operable.
The reason for this is that even though this isn't a operable link, it is still content which is being presented to sighted users, so needs a text alternative.
There are two ways a screen reader user can encounter a link:
Focus mode - cycling though elements of a given type (links, in this case) by pressing TAB (or possibly other controls, varies between screen readers). Only operable links (with href) will be found this way;
<a>
elements without `href' will not be encountered this way.Browse mode - going though any content, one block|line|word at a time.
<a>
elements with text content (inc.aria-label
or nested<img alt>
) will be read out. Operable<a href>
links will be announced as links. Links withouthref
will have their text read out, but not announced as links, they're just regular sentence text in this case.So if you have a visible icon, you need a text fallback. The idea is that if a screen reader user finds "go to page 2" and is confused about not hearing about page one, they can still check adjacent non-link text to orient themselves and discover that the pager includes a disabled page one link.