Focus Reset and Guided Focus Management

Focus reset happens when an active (currently focused) element, gets removed form the DOM or the render tree. On focus reset, document.activeElement refers to relative top most node; i.e. body or iframe, leading to an unpleasant user experience for keyboard only users and screen reader users.

To mitigate the focus reset problem, one must implement guided focus management. As the name suggests, in guided focus management, one programmatically focuses the desired HTML element/node.

For example, when a modal is displayed, the modal container is focused, similarly, when a modal is dismissed, the element that had triggered the modal display, is focused.

When an HTML element/node is focused, screen reader generally reads out the content of the HTML element, which serves as a feed back to the non sighted users.

Focus reset

Chrome, Firefox, Safari handles focus reset gracefully. But in IE 11, on the focus reset, any subsequent tab press will focus the url bar, forcing a keyboard only user to tab through, from the beginning, once again.

Refer CodePen example - Focus Reset.

See the Pen Focus Reset by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

You might want to try the example with multiple screen readers, Safari/VoiceOver, IE/JAWS, Firefox/NVDA.

Guided Focus Management

In guided focus management, the container of the dynamic content is focused. So that screen reader can start reading the content of the dynamic container. It also serves as a guided context switch. Any subsequent tab press will focus the next focusable element within/after this context.

Most likely the container is a non-focusable element like div, section, article, span etc., thus it needs to have tabindex=-1 attribute, in order to be focused via JavaScript using HTMLElement.focus().

For more on tabindex=-1 please refer tabindex=-1 section of my earlier post tab order and tabindex.

Refer CodePen example - Guided Focus Management.

See the Pen Guided Focus Management by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

Does one always need guided focus management for dynamic content?

Not really, sometimes not required, sometimes you can’t.

Sometimes not required

Consider the CodePen example - Guided Focus Management - Sometimes not required

See the Pen Guided Focus Management - Sometimes not required by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

trigger node utilizes the aria-expanded attribute, which let’s the screen reader user be aware of the situation. As the expanded section immediately follows the trigger node, any subsequent tab will focus the first focusable element in the expanded section.

However, if the dynamic content appears before the trigger or replaces the trigger is replaced by the dynamic content, guided focus management is your best bet.

Consider the CodePen example - Show more/less

See the Pen Show more/less, better user experience by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

Sometimes you can’t

For example, an auto-complete or typeahead widget. Focus must remain in the textbox as the user is interacting with it.

In scenarios, where you can’t shift focus, you could use aria live region, aria-activedescendant to provide feedback to non-sighted users.

Refer the CodePen example - Typeahead

See the Pen Guided Focus Management - Sometimes you can't by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

Caveats

If a container has any of landmark roles associated, VoiceOver with Safari does not read out the dynamic content, though the container is focused, due to associated landmark role, at the time of writting this post.

Please refer CodePen example - Guided Focus Management - role=”main”

See the Pen Guided Focus Management - role="main" by Sarbbottam Bandyopadhyay (@sarbbottam) on CodePen.

Single Page Application

Screen reading software, on page load, starts reading the content of the page from the beginning. In Single Page Application, there is no page load after the initial one.

When the contents gets updated with out a page load, screen reading software has no clue by default. However utilizing guided focus management one can explicitly let the screen reading software read out the updates.

Guided focus management is higly desired in Single Page Applications.