Visa Accessibility - Focus & Tab Order (NAV-002)

VGAR Navigation Requirements

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.