Tell your website and mobile apps to get ready for their closeups.
An improved visible focus function, until recently available only from the Chromium browser family, is now supported by multiple versions of other browsers, including Firefox. This means expanded accessibility and UX-enhancing customization opportunities for your specially abled and general audiences.
A little context: Visible focus is the outline that appears around buttons, form fields, widgets and other interactive elements when a user accesses them. The outline is also called a focus ring or indicator, and it helps users find their way around a page. Every browser has its own default focus indicator, recognizable by a unique color and/or shape.
The focus ring addresses Web Content Accessibility Guidelines (WCAG) for the internet and other public places by making interactive elements stand out clearly when they’re accessed. The guidelines apply to mouse and keyboard access.
In fact, as a general principle, any interactive element users can access with a mouse should also be accessible by keyboard to perform the same actions. All interactive elements accessed by keyboard users must have visible focus.
Although most online access is by mouse, a surprising number of specially abled and general users need or prefer a keyboard:
While visible focus is critical for keyboard accessibility, delivering it has been complicated. One huge problem: Developers were stuck with the browser’s default style and color, which could be a bad match for their brand’s look.
If they wanted to customize for a better match, they had to remove the default outlines–and sometimes they failed to replace them. That left keyboard users with a broken experience, and brands with negative customer satisfaction.
A collaboration between Google Chrome/Microsoft Edge in 2018 solved the problem. In the course of upgrading their focus indicator’s look for better contrast, the teams instituted a new process for Cascading Style Sheets (CSS), the styling language for the web. Called the :focus-visible pseudo-class, it uses a browser’s knowledge of user actions (heuristics) to determine whether the focus is coming from a keyboard or a mouse.
Now developers have options. They can hide the focus indicator for mouse users and make sure it is always visible for keyboard accessors. If they don’t want to use the browser’s default indicator, they can substitute their own branded version with confidence, because :focus-visible has new safeguards built in.
Until recently, only the Chromium browser family supported :focus-visible. But as of 2021, it can be enabled for multiple versions of a number of popular browsers. That’s good news for keyboard users and a great opportunity for businesses, which don’t usually know which browser their web visitors are using. Now you can style a customized focus indicator that keeps your look consistent across browsers.
The list of supported browsers will likely keep growing. Check the browser compatibility chart on the MDN Web Docs dedicated :focus-visibility page often.
Focus-Visible: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
MDN Web Docs: https://developer.mozilla.org/en-US/
How can you be sure your website and apps meet all accessibility guidelines and deliver seamless performance to each and every user? Accessibility testing is the key. We are experts in accessibility and have years of proven success within every industry. We’ll work with your developers to deliver the best, most brand-enhancing digital experience possible–every time.
