Jens Oliver Meiert

HTML Concepts: Focusable Areas

Post from May 30, 2022, filed under .

When you hear “focusable area,” what comes to your mind? Anchors and form elements that receive focus when being “tabbed through,” i.e., that are highlighted and that can be interacted with?

That’s not a bad description!—but also not a complete one.

As always, the HTML specification deserves having a closer look at. (The spec is dry and intimidating, but consider reading it, if you haven’t.)

A focusable area in the HTML specification’s section on focusable areas.

Figure: Focusable areas meta.

Focusable Areas

So according to the spec, what can be focusable areas?

Quite generally speaking, elements that have a tabindex and that are being rendered are focusable areas.

As so much here depends on tabindex, what is that attribute about?

tabindex

Its purpose is exactly what we’re covered here—to manage focusable areas.

Quoting the spec, the tabindex attribute “allows authors to make an element and regions that have the element as its DOM anchor be focusable areas, allow or prevent them from being sequentially focusable, and determine their relative ordering for sequential focus navigation.”

If the value of tabindex is omitted, the user agent determines whether the respective element is focusable.

A negative value makes an element focusable (but click-focusable, and not sequentially focusable, a difference the HTML spec also explains).

A value of 0 makes the element focusable.

A positive value (integer) makes the respective element focusable, but also defines the tab order, in that higher tabindex values mean elements to be focused later.

DOM Anchors

Yet this is not it; an important detail around focusable areas relates to DOM anchors, which determine the position of the focusable area in the DOM:

Each focusable area has a DOM anchor, which is a Node object that represents the position of the focusable area in the DOM. (When the focusable area is itself a Node, it is its own DOM anchor.) The DOM anchor is used in some APIs as a substitute for the focusable area when there is no other DOM object to represent the focusable area.

The focusable areas above each come with a particular DOM anchor; usually, the element itself, but for image maps, the img element, and for sub-widgets, the element it was created for.

❧ Focusable areas—more complex than they sound like, still not as hard in hindsight. Check out other aspects of HTML in the HTML concepts series!

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering lead and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

Read More

Have a look at the most popular posts, possibly including:

Looking for a way to comment? Comments have been disabled, unfortunately.

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2022 → HTML Concepts: Focusable Areas

Last update: May 30, 2022

Professional frontend developers produce valid HTML and CSS.