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!
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:
- Go to “System Preferences”
- Go to the “Keyboard” settings
- Under the Shortcuts tab, change the radio setting to “All controls”
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.
- Open Safari
- Go to “Preferences” menu (Safari > Preferences)
- Go to the “Advanced” section
- Check “Press Tab to highlight each item on a webpage”, which is surprisingly not checked by default
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
- Open Firefox,
- Type “about:config” in the URL bar
- Search for “accessibility.tabfocus”, which most likely will return nothing
- To add it, right-click in the window, selected “New > Integer”, and set it to “7”
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
- Accessibility Learning Plan for Developers | Julie Grundy on Github
- The Anchor element | MDN Web Docs
- Enable Tab Key Navigation in Safari | OSX Daily
- Focus Ring! | A11ycasts
- Focusable Elements | ally.js
- Focusing on Focus Styles | Eric Baily @ CSS-Tricks
- How to allow keyboard focus of links in Firefox? | Stackoverflow