When using a keyboard to navigate through the web page, ensure that the order that elements receive focus makes sense considering the visual layout. Most elements should be given focus in a left-to-right, top-to-bottom order. If you have columns, focus should navigate through one whole column before moving on to the next one.
Failures should be marked in situations where the focus order jumps around the page without much explanation, or in situations where the keyboard focus doesn't follow an expected keyboard navigation pattern. Certain design patterns have different expected behaviors for keyboard focus. Make sure that the following elements follow these rules.
Tablists
A tablist is a grouping of controls that swaps content in a singular section of the page. (An accordion by contrast opens content in its own section, which can be expanded or collapsed.)
A tablist should be treated as one group. When you keyboard navigate into a tablist, the focus should be sent to the entire grouping of tabs, and arrow keys should then be utilized to switch between each different tab. After selecting the tab the user wants to interact with, the next press of the TAB key should send the user into the tab-panel content.
If a tablist forces the user to use the TAB key to navigate through the entire list of tabs before accessing the tab-panel content, or if the user is forced to navigate through each tab's content before moving to the next tab, it is a failure.
Accordion
Accordions should not open automatically. Each accordion should only open when explicitly told to by the user. Furthermore, the contents of the accordion should not receive any keyboard focus until opened.
Carousel/Slider
A carousel/slider/gallery should send focus to the active slide's contents first. Then, keyboard focus should be sent to the controls. Usually this would be a pair of previous and next buttons, followed by direct navigation buttons if applicable.
If previous or next buttons are used, the focus should remain on the previous and next buttons respectively (aria-live should announce the slide contents to a screen reader). If a direct navigation button is activated, the focus should be directed back to the slide contents immediately.
Tabindex
When you are using keyboard navigation, take note of any situations where the focus order does not follow an expected path (e.g., the focus is jumping up and down the page or between multiple different areas of the page).
When keyboard focus is not in a logical order, evaluate the HTML markup to see if tabindex values (specifically positive values of 1 or higher) are used. If positive tabindex values are used (which overrides the tab order and causes poor keyboard focus order), then it would be considered a failure of this criterion.
