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

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.