VGAR Navigation Requirements
Requirements
Navigation
Consistent Experience (NAV-WEB-006)
Provide a consistent experience for users
Consistent design is a good practice for all users, however a consistent experience is imperative for users with physical and cognitive disabilities. Inconsistencies in naming, labelling, and context cues can render your site impossible to use. Present components that repeat on multiple pages in the same relative order on every page. Use consistent labels, names, and text alternatives for content that has the same functionality.
Links that point to the same href must have the same link text and links with the same link text must point to the same href.
Requirements
Same Relative Order (NAV-WEB-006-01)
Components, like links, buttons, or contact forms, that appear on multiple pages MUST appear in the same relative order on every page.
Name Consistently (NAV-WEB-006-02)
Consistent labels, names, and text alternatives MUST be used for content that has the same functionality.
Consistent or Unique Link Text (NAV-WEB-006-03)
Links with the same HREF MUST have the same link text and vice versa, and links with different HREFs MUST have different link text and vice versa.
Keyboard Accessible Scrollable Divs (NAV-WEB-006-04)
Scrollable divs that do not contain any keyboard focusable content MUST have the following technique implemented for keyboard accessibility:
- The containing div MUST have a tabindex="0"
Test Procedures
Visual Inspection (NAV-WEB-006-01-T)
Confirm that components (links, buttons, contact forms, etc.) that appear on multiple pages appear in the same relative order on every page.
Screen reader (NAV-WEB-006-02-T)
Confirm that content with the same functionality has consistent labels, names, and text alternatives.
FAE > Navigation > Links (NAV-WEB-006-03-T)
Bring up the list of links with the Firefox Accessibility Extension (which also shows the HREF of links, unlike the JAWS links list) and sort by link text or HREF. Confirm that Links with the same HREF have the same link text and vice versa, and links with different HREFs have different link text and vice versa.
Visual Inspection (NAV-WEB-006-04-T)
Confirm that the scrollable div can be scrolled using keyboard only.
Related Content
WCAG Success Criteria
W3C Techniques
- G61: Presenting repeated components in the same relative order each time they appear
- G197: Using labels, names, and text alternatives consistently for content that has the same functionality
- ARIA8: Using aria-label for link purpose
- G91: Providing link text that describes the purpose of a link
- H30: Providing link text that describes the purpose of a link for anchor elements
- H24: Providing text alternatives for the area elements of image maps
- G189: Providing a control near the beginning of the web page that changes the link text
- SCR30: Using scripts to change the link text
- C7: Using CSS to hide a portion of the link text
- H2: Combining adjacent image and text links for the same resources
- H33: Supplementing link text with the title attribute
Common Failures
- F66: Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages
- F31: Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different web pages within a set of web pages
- F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text
- F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link
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.