Technological Creativity and Interaction Design

How to fix the focus ring not showing on links on macos

Posted on 2019-03-04

Looking at how keyboard navigation is implemented is usually a way of revealing quickly if developers respected and implemented accessibility. Interactive elements (links, buttons, selects, etc.) usually are highlighted—called the focus ring—when focus is set them. This visually indicates to the user what element is ready to receive keyboard interaction.

While investigating the Apostrophe CMS boilerplate, I was curious—frustrated even—as of why <a> tags were not highlighted visually when focus was set onto them. My investigation revealed something quite interesting: default settings of macos and browsers were at fault!

macos

macos Settings, Keyboard, Shortcuts
macos Settings > Keyboard > Shortcuts

When they released their latest MacBook Pro, Apple boasted about their work around disabled people. Ironically, they added a touch screen—the touchbar—which made keyboard navigation awkward for many who relied on it.

Even more strange is that by default on a new machine, only text boxes and lists will be highlighted by a focus ring. While this may make sense for system UI components, it does not for browser content. Web design does not rely on a single standard for what qualifies as an interactive element, and browsers then seemingly hide links and other necessary components while navigating with the keyboard. In short, as a user tabs through the content in a web page, when focus is set on a link, there is no visual cue.

In order to fix a part of this, the machine’s system preferences must be changed:

Safari

Safari Accessibility Settings
Safari Accessibility Settings

Safari is also an offender to some level. Even after changing the settings described in the section above, additional settings must be updated in Safari’s preferences.

Firefox

Firefox Icon

It seems that Firefox on macos also has an issue with its default settings. The first part of this article helps fixing a part of this. To ensure the browser respects the settings

Google Chrome

Google Chrome Icon

As much as I dislike praising Google products, I must admit that Google Chrome worked properly out of the box, without changing any settings on macos. In a sense, this is ideal since, as I explained above, there is no unique standard on the web. By ensuring that interactive elements are highlighted when focus is set onto them, Chrome is actually handing accessibility correctly.

References and Recommended Readings


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.