Keyboard focus is lost or misplaced due to user interaction or content update
focus-lost
Rule
The focus MUST be purposely moved or set (via JavaScript) onto the appropriate element when the user's action requires a change of context or location for effective keyboard or touch interaction.
Background
One of the biggest challenges when creating rich web interfaces using JavaScript is the management of focus when new content or controls are added or removed from the page. The presentation or modification of content on the screen may require that the user interact with -or at the very least, take notice of - the new or changed content. It is important to have a clear indication of page content that has been updated. This allows the user to understand the change and also allows a keyboard user to interact with any new content.
How to Fix
Fix this issue by explicitly placing focus on a logical element when content is removed, refreshed, or added, for example:
- For content added to the screen in reaction to a user-fired event, focus should be shifted to the new content - such as in single page applications.
- For content removed from the screen in reaction to a user-fired event, focus should be shifted to the next logical place in the interaction.