Safari, focus-visible and accessibility

Posted 14th February 2022 in Accessibility and CSS

Before embarking on my career in the web, there was one book I obsessed over: CSS: The Missing Manual. I learned the ‘LoVe HAte’ mnemonic (‘L’ for :link, ‘V’ for :visited, ‘H’ :hover, and ‘A’ for :active), but I don’t recall any mention of the :focus pseudo class.

In fact, it has always been common practice to simply remove focus outlines entirely, which has caused a big accessibility problems for people who use the keyboard to navigate, as highlighted in a recent blog post from Manuel Rego of the WebKit team:

The goal of the old :focus selector was to allow authors to better style the focus indicator to be in tune with their overall design choices … The net result, unfortunately, has been that the most common use of the :focus selector has been to remove indicators altogether. This avoids the “false positive” focus styles that cause complaints from many users. The problem is that removing focus styling breaks website accessibility, causing trouble for people navigating the page using the keyboard.

The :focus-visible pseudo-class intends to fix this, and Manuel continues:

Fortunately, a new CSS selector comes to the rescue, avoiding this kind of accessibility issue while providing the behavior web developers were looking for. The :focus-visible pseudo-class … allows web authors to style the focus indicator only if it would be drawn natively.

This is great news! Safari has long been the missing link here, but with the up-coming Safari 15.4, :focus-visible will have full support across modern browsers. So:

  • people can enjoy a focus outline-free experience as they click around their websites
  • keyboard users will still get the markers they need to navigate

Accessibility in your inbox

I send an accessibility-centric newsletter on the last day of every month, containing:

  • A roundup of the articles I’ve posted
  • A hot pick from my archives
  • Some interesting posts from around the web

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that’s not enough, have a look at the full list.

  1. Refining focus styles with focus-visible

    :focus-visible triggers only on keyboard focus; not on click. This can make our interfaces cleaner, but should it replace :focus completely?

  2. Alt text for CSS generated content

    There’s an interesting feature in Safari 17.4 that allows content added with CSS to have ‘alt’ text. I’m not sure how I feel about this.