Browser keyboard navigation in macOS

In order to allow for full keyboard navigation of all focusable interactive elements in macOS Safari and Firefox, you'll need to make sure the following keyboard settings are adjusted.

By default, Apple computers have an operating system (OS) level setting that limits the Tab key to "Text boxes and lists only". This can be confusing, if not frustrating, for those unaware of this setting and expect keyboard focus to be similar to navigating on a Windows machine.

"All Controls" in macOS

Enable "All Controls" in macOS Settings

In the macOS settings, the "All Controls" setting must be enabled for all focusable interactive elements (for instance, links) to be keyboard accessible via the Tab key alone. Enable this feature by going to:

1. System Preferences
2. Keyboard
3. Shortcuts (tab)
4. macOS Catalina: Select "Use keyboard navigation to move focus between controls" (check box). macOS pre-Catalina: Select "All controls" (radio button). Alternatively, in any macOS version, press Control + F7 (if you're on a laptop you may also need to press the fn key).

After updating this setting you will need to quit and restart your browsers to have the update take effect.

Enable All Controls via Terminal

Run the following command in Terminal to enable keyboard control at the macOS level. This command can be helpful if your organization uses a config script for new employee machines!

defaults write NSGlobalDomain AppleKeyboardUIMode -int 3

Browser settings to enable full keyboard navigation

Highlight each item in Safari

Additionally for Safari, you can enable the "highlighting of each item" setting in order to use the Tab key to navigate page controls. Enable this feature by going to Safari's:

1. Preferences
2. Advanced (tab)
3. Check "Press Tab to highlight each item on a webpage" (checkbox)

With these changed settings in place you should now be able to use the Tab key to navigate around web pages as expected.

Highlight each item in Chrome

Just like in Safari, a similar setting is available in Chrome. Verify that this feature is enabled by going to Chrome's:

1. Settings
2. Appearance
3. Check "Pressing Tab on a webpage highlights links, as well as form fields" (switch)

Highlight each item in Firefox

Unlike Safari and Chrome, Firefox does not have an option in the settings page for enabling full keyboard control. However, when the "All Controls" setting is enabled in macOS, Firefox may still not send focus to links using the tab key. There is a way to enable keyboard focus of links using advanced configuration options.

Note: When accessibility.tabfocus is set, some forms created with non-semantic HTML elements can behave oddly. For example, the GitHub Gist code editor. If non-semantic HTML elements are inexplicably inaccessible, try resetting this option.

To enable

1. Open a new tab and go to about:config
2. Right Click and select New > Integer
3. Enter the preference name accessibility.tabfocus. Click OK.
4. Enter the number 7. Click OK.

To reset

1. Open a new tab and go to about:config
2. Find the accessibility.tabfocus preference row. (tip: use search field at top of page)
3. Right Click on the row and select Reset
4. Restart Firefox

This post was last updated on November 15, 2019 by Erin Olmon.

Further reading

• Tabbing Links in OSX/macOS Scott O'Hara 2014
• Apple’s Inaccessibility Web Axe 2015
• How to allow keyboard focus of links in Firefox? (macOS) Stack Overflow 2012
• accessibility.tabfocus MDN Web Docs 2019