The success criterion 2.4.3 Focus Order is the source for the focus management in WCAG 2.0 standards. Though the basic concept of focus management is to preserve meaning and operability when the user navigates the web page sequentially using the tab key, the following situations are also need to be taken care for a successful focus management.
- CSS is used to manipulate the placement of elements on the page
- Forms are used and errors are observed on submission.
- A modeless content is inserted in the page when the user activates an element.
- A modal is opened when the user activates an element.
- Widgets such as mega menu and tree views are used on the page.
CSS is used to manipulate the placement of elements on the page
Elements are navigated by the keyboard in the DOM order. The placement of such elements are usually placed in the same relative order how they appear. However in some cases the placement of such elements may also be manipulated using CSS. Eg: In a form First Name, Last Name, Gender and favorite color may be in sequential order for those who can see and use mouse. For those who use screen reader or keyboard only may receive the same elements as First name, Gender, Last name and favorite color. This is not a sequential order. This might be because, the elements are placed in that sequence in the DOM or due to the use of improper tabindex.
Forms are used and errors are observed on submission
Focus management or identification of the newly displayed content is crucial when forms are submitted. Either a success message or an error message is displayed on a form submission. If this is a generic message alerting a screen reader user about the message is sufficient. If the form throws specific error message for each field that failed validation, focus management to the top of the form or to the first field with error is a good practice. Not programmatically setting focus to the field in error is not a failure as per WCAG 2.0 standards but will definitely help screen reader and keyboard only users to correct the fields and re-submit the form comfortably.
A modeless content is inserted in the page when the user activates an element
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.
A modal is opened when the user activates an element on the page
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.
Widgets such as mega menu and tree views are used on the page
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.