Manage the focus for dynamically generated content
Handling focus in rich applications can be complex. It can raise some issues on the following cases:
- Adding / removing generated content triggered by a user action with page reloading
- Adding / removing dynamic content triggered by a user action without page reloading
- Special case: dynamic
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:
- Warn the user with a message like “Loading, please wait” and set the focus on it if there is loss of context.
- 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.
- 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:
- When adding content, alert the user that content has appeared if needed (e.g. for a sub-menu that can be unfolded, one can add the “unfold” label and put the
aria-haspopupproperty) and set the focus on the new content that has appeared (the container, a title, a link, a button...). If this content is susceptible to disappear (e.g. a dialogue), save the triggering element and set it back when the content disappears.
- When removing content, warn the user before they trigger the removal.
- Ensure that the focus moves in a logical and sequential way after adding / removing content.
Special case: dynamic
iframe is updated dynamically by a user action, you must:
- Inform the user of this update and update the
titleattribute to inform the user of this update.
- If necessary (the user must have access to the modified
iframeimmediately after the action that triggered the update), you must put the focus on the
- Ensure that the focus moves in a logical and sequential order inside the page and the