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>
Sorry, I conflated 2 things....
The main point: I meant that
<nav role=pagination>
is gibberish. Replace it with<nav role=navigation>
.An aside: note that validators (and purists) will fire a warning telling you that
role="navigation"
is redundant on<nav>
elements. Ignore them. It's still preferable to keep the belt-and-braces<nav role="navigation">
, because Internet Explorer needs it. Ifrole="navigation"
is omitted, IE will not recognize it as an ARIA Landmark Region. (See https://www.w3.org/TR/html51/dom.html#do-not-set - the relevant thing is that IE does not conform to HTML5.1 implicit ARIA semantics bit. The good news is that MSEdge does.)