# 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)](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)

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

- [2.4.3 Focus Order](http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html)
- [2.4.7 Focus Visible](http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html)
- [2.4.11 Focus Not Obscured (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)

#### W3C Techniques

- [G59: Placing the interactive elements in an order that follows sequences and relationships within the content](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G59)
- [H4: Creating a logical tab order through links, form controls, and objects](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/H4)
- [C27: Making the DOM order match the visual order](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/C27)
- [SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/SCR26)
- [SCR37: Creating custom dialogs in a device independent way](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/SCR37)
- [SCR27: Reordering page sections using the DOM](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/SCR27)
- [G149: Using user interface components that are highlighted by the user agent when they receive focus](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G149)
- [C15: Using CSS to change the presentation of a user interface component when it receives focus](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/C15)
- [G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G165)
- [G195: Using an author-supplied, highly visible focus indicator](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G195)
- [SCR31: Using script to change the background color or border of the element with focus](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/SCR31)

#### 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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F44)
- [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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F85)
- [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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F55)
- [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](http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F78)