Focus
Overview
Focus refers to which element on the screen is currently accepting input from the keyboard. For example, the browser could currently be focused on a <button>, <a>, or the browser address. Focus is often manipulated by tabbing through a page's tab order.
Some native HTML elements are automatically focusable, such as <input> or <button>, but not <div> or <img>.
Tab order
A web page's tab order specifies what can be focused with the keyboard and in what sequence (usually with the Tab key). A document's tab order can be manipulated by the tabindex attribute, which accepts any integer.
- A negative value (e.g. tabindex="-1") removes the element from the tab order, so that it cannot be focused through sequential keyboard navigation. These elements can still be focused with JavaScript or through a mouse click.
- A zero value (i.e. tabindex="0") places an element that is not normally focusable into the sequential tab order. If left unspecified, an interactive element will be given a zero tabindex.
- A positive value places an element at the front of the tab order, starting with 1, then 2, then 3, and so on.
Note | Avoid assigning positive values to tabindex where feasible, as the illogical sequence of navigation may be confusing. Instead, construct your document in a way that a user would sequentially interact with it.
Note | Most browsers will automatically assign accessibility functions to native HTML elements, which is why using semantic containers (e.g. <button>, <header>, <article>) is much more powerful and robust than non-specific containers (e.g. <span>, <div>).
Read more about native HTML elements.
Focus management
Skip to content
A common accessibility feature that provides extensive time efficiency for visually-impaired and other keyboard users is a Skip to Content button, which often is the first link on a page. After navigating to your site, it may be tedious for a keyboard user to tab through your header and other links when they only need article content.
Note | With an extra bit of effort, most accessibility features can be hidden from your typical user. A Skip to Content link can be hidden until the user first presses Tab, where it then animates down from the upper left corner of the browser (using CSS and JavaScript).
Off-screen content
Certain elements, like a link hidden in an off-screen menu, shouldn't be part of a document's tab order. Focusing off-screen content is confusing for sighted users and unintentional for keyboard users. To remove an element from the tab order, assign it a negative tabindex.
Single-page applications
Some web pages use technologies that allow data retrieval from a server, like Ajax. When new content is dynamically loaded from a server, keyboard users usually aren't notified. When dynamically loading content, ensure that you set focus to a relevant heading (or other element) at the start of the new content.
Resource | Building a Single Page Application? Check out this in-depth article from Trevor Pierce that delves into managing focus with dynamic content.
Focus styling
Most browsers signify focus with a focus ring, usually a feathered highlight. Focus rings are an incredibly necessary tool for users who are (1) not visually impaired and (2) use a keyboard for navigation. Rarely would a developer need to override a browser's focus styles, though if you do, use the :focus psuedo-class, like in the following code snippet:
button:focus {
outline: 2px solid red;
}Caution | Focus styles should be visually perceivable. Avoid manipulating an element's focus in CSS unless you are confident the focus ring will retain its visual function.