Back to home

Adding information to pagination test

Developers may wish to add additional context to a pagination module for screen reader users.

Test

Screen readers should:

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>
Support chart
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

Bottom of page - Back to home