Posted: 25 Nov 2018 17:49 EST Last activity: 25 Nov 2018 22:21 EST
Issues with focusing on a web page and how to manage it
“Focus” in terms of web page refers to element on that page that receives keyboard input and sometimes user can control where they want to focus with a mouse click or tab. Web browser shows border around the focused element as focus indicator by default. Some elements are interactive (like text input, button, link etc.) and they are focusable by the order they appear in the DOM and some non-interactive elements (like div, image, label etc.) need developer intervention to get focused, if needed.
There are times when we want to focus on certain control or certain part of the page when loading that page. But that will not happen as expected under certain scenario or situation. Many things come into play when we think about it and here are some:
Order of execution in the DOM
Figuring out where the focus is currently
Sometimes we can’t see visibly where the focus is at a given time. In that case try to get the currently focused element using the following command from browser console and investigate the attributes on that element as the visibility of such element may have been set differently:
Mostly web page design itself should dictate on where to focus if there are interactive elements. But sometimes a page may have an interactive element at the end of a page (like a link or button) to navigate to next page, for example, a report display. In this case the focus by default shifts to that element at the end of the page which is not desirable. Here are some techniques to manage focusing on a page and can be used sparingly.
2.1.1 If you want to focus on an element of your interest make sure that element has unique id selector. Then use one of the following command inside an onload event for that section/window:
document.location.href = '#uniqueID’;
window.location = '#uniqueID’;
2.1.2 If you can identify the section that jumps to the end of the page then try one of the following code in an onload event to focus on thetop of that section:
2.1.3 If none of the above options worked for focusing on a web page here is another option which could be considered. Try adding an interactive element like link or text input in your section (either top of your section or end of your section as you wish) but do not display it by setting its CSS opacity style to 0.
Then set a class to be used for focusing in the “Presentation” tab under “Advanced Presentation Options” section. Use this class under the label in the “General” tab as follows:
The above code calls timeout event once in this case and sets the focus to the needed interactive element which is made not to display its content. If it takes up space while rendering makes its max-height style as 0.
2.2 Using tabindex
When there are many interactive elements in a page one can change the default tab order using “tabindex” attribute. Using this attribute gives the focus starting from its higher value. Element without this attribute or with attribute value of 0 gets focused later in order they appear in the web page. If the attribute value is -1 then that element will not be in the tab order or in the interactive elements but can be focused using its focus method. Good practice is to use tabindex attribute only when needed on interactive element. Better practice is to have the layout of the web page designed with the order of execution in mind.
Try out following code in jsfiddle or codepen and find out how tabindex works as you tab navigate on the rendered output page
<label tabindex="0">Do not think I get focused first<input type="text"></label>
<div>You will not visit me as I do not have tabindex</div>
<div tabindex="1">You will visit me first as I have higher tabindex</div>
<label tabindex="0">Guess what I am the last due to the order<input type="text"></label>
There are many situations where you would have to switch to a different window (like a modal dialog or overlay) while you want to stay in the same page after closing that window. But you may want to stay on the last focused element or even may be focus on a different element after closing that window. In both the cases store the element you want to focus before switching to a new window. On close of that window use the focus method on the previously stored element to focus on it.