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
- Tabindex
- 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:
document.activeElement
- Managing focus
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 Using javascript/jquery and CSS style
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 the top of that section:
- $(“.css-selector-for-html-element-containing-scrollbar”).scrollTop(0);
- this.document.querySelector(“.css-selector-for -html-element-containing-scrollbar”).scrollTo( 0, 0);
Note: The onload event mentioned above could be replaced with a click event if the scroll need to happen after a click on a link or button. There might be existing onload event for the window where the above commands could be added. But if you want to restrict the changes to the section in the context or if there is no existing onload event for that section then include a non-auto generated section. Inside that non-auto generated section include your jquery/javascript as needed. For example the following lines in such auto-generated section implies the element you want to focus is a text input which has a classname set as “link-element-to-focus input”:
<script>
this.document.querySelector(".link-element-to-focus input").focus();
</script>
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:
<script>var elementFocused = setTimeout(function(){this.document.querySelector(".element-to-be-focused label").focus(); }, 0);</script>
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>
- Restoring focus
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.
Important Note: Make sure if you can reach to desired element running the commands directly in the browser console before coding the jquery or javascript. This helps in understanding how the element appears in the DOM as well as saves time going back and forth while implementing.