If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.

*Since any content that does not meet this success criterion can interfere with a user’s ability to use the whole page, all content on the Web page (whether it is used to meet other success criteria or not) must meet this success criterion. See Conformance Requirement 5: Non-Interference.

Testing & Remediation

How to test: Keyboard Navigation Open your website up and begin navigating with only the keyboard. Use the Tab and/or Shift + Tab keys to navigate through the page. Ensure you don't get stuck anywhere that requires you to use a mouse to exit. If your site utilizes any alerts, modal dialog boxes, dropdown menus, or other interactive elements, trigger those and verify that you can use the Tab and/or Shift + Tab keys continue to work. Also check to see if there is a way for the user to move away from the element (eg. a close control or using the ESC key). Be sure to test any 3rd party tools or content that your site is using, as they can be a common place where a keyboard trap happens. Screenreader Navigation Open your assistive technology of choice (JAWS, VoiceOver, etc) and follow the same steps as above. How to remediate: If you identify a place where a keyboard trap occurs, you'll need to do a little digging into your code to find what you need to fix. Generally speaking, keyboard traps can be avoided by by using a combination of semantic HTML, tabIndexaria attributes and some Javascript.

Questions and Answers

How do I change the order the elements on my page are given focus?

Nearly all elements can be given focus, and have their focus order changed using the 'tabindex' attribute. Elements on a page will be given focus in the order of their tab index. W3 Schools has a great explanation of tabindex here.

How do I navigate a website with my keyboard?

To navigate a website with the keyboard, you can start by hitting the tab key. You should see an indicator on the element that has focus. If it is a link, you can hit enter to go to it. While going forward through the tab keys is done with tab, going backwards can be done by hitting the shift key in addition to the tab key. When it comes to various input elements (radio buttons, select boxes), the arrow keys can be used on them once the element has focus.

How long does the accessibliity process take?

This question depends on a number of factors including size of site, desired level of conformance, your developer's understanding of accessibility techniques, etc. Accessible Web is here to help. Reach out and we can discuss your site specifically.