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>
I wasn't sure about using
aria-disabled
on links, but it turns out that several screen readers support it. I confirmed that the demos at http://maxdesign.com.au/jobs/sample-accessibility/05-forms/attribute-disabled.html also work with ChromeVox (which says "link, disabled").Caveats: your version of disabled links omit the
href
andaria-label
attributes:When an
<a>
lacks ahref
, it does not form a hyperlink. It will not be included in the keyboard tabbing sequence, and screen readers do not announce it as a link. (This is correct per HTML5.1) Omitting thearia-label
here also means it doesn't have a name.There are two ways you could improve your disabled pager links:
aria-disabled="true"
attribute. The first/previous links follow the "Example 1" pattern at https://www.w3.org/TR/html51/textlevel-semantics.html#the-a-element. This approach means it is completely absent for a screen reader.This version more closely resembles the demo at http://maxdesign.com.au/jobs/sample-accessibility/05-forms/attribute-disabled.html. Note that
aria-disabled="true"
only affects assistive tech. A sighted mouse user could still click the link, now that it has ahref
.