VGAR Navigation Requirements

VGAR Overview Requirements Test Procedures PDF Tools
Page

Navigation

Interaction
Content
Visual

Progress Steps (NAV-WEB-008)

Indicate progress / wizard steps to screen readers

When a wizard or process interaction is presented it must also provide an indication of the user’s progress through wizard or process steps.

The indicator must provide context and status to screen readers and the current step in the process must be included in the page title and H1 level heading. Without this essential context cue, a screen reader user has no good way of knowing where they are in a process. A user with a cognitive disability that affects memory might not easily remember their place in a workflow.

Requirements

Wizard Context Provided (NAV-WEB-008-01)

Process or Wizard Step Indicators MUST provide context and status to screen readers (e.g., "Current Step: Add Card, Step 2 of 4").

.wizard-step span {
	position: absolute;
	top:-9999px !important;
	left:-9999px !important;
}
		
<div>
	<div id="step1" class="wizard-step">
		<span>Completed:</span> Enter Card Info <span>(Step 1 of 2)</span>
	</div>
	<div id="step2" class="wizard-step">
		<span>Current Step:</span> Review <span>(Step 2 of 2)</span>
	</div>
</div>

Wizard Info in Title / h1 (NAV-WEB-008-02)

Any Process or Wizard Step Indicator information MUST be included in the page title and H1.

<head>
	<title>Visa Payment Flow - Current Step: Review (Step 2 of 2)</title>
</head>

Test Procedures

Screen reader (NAV-WEB-008-01-T)

Read any process or Wizard Step Indicators with each supported screen reader and confirm that each provides context and status to screen readers (e.g., "Current Step: Add Card, Step 2 of 4").

FAE > Navigation > Title (NAV-WEB-008-02-T)

Confirm that any process or wizard step indicator information, if present, is included in the page title and H1.

Related Content

WCAG Success Criteria

W3C Techniques

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.