VGAR Navigation Requirements
Requirements
Navigation
Focus & Tab Order (NAV-WEB-002)
Tabindex and element focus
Keyboard users should be able to use the TAB key to move through the page in the same order as the visual presentation of the content. This TAB order should be established by the HTML structure of the page.
As the user moves through the page with the keyboard, a highly visible indication of keyboard focus should appear on each element as it receives focus.
Requirements
Visible Keyboard Focus (NAV-WEB-002-01)
A highly visible cue MUST always be presented to indicate keyboard focus. The focus indicator must maintain a minimum 3:1 contrast ratio against the background at all times to be considered highly visible. As the user navigates, they are consistently aware of the current position of keyboard focus and the focus indicator is not obscured by any content
Disabled Control Focus (NAV-WEB-002-02)
When a form field or control is disabled it SHOULD not receive keyboard focus. Doing this reinforces 1.4.1 Use of Color so that the only means of conveying that a control is disabled doesn't rely solely on color (Reference Here)
Default Tab Order (NAV-WEB-002-03)
Default tab order of focusable elements MUST not be overridden; the natural order of the HTML code SHOULD match the rendered page’s logical order.
Test Procedures
Keyboard (NAV-WEB-002-01-T)
Tab through the entire page and confirm that the keyboard focus indicator is always clearly visible; As the user navigates, they are consistently aware of the current position of keyboard focus and the focus indicator is not obscured by any content
Keyboard (NAV-WEB-002-02-T)
Tab through the entire page and confirm that disabled elements do not receive visible keyboard focus.
Keyboard (NAV-WEB-002-03-T)
Tab through the entire page and confirm that the tab order matches the logical order of the content.
Related Content
WCAG Success Criteria
W3C Techniques
- G59: Placing the interactive elements in an order that follows sequences and relationships within the content
- H4: Creating a logical tab order through links, form controls, and objects
- C27: Making the DOM order match the visual order
- SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element
- SCR37: Creating custom dialogs in a device independent way
- SCR27: Reordering page sections using the DOM
- G149: Using user interface components that are highlighted by the user agent when they receive focus
- C15: Using CSS to change the presentation of a user interface component when it receives focus
- G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over
- G195: Using an author-supplied, highly visible focus indicator
- SCR31: Using script to change the background color or border of the element with focus
Common Failures
- F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability
- F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigational order
- F55: Failure of Success Criterion 2.1.1, 2.4.7, and 3.2.1 due to using script to remove focus when focus is received
- F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator
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.