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:

				
					document.activeElement
				
			

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.

Get ANDI here

#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.

Conclusion

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!

Blog Categories

Search for a post

Blog Categories