Manage the focus for dynamically generated content

Introduction

Handling focus in rich applications can be complex. It can raise some issues on the following cases:

Content triggered by a user action with page reloading

This case where we reload the whole page just to modify part of this page should be avoided even if it was triggered by the user, as there is a loss of context and a partial asynchronous update would be more suitable.
If there is no way to do asynchronous loading, you must at least:

  1. Warn the user with a message like “Loading, please wait” and set the focus on it if there is loss of context.
  2. When reloading, put the focus on the generated content or when the content is removed put the focus on the triggering element (if it still exists after reload) or just set the focus right before the removed content.
  3. Ensure that the focus moves in a logical and sequential order when hiding or showing content.

Dynamic content triggered by a user action without page reloading (asynchronous)

It is the most common case: the page is not reloaded, only the DOM is modified by adding or removing content on a user action (for example, displaying the search results, displaying a dialogue...).
To make the new content accessible:

Special case: dynamic iframes

When an iframe is updated dynamically by a user action, you must: