Dynamic focus

  • Component

Introduction

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 iframes

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, if needed, 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 popin...).

Addition of content

  1. If necessary, warn the user of the appearance of content (for example, for a submenu to unfold, we can add a text " unfold" and put a property aria-haspopup). If this content is likely to disappear (popin, for example), keep in mind the element triggering the appearance to restore focus when the disappearance.
  2. The new content must appear in the source code just after the triggering element (example: drop-down menu),
  3. The focus must be moved to one of the first elements of the new content that appeared (the container, a title, a link, a button ...).

Disappearance of content

  1. Notify the user, if necessary, before he triggers this disappearance,
  2. The focus must be returned to the triggering element or, if it is impossible, set the focus just before the content that has disappeared. For example, when closing a dialog box, the focus must be repositioned on the element that triggered the opening (button, link, ...).

In all cases, ensure that the focus path has remained logical and sequential after the appearance / disappearance of content.

Notify the user of the content changes

This is the main problem for any user, especially those who are visually, cognitively or with attention deficit disorder or small screens.

The user must be able to spot the appearance or disappearance of content and interact with it, if necessary.
We must therefore warn the user, and there are several solutions in case of content modifications:

  • By providing the user with informative text,
  • By managing the focus path,
  • By using ARIA.

See the sample drop-down menu to see the aria-haspopup attribute in practice.

Case of the Tabindex attribute

As much as possible, do not redefine the reading order by using tabindex attributes (with positive values).

In practice, the tabindex attribute should only be used with two values:

  • tabindex = "- 1": to prevent an element from receiving focus via the TAB key and allow it to receive focus via Javascript .
  • tabindex = "0": to make a focusable element via the TAB key and via Javascript.

Special case: dynamic iframes

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

  • Inform the user of this update and update the title attribute to inform the user of this update.
  • If necessary (the user must have access to the modified iframe immediately after the action that triggered the update), you must put the focus on the iframe tag.
  • Ensure that the focus moves in a logical and sequential order inside the page and the iframe.