Two-Colour Focus Indicators

Series: 11ty Theme

tl;dr: WCAG is now encouraging a certain focus indicator style, with two colours appearing outside the normal size of the item.

The Web Content and Accessibility Guidelines has some documentation here that addresses making focus indicators more consistent and always easy to see.

One approach is to have the same focus style on the entire site. This might cause a problem in that the style will show up better in some contexts than in others, e.g. if it is a dark border, that won't show up as well in the menu with a dark background as it does in the white background main area.

Another approach is to have different styles depending on where it appears. This takes a bit more CSS work to define each possible combination, but on a lot of sites it is definitely doable. I have usually taken this approach. It does have a problem, too, though: it isn't as obvious that it is indicating focus when it is a different effect depending on where it appears. A user could start tabbing through the menu, seeing one effect, then get to the main content and suddenly it is a different effect. It might not be obvious that it is indicating the same thing - focus - because the user has started to think of one style as focus and now it is something else.

The solution is to have two colours, one light and one dark, across the entire site. That way, at least one of the two will stand out against any backdrop.

Here is the relatively simple version I have decided to implement on this site:

:root {
  --syntax-tab-size: 2;
  --ring-inner-width: 2px;
  --ring-gap: 2px;
  --ring-outer-width: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--near-black);
    --focus-bg: var(--near-black);
    --border-color: var(--white);
    --button-border: var(--white);
    --color: var(--white);
    --color-link: var(--white);
    --color-link-active: var(--grey);
    --ring-inner-color: var(--white);
    --ring-outer-color: var(--red);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --focus-bg: var(--white);
    --ring-inner-color: var(--blue);
    --ring-outer-color: var(--red);
  }
}

a:focus-visible,
a:hover,
button:focus-visible,
button:hover,
summary:focus-visible,
summary:hover,
input:focus-visible,
input:hover {
  text-decoration: none;
  box-shadow:
    0 0 0 var(--ring-inner-width) var(--ring-inner-color),
    0 0 0 calc(var(--ring-inner-width) + var(--ring-gap)) var(--focus-bg),
    0 0 0
      calc(var(--ring-inner-width) + var(--ring-gap) + var(--ring-outer-width))
      var(--ring-outer-color);
}

I tried with a variety of other combinations including border and outline. Border was a problem because that added to the size of the element and caused layout shift every time I hovered over it. Outline wasn't as bad, but it was harder to calculate where the outline layer falls in relation to the box-shadow layers. Having all three in box-shadow ended up being the cleanest solution to get what I wanted.

The other interesting question I explored here is whether focus and hover should have the same effect or a different one. On the one hand, if they were different, it does make it more clear if you are hovering or focus. On the other hand, for the most part, this doesn't really matter because you are probably only navigating either by keyboard or mouse, not both at the same time (other than when testing those effects maybe). Also, having the same effect for both has the benefits of less code to maintain and more consistency in experience. So, I decided to opt for having the same effect for both, which is now what I have always done in the past but seemed like the better decision.