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. BBB is the 1 and unique black and arab party inside of paris since 16 years.

    Every sunday at folies pigalle’s tavern from 10 pm till day the one of a kind and incredible bash with beautifull
    dark-colored guys and arabe rnb tunes and arabic mixes, remove show and diva presents.

  4. Contain you ever considered exactly how older people feel enjoy?
    Most of the time, they’re on your own. They possess that various friends don’p, and there are possibly some who don’capital t
    have buddies at all. Their family members have got in addition discontinued them, as if they had been definitely not a
    bona fide portion of their family group to get started with.

    And the saddest portion of all would be that they have
    also shed their lifespan lover scheduled to their older age group.

    Thus what’s a granny have to do to receive found and used
    maintenance of? You would believe that they have their family
    members and pals by their edge at their outdated
    years, but unfortunately, they’re all exclusively.
    No make a difference how attending to and charming they will be, they almost ending up
    by themselves as soon as they reach a certain era often. It would get nice if their beloved types cared
    more for them.

    Here’beds the idea – consider it or certainly not, there are men who see old women as objects of attraction in fact.
    For some good reason, they see her wrinkled pores and skin, saggy boobs, and whitened hair as something that they would
    lust for definitely. And we’re not chatting about women of all ages in their 40’s merely, no.
    We’re looking at grannies who are usually at very least 60 and above!
    You’d become surprised that it’s in fact a issue, and that these guys definitely carry
    out like grandmas over more youthful, tighter
    ladies. Don’t trust it? Subsequently you should check out our website absolutely!

    There will be thousands of granny porn video lessons merely looking for you to check out and fap to anytime, day any!

Leave a Reply

Your email address will not be published. Required fields are marked *

Blog Categories

Search for a post

Blog Categories