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.

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.

“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).

The macOS (Catalina) Settings window. The screenshot is highlighting the selection of the 'Use keyboard navigation to move focus between controls' check box.

The macOS Settings window pre-Catalina. The screenshot is highlighting the selection of the 'All controls' radio button.

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)

The Safari Preferences window. The screenshot is highlighting the selection of the '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)

The Chrome Settings page. The screenshot is highlighting the selection of the '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 The Firefox about:config add config menu. The screenshot is highlighting the selection of the New Integer configuration.
  3. Enter the preference name “accessibility.tabfocus”. Click OK. The Firefox about:config add config menu. The screenshot is highlighting entering accessibility.tabfocus as a preference name.
  4. Enter the number “7”. Click OK. The Firefox about:config add config dialog. The screenshot is highlighting entering 7 as a preference value.

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 The Firefox about:config right click menu. The screenshot is highlighting the selection of the Reset menu itme.
  4. Restart Firefox

Further reading

Edit on GitHub