Which HTML elements can receive focus?

Getting jquery serious with focus

Since we've dealt with the quick answer, let's dig a bit deeper. We'll look at some special cases and then let you in on some neat tricks to manage focusable elements like a pro.

Focusable odd ones out

• Think <area> tags with a href as clickable parts of an image map.
• Elements with the attribute contentEditable="true" tell the browser the user can edit them.
• Non-interactive elements can join the focus party if given a tabindex attribute or set as contentEditable.

Steering the focus to visibility

A defective lighthouse doesn't help sailors. Similarly, focusable elements should have visible focus:

/* The lifeguard of the web surfers */
:focus-visible {
  outline: 2px solid blue;
}


The good, the bad and the tabindex

• Positive tabindex values rearrange the tabbing order. It's like cutting in line, frowned upon, unless absolutely necessary.
• A negative tabindex (like tabindex="-1") is an unsung hero. It makes an element programmatically focusable but keeps it away from keyboard spotlight.
• Need to style interactive elements? Try this CSS sorcery:

/* Meet the popular kids */
[tabindex]:not([tabindex^="-"]):not([disabled]) {
  /* styles for elements not in detention */
}


Active focus and enhanced accessibility

Use the poignant document.activeElement property to find out which element currently holds the focus trophy. Also, ensuring a clear and logical tabbing order is your first step towards making your website more accessible.

Browser-specific quirks

Like the house rules at a friends place, each browser has its own quirks in handling focus. Always test your content on different browsers to ensure a smooth sail for all users.

Checking focus and enhancing accessibility

• document.activeElement returns the currently focused element. Basically, it tells you which element is the life of the party.
• For accessibility, ensuring a logical focus order and that focus state is visible, is like arranging good lighting and directions in your house party.

Focus Theory and Practical Application

Managing focus in complex web applications requires a combination of theory and practice. Here are some key areas to consider:

Using JavaScript to control focus

• The HTMLElement.focus() method is like a movie director. It directs the spotlight to specific elements in your HTML movie script.
• When introducing a new character (dynamically updating content), make sure they don't steal the spotlight (cause focus loss).

Pushing for Performance

• When adding a batch of new interactive elements, encouragement means making them focusable.
• MutationObserver is your backstage crew. It watches for changes and allows you to adjust focus accordingly.

Accessories and Styling of focusable elements

• You can use SASS or LESS to maintain the styling of your focus elements across your stylesheets.
• Accommodating users with motion sensitivities? Use @media (prefers-reduced-motion).