Visa Accessibility - Aria & Skip To (NAV-003)

Navigation

Aria & Skip To (NAV-WEB-003)

Use ARIA Landmark Roles to create a navigable page layout along with HTML5 sections

Using ARIA landmark regions allows the user to move to each section of the page using a screen reader and a keyboard only. The landmark regions are used to appropriately identify the main, navigation, banner, and contentinfo sections of the content. All of these regions should be included on all pages so that the landmark structure is consistent.

All content on the page must be within one of these regions.

When HTML5 sections are used, they must not interfere with the heading structure of the page. Headings must take precedence over sections.

Requirements

Base ARIA Landmark Regions (NAV-WEB-003-01)

Each page MUST have (at a minimum) one of each of the following ARIA landmark regions:

Banner
Navigation
Main
Contentinfo

<div role="banner"><!-- Put company logo, etc. here --></div>
<div role="navigation"><!-- Put the navigation here --></div>
<div role="main"><!-- Put main content here --></div>
<div role="contentinfo"><!-- Put footer content here --></div>

Extra ARIA Landmark Regions (NAV-WEB-003-02)

Pages MUST also use the following ARIA landmark regions when needed:

complementary
search

<aside role="complementary">I am secondary information</aside>

<div role="search">
	<input type="search" id="searchSite" placeholder="Start Typing"/>
	<button id="doSearch">Search</button>
</div>

Keep All Content in Regions (NAV-WEB-003-03)

All rendered content MUST be within one or more (through nesting regions) of the following landmark regions, as appropriate: Main, Navigation, Banner, Contentinfo, Complementary, Search.

Label Multiple Landmarks (NAV-WEB-003-04)

If a page has multiple landmarks of the same type (e.g., Main Nav and Sub Nav), those regions MUST be labeled to facilitate differentiation using aria-label.

<div id="leftNav" role="navigation" aria-label="Primary">
<ul><li>...a list of links here...</div>
<div id="rightNav" role="navigation" aria-label="Secondary">
<ul><li>...a list of links here...</li></ul></div>

Skip to Login Link (NAV-WEB-003-05)

If a page has a “login” feature and focus is not automatically set to the login field on page load, the page MUST include a “skip to login” link as the first link on the page. The link MUST move focus to the login field and may be visually hidden until it has focus.

<button id="skipToLogin" class="screen-reader-only">Skip to Login</button>

$('#skipToLogin').on('focus', function(){
	$(this).removeClass('screen-reader-only');
});

$('#skipToLogin').click(function(){
	$('input#login').focus();
});

Skip to Content Link (NAV-WEB-003-06)

A “skip to content” link MUST be included on every page as the first link (or second if “skip to login” link is present) on the page. The link MUST skip to the main content of the page or the errors summary if present and may be visually hidden until it has focus.

<a href="#content" id="skipToContent" class="screen-reader-only">Skip to Content</a>
<!--banner, navigation, etc-->
<a name="content" class="screen-reader-only">Main Content Begins Here</a>

$('#skipToContent').on('focus', function(){
	$(this).removeClass('screen-reader-only');
});

$('#skipToContent').on('blur', function(){
	$(this).addClass('screen-reader-only');
});

Headings have Priority over Sections (NAV-WEB-003-07)

If HTML5 sections are used within the “Main” ARIA Landmark role, they MUST NOT interfere with a properly nested heading structure.

Test Procedures

Screen reader > Landmarks (NAV-WEB-003-01-T)

Bring up the list of Landmark roles and confirm that each page has (at a minimum) one of each of the following ARIA landmark regions:

Main
Navigation
Banner
Contentinfo

Screen reader > Landmarks (NAV-WEB-003-02-T)

Bring up the list of Landmark roles and confirm that when "aside" or search content is present on the page, the page includes the following ARIA landmark regions as needed:

Complementary
Search

Juicy Studio > ARIA > Document Landmarks (NAV-WEB-003-03-T)

Verify that all rendered content is within one or more (through nesting regions) of the following landmark regions, as appropriate: Main, Navigation, Banner, Contentinfo, Complementary, Search

Screen reader > Landmarks (NAV-WEB-003-04-T)

Bring up the list of Landmark roles and confirm that if the page has multiple landmarks of the same type (e.g., Main Nav and Sub Nav), those regions MUST be labeled so they can be differentiated by the user.

Keyboard (NAV-WEB-003-05-T)

If the page has a "login" feature available and focus is not automatically placed in the login control, Hit Tab after the page loads. Confirm that the first link on the page is "skip to login" - it may be visibly hidden until it receives focus.

Keyboard (NAV-WEB-003-06-T)

Hit Tab after the page loads. Confirm that the first or second link on the page is "skip to content" - it may be visibly hidden until it receives focus.

Headings Map (NAV-WEB-003-07-T)

Confirm that if HTML5 sections are used within the "Main" ARIA Landmark role they do not interfere with a properly nested heading structure.

VGAR Navigation Requirements