GUIDELINES 1.4.13, 2.4.3, 2.4.7, 3.2.1
Focus discusses creating clear indicators for keyboard users. It is a control that would receive input from the keyboard or clipboard (an input item such as a field, checkbox, button, or link), to indicate where the user is on the page. This guideline goes over how to create a page with this in mind, as well as gives insights on how, when. and why you would want to include focus.
Who is impacted?
People who are primarily impacted are keyboard users. Those with mobility/motor impairments, cognitive disabilities, and visual impairments.
How to test?
The focus should be visible, and the order should be easy to follow. When a user tabs through the page, they should be able to easily identify where they are.
Additional content that appears or disappears in coordination with focus/hover can lead to accessibility issues. When receiving and removing pointer hover or keyboard focus triggers additional content to become visible, then the following must be true.
Dismissable: An option is available to dismiss additional content without moving the focus (unless that additional content communicates an input error or does not obscure/replace other content).
Hoverable: If pointer hover can trigger additional content, then the pointer can be moved over additional content without said content disappearing.
Persistent: Additional content remains visible until hover or focus trigger is removed, dismissed, or information is no longer valid.
Authors who cause additional content to appear or disappear must design the interaction so that users can perceive any additional content, and dismiss it without disrupting their experience.
If a web page can be navigated sequentially, focusable components receive focus in an order that preserves meaning and operability. When a user navigates through content, they should be met with information in an order that is consistent with the meaning of the content. This should be the case, especially for keyboard users.
When a user uses the keyboard tab function to navigate through a web page, the focus order should be preserved and followed properly as they move through content.
The way that navigation order is determined is defined by the content. If no scripting or tab index attributes are used, the navigation order is determined by the order that components appear in the content stream.
In some cases, there may be more than one order that preserves meaning and operability. Authors should carefully consider all users as they design their web pages, as if the order of content differs from a determined reading order, it may make it difficult to understand.
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is clearly visible. The reason for this is to help the user identify, out of multiple elements, which specific element has the keyboard focus. This focus indicator must not be time limited and must remain present the entire time an element is in focus.
When any component that can trigger an event receives focus, it should not initiate a change in context. Examples of this would include:
- Forms submitted automatically when a component receives focus
- New windows launched when a component receives focus
- Focus is changed to another component when that component receives focus