VGAR Navigation Requirements

VGAR Overview Requirements Test Procedures PDF Tools
Page

Navigation

Interaction
Content
Visual

Pagination (NAV-WEB-007)

Ensure pagination controls are accessible

Pagination controls must be identified as navigation elements by adding the attribute role=”navigation” to all pagination controls.

All pagination controls must also have the aria-label=”pagination”. If there are multiple pagination elements make sure they each have a unique label that contains the word pagination.

Requirements

Pagination is Navigation (NAV-WEB-007-01)

Pagination controls MUST have the attribute role=”navigation”.

<div id="paginationControl" role="navigation" aria-label="Pagination Navigation,
Current Page 2">
	<ul><li><a href="page-1" aria-label="Page 1">1</a></li>
		<li><a href="page-2" aria-label="Page 2" aria-current="page">2</a></li>
		<!-- other pagination links -->
	</ul>
</div>

Label Pagination (NAV-WEB-007-02)

Pagination controls MUST have the attribute aria-label=”Pagination”. If there are more than one pagination controls on a page, they MUST have unique labels, but still contain the word "Pagination".

<div id="searchControl" role="navigation" aria-label="Pagination for search results">
	<ul>
            <li><button>1</button></li>
           <li><button>2</button></li>
               ...
          </ul>
</div>

Test Procedures

Juicy Studio > ARIA > Document Landmarks (NAV-WEB-007-01-T)

Confirm that any pagination controls on the screen have role="navigation".

Screen reader Landmarks (NAV-WEB-007-02-T)

Cycle through each landmark role with each supported screen reader and confirm that any pagination controls have the word "Pagination" included in their aria-label.

Related Content

WCAG Success Criteria

W3C Techniques

Common Failures

These materials and steps outlined on this website are provided “AS IS” and are intended for illustrative purposes only. They should not be relied upon for marketing, legal, tax, financial, regulatory or other advice. You are responsible for the legal aspects of any implementation of the concepts illustrated herein. Further, Visa neither makes any warranty or representation as to the completeness or accuracy of this information, nor assumes any liability or responsibility that may result from reliance on such information.  You should not act or rely on such content without seeking the advice of a professional.  All brand names, logos and/or trademarks are the property of their respective owners, are used for identification purposes only, and do not necessarily imply product endorsement or affiliation with Visa.