Insights Blog Strategic Accessibility: How to Unleash the Power of Your Browsers to Ensure Great Customer Experience


Strategic Accessibility: How to Unleash the Power of Your Browsers to Ensure Great Customer Experience

Customer experience is the single most important factor of modern businesses, and especially digital businesses. Learn how browsers can help you ensure a great UX.

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.  

Ring around the Focus  

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.  

Who Uses a Keyboard, Anyway?  

Although most online access is by mouse, a surprising number of specially abled and general users need or prefer a keyboard:        

  • Anyone who uses a screen reader. This encompasses such diverse groups as visually impaired people, those with dyslexia and other cognitive disorders, and generally abled users learning a new language.      
  • People whose motor challenges make them unable to use a mouse and instead interact online with a mouth stick or a switch that can simulate a keyboard. 
  • Web developers, insurance and financial professionals, administrators–anyone who works on the web for long periods at a stretch, especially entering code and data.    
  • Users temporarily without a mouse (broken, misplaced) or who simply prefer tabbing through form fields.    

Solution: A Touch of (Pseudo) Class     

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.  

New Options for Cross-Browser Branding  

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.   


MDN Web Docs: 

Accessibility Testing to the Rescue

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.  

quality engineering free assessment