Standardizing Focus Styles with CSS Custom Properties

Standardizing Focus Styles With CSS Custom Properties

When it comes to web accessibility, providing clear and consistent focus styles is a must. It helps users navigate through the page more easily, and lets them know where their action will take them. With the introduction of CSS Custom Properties (aka CSS Variables) in modern browsers, it’s now easier than ever to standardize focus styles across different components and even pages.

A focus style consists of a combination of properties such as outline, color, shadow, etc. Traditionally, these have been specified separately in the CSS, and it was difficult to maintain consistency when making changes. With CSS Custom Properties, you can define these properties in one place so they are applied uniformly throughout your site.

For example, let’s say you want to have a “default” focus style for all elements on the page that are focusable. You can define this in your CSS file with the following code:

:root {
  --focus-outline-width: 3px;
  --focus-outline-style: solid;
  --focus-outline-color: #cde2f8;
  --focus-shadow: 0 0 3px #cde2f8;
}

*:focus {
  outline-width: var(--focus-outline-width);
  outline-style: var(--focus-outline-style);
  outline-color: var(--focus-outline-color);
  box-shadow: var(--focus-shadow);
}

In this case, we have defined four custom properties to control the width, style, color, and shadow of the focus styles. These properties can then be used to specify the focus styles of any element by simply setting the override the variable in the element’s style.

This approach also makes it easy to switch between different focus styles depending on the context. For example, if you want to use a different focus style for links or form inputs, all you need to do is define a different set of variables and apply them similarly.

The best part is that these styles are now defined in one place instead of having to be duplicated or overridden in multiple places, making it much easier to maintain and extend your focus styles.

It’s worth noting that the above approach only works in modern browsers that support the CSS Custom Properties feature. If you need to support older browsers, you can still use CSS preprocessors like SASS or LESS to achieve the same result.