Lesson 17: Focus

Interactive elements like text fields, links, and buttons can be selected with your keyboard by default. Other elements, like plain text paragraphs, cannot. You can use HTML attributes to change these default behaviors.

Always make sure keyboard users can see where they’re selected on the page. You can customize the look of this selection box using CSS styles.

By default, the order you press the Tab key to navigate matches the order of the HTML code. Trying to change this order with custom styles or attributes usually makes the page harder to navigate.

Always test your pages by pressing the Tab key to move forward and pressing Shift and Tab to move backward.

Making elements interactive#

You can make any element focusable by adding the contenteditable or tabindex attributes. Focusable elements can be selected by clicking them, using the autofocus attribute, or using scripts.

The tabindex attribute#

The tabindex attribute takes a number. A negative number like -1 keeps the element out of the keyboard tab order but still lets you select it with scripts. A value of 0 adds the element to the natural keyboard tab order.

Avoid using positive numbers like 1 or higher. They force a manual order that is hard to manage and breaks natural navigation.

For custom buttons or icons, you might see code like this.

<div role="button" tabindex="0">Share</div>

The role="button" tells screen readers that this element behaves like a button. If you build a custom button, you’ll need to write scripts to handle keyboard clicks. Using a standard <button> tag instead is usually much easier because the browser handles all of this automatically.

You can also check which element is currently selected by using a script to query the active element.

The contenteditable attribute#

Setting contenteditable="true" makes an element editable and focusable. This lets users click into the element and type text directly on the page.

The autofocus attribute#

The autofocus attribute selects a form input as soon as the page loads. Avoid using this on normal pages because it can confuse screen reader users by scrolling past important instructions.

The main exception is modal popups. When a popup opens, you can use autofocus on the close button so the user can easily close it.

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>Close</button>
  </form>
</dialog>

Making elements inactive#

You can hide or disable interactive elements so keyboard users can’t select them. You can do this with a negative tabindex, the disabled attribute, or the inert attribute.

Negative tabindex#

Setting tabindex="-1" on a link or button stops keyboard users from tabbing to it. Mouse users can still click it, and the element is not fully disabled.

The disabled attribute#

The disabled attribute disables form inputs. Disabled controls cannot be clicked, typed in, or submitted with form data.

This attribute only applies to input tags, buttons, select dropdowns, text areas, and fieldsets. Disabling a fieldset disables all form controls inside it.

The inert attribute#

Adding the global inert attribute to a container disables the container and all of its children. They cannot be clicked, tabbed to, or read by screen readers. This is perfect for off-screen menus or hidden overlays.

Inert content doesn’t show any default visual changes. Make sure you apply CSS styles so users can see that the content is inactive.

Adapted from Learn HTML © Google and contributors, licensed under CC BY 4.0 (prose) and Apache 2.0 (code samples).