Chapter 23: Focus Management

Focus management is important when handling widgets such as mega menus, tabs, treeviews etc. The modals and overlays on the page including the additional content insertion can only be accessible if the focus to the newly displayed content is focused logically.

modeless content

On activating a button or a link on the page, a new content may be inserted. This newly displayed content is not necessarily be the next element in the DOM order. Many developers think announcing an alert that says the new content is inserted in the page is sufficient for the users. In reality, how would a screen reader user know where has the new content inserted? Above the triggered element? Or after the triggered element? Same will be the problem for low vision person as the magnifier can focus only to a small portion of the screen. Focus management on to the first element of the newly displayed content will help the user to interact with the content quickly and without an effort to search it.
For example, activating a calendar icon at the date field invokes the calendar widget. Focus should be placed on the widget when it is displayed. User should be able to interact all the elements in the widget including the parent page. On closing the widget focus should return to the triggering element.

Modal widgets

On activating a button or a link on the page a modal window may be displayed. When the modal window is displayed, the parent page becomes blurred and cannot be interacted with. When such modal windows are displayed, screen reader and keyboard focus should be set to the first interactive element on the modal. Also ensure that the keyboard focus should not be navigated to the parent page until the user closes the modal. In addition, focus should be set to the triggering element on closing the modal.

mega menu, tree views and other complex widgets

Widgets such as mega menus and tree views are commonly observed in the websites of latest era. Focus management on this widgets is very crucial for screen reader and keyboard only users. In a mega menu and tree view or any similar widgets focus should be triggered to the elements as a single tabbable item, not to each individual items of the widget. For example, focus should be received to the mega menu as a single tabbable element. The individual menus should be navigated by left and right arrow keys. The sub menu items of each menu should be navigated with up and down arrow keys. Once the user press the tab key in a mega menu focus should be navigated away and move to the next focusable element of the page.
The use of custom components and making them accessible is discussed in the advanced accessibility course.