Adding information to pagination test
Developers may wish to add additional context to a pagination module for screen reader users.
Test
Screen readers should:
- announce red content, which will be hidden
- announce the role of the list - as navigation
- announce disabled links as "disabled" - not critical
- announce selected link as "selected" - not critical
Example
Pagination Displaying 1 of 4 search result pages
Code sample
<div class="paginate"">
<p class="pull-left">
<span class="sr-only">Pagination</span>
Displaying <strong>1</strong> of 4 <span class="sr-only">search result</span> pages
</p>
<ul role="navigation" class="pagination pull-right">
<li class="disabled">
<a href="#" aria-disabled="true">
<span class="sr-only">Go to </span>
<span>First</span>
<span class="sr-only"> search result page</span>
</a>
</li>
<li class="disabled">
<a href="#" aria-disabled="true">
<span class="sr-only">Go to </span>
<span>Previous</span>
<span class="sr-only"> search result page</span>
</a>
</li>
<li class="active">
<a href="#" aria-selected="true">
<span class="sr-only">You are currently reading search result page</span> 1</a></li>
<li>
<a href="#">
<span class="sr-only">Go to search result page </span>
2
</a>
</li>
<li>
<a href="#">
<span class="sr-only">Go to search result page </span>
3
</a>
</li>
<li>
<a href="#">
<span class="sr-only">Go to search result page </span>
4
</a>
</li>
<li>
<a href="#">
<span class="sr-only">Go to </span>
<span>Next</span>
<span class="sr-only"> search result page</span>
</a>
</li>
<li>
<a href="#">
<span class="sr-only">Go to </span>
<span>Last</span>
<span class="sr-only"> search result page</span>
</a>
</li>
</ul>
</div>
OS | Browser | NVDA 2014.4 | JAWS 16 | VoiceOver |
---|---|---|---|---|
Windows 7 | IE 11 |
PASS - red content PASS - disabled PASS - selected |
PASS - red content PASS - disabled FAIL - selected |
|
Windows 7 | IE 8 |
PASS - red content PASS - disabled PASS - selected |
PASS - red content PASS - disabled FAIL - selected |
|
Windows 7 | Chrome 39 |
PASS - red content PASS - disabled PASS - selected |
PASS - red content PASS - disabled FAIL - selected |
|
Windows 7 | Firefox 34 |
PASS - red content PASS - disabled FAIL - selected |
PASS - red content PASS - disabled FAIL - selected |
|
OSX 10.9 | Chrome 39 |
PASS - red content PASS - disabled FAIL - selected |
||
OSX 10.9 | Firefox 34 |
PASS - red content PASS - disabled FAIL - selected |
||
OSX 10.9 | Safari 7 |
PASS - red content PASS - disabled FAIL - selected |