What is focus?
Focus is the current element being interacted with whether on a keyboard or a mouse. From an assistive technology perspective, the focus is basically a way of indicating, “you are currently interacting with an element.” From a visual standpoint, if you’ve ever pressed the “Tab” key on a website, it would be the element currently receiving a blue focus outline.
For example, when filling out a long checkout form, many people use the tab key to rapidly jump to the following form field when filling out a form on a page.
The following elements can receive focus:
- <a> tags with an href attribute
- Form controls and buttons (unless the element is disabled)
- Any element with a tabindex.
Why check focus?
The focus order of an application should always be managed. This means when building a component, considering where will focus go and if it is an effective placement is crucial. Focus management is one way to ensure you’re providing the best user experience to your website users.
Here are a few scenarios. Have you ever found yourself testing a component and suddenly focus ended up at the top of the page? This usually occurs when the focus is reset. Focus usually gets reset when something in the DOM is deleted, like when the button you activated disappears. This is very common on components such as an “upload” button where after it’s activated the button disappears and an image preview is shown instead. Where should focus be placed in this scenario?
What about scenarios when a dialog is opening and focus is placed on the wrong element? Most are often left wondering where focus is placed?
So, how do you check focus?
There are multiple ways to check focus a few ways that come to mind are.
#1 - Use Document.activeElement
Once you have the item you would like to test in focus. Open the developer tools, expand the console tab and type the following:
It’s crucial that you don’t touch anywhere on the page, otherwise, you won’t be able to check where the focus is placed accurately. Watch the video below to see an example of me using document.activeElement.
Video tutorial for Document.activeElement
#2 - Use ANDI
ANDI is an open-source project that can you help navigate a site and see where the focus is placed.
#3 - Use a screen reader
This unfortunately isn’t very fancy, but it’s a nice fallback assuming the first two options are unavailable. Using screen readers can help you hear what’s being announced and possibly help you find what’s in focus.
I hope these three steps to finding what item is in focus helps you in your accessibility endeavors. If you happen to have any additional ideas to see what’s in focus please do let me know via Linkedin!
Hi there everyone. I wanted to share an additional resource if you don’t want to type this manually each time. You could also use a live expression (Opens in a new window). Both options work, and you can use live expressions in addition to doing this manually.
Focus moves to the body
If you see the focus move to the body element, this is what we call a “focus reset.” That means the element that had focus was deleted or removed from the DOM, or focus wasn’t managed properly.