IntroductionTab order is important for proper navigation through a keyboard interface. The keyboard tab order must be coordinated with the structure of the webpage. The default keyboard navigation order must be logical and intuitive. The tab order should follow the visual flow of the page: left to right, top to bottom – header first, then main navigation, then page navigation (if present), and finally the footer. Show
To adjust the tab order, the following methods can be applied using the tabindex attribute:
A tabindex= “1” or higher should NOT be used as it is a bad practice when it comes to accessibility because:
Why is Tab Order Important?Keyboard accessibility is one of the most important aspects of web accessibility. Not all users navigate the page with the mouse or a trackpad; some users only rely on keyboard to navigate. Many users with motor disabilities rely on a keyboard. Assistive technology users will also typically use a keyboard for navigation. In addition to traditional keyboards, some users may use a modified keyboards or other hardware that mimics the functionality of a keyboard. Keyboard tab order allows keyboard users to properly navigate a web page. If tab order is implemented correctly a webpage will read similar to a book to a keyboard user. When done incorrectly a keyboard user may miss out or become confused with the order of the web page. Back To Top Best PracticeThe best practices for keyboard tab order should include the following:
Back To Top ExamplesExample 1: Tab Order StructureThe image below shows the correct reading order on a page that has multiple navigation links on the side panels. Example 2: Tab Order VideoThe video below showcases what keyboard focus and a correct tab order look like. Example 3: TabindexThe example below shows how the tabindex can be used on an element that does not naturally gain tab focus. In this example, the <div> element is given the attribute tabindex with it’s value set to 0, meaning that it will gain focus in sequential keyboard navigation. This will not change the tab order and will only place the element in the logical navigation flow. Back To Top How to TestTesting the tab order requires a keyboard accessibility evaluation. The basic functions to use for a keyboard accessibility evaluation are:
In addition to these functions, there are several other standard keyboard shortcuts to be familiar with in order to conduct a keyboard test. Before continuing with this evaluation, review WebAim’s shortcuts table to understand how to navigate through a webpage with the keyboard. Once you understand the shortcuts, conduct the general test below: General Test
While using the Tab button, verify that:
If your page does not meet the requirements above, review the best practices and examples. Back To Top WebAIM Standard Keyboard Shortcuts TableWebaim provides a list of the standard shortcuts used to interact with a website via the keyboard. It is important to be familiar with these when conducting accessibility test for keyboard functionality. A summary of the most important Keystrokes in the Webaim Table is below:
Source: WebAIM: Keyboard Testing
WCAG 2.1 and ReferencesWhich shortcut key moves focus to the first field of the current record?Navigating between Fields and Records. Which control allows you to type an entry or choose an entry from a list?Use a combo box to enable a user to either type an entry or choose only one item from the list. The control displays the current value in the text box, regardless of how that value is entered.
Which button is used to open and close the navigation pane?To display the Navigation Pane in a desktop database, press F11. To hide the Navigation Pane, click. along the top of the Navigation Pane, or press F11.
Which of the following objects can you import from another Access database select all the options that apply?You can import tables, queries, forms, reports, macros, or modules from one Access database into your current database.
|