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!

Update 07-04-2022

Live Expressions

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.

Comments (Markdown Supported)

5 responses to “How to check what item is in focus when accessibility testing”

  1. Giovani says:

    Hi there everyone, I just added a comment system to my site. Feel free to leave a comment below if desired 🙂

  2. Grunet says:

    Oh I think if you use a Live Expression in Chromium browsers for document.activeElement you can avoid some of the “try to avoid clicking” annoyances if I’m remembering correctly.

    https://developer.chrome.com/docs/devtools/console/live-expressions/

    • Giovani Camara says:

      Completely Agree! Thanks for sharing Grunet. I’ve added an update at the bottom of the post.

  3. We are an extremely well respected Loyalty Escorts Company which provide
    escort services in London and the surrounding areas.

    We satisfaction our selves of experiencing in our community many of the most beautiful and attractive escorts in London. There are all sorts of escorts to pick from
    so you can remainder assure you will see what you are looking for.
    All of the Loyalty London Escorts are usually sophisticated and reliable, we have a becoming a
    member of proses and we ensure that all are beautiful, clever and excitement to be
    with. Almost every day Almost all photos are genuine
    and we have new Loyalty Women joining. All Loyalty Escorts
    are for sale to in call or out calls. Each of them have
    their very own apartments in main London where they
    can entertain you or they’ll be happy to meet you at your hotel
    or a dinner day or for just about any event you could go to!
    Like everybody, all girls will be always attempting to improve themselves and so
    therefor they would be very cheerful to listen to your comments and feel.
    Atlanta divorce attorneys girls page, there exists a review facility thus
    feel free to offer your fed back again and show it with
    everybody else.

  4. SFF says:

    The SFF Committee has transitioned its activities to become a
    SNIA (Storage Networking Field Association)
    TA (Engineering Affiliate)

Leave a Reply

Your email address will not be published.

Blog Categories

Search for a post

Blog Categories