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.

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.

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

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.