Keyboard Navigation in Mac Browsers

Application Tab Key Navigation

There are a few settings to be aware of when using the keyboard on a Mac. There is a Keyboard System Preference to allow full tab key navigation. The setting is in the keyboard pane at the bottom of the shortcuts tab panel. It is labeled, “Full Keyboard Access: In windows and dialogs, press Tab to move keyboard focus between:”. There are two radio options, “Text boxes and lists only” and “All Controls”. Select “All controls” to use the tab key to access all of the controls in an application user interface and dialogs.

Systems Preferences keyboard shortcuts panel with Full Keyboard Access section highlighted

Safari Content Tab Key Navigation

Just changing this setting used to be enough to allow tab key navigation in browser content as well but since OS X Mountain Lion, there is an additional setting in Safari preferences. Open Safari preferences and navigate to the Advanced Panel. Under the Accessibility section check the checkbox to “Press tab to highlight each item on a webpage”. This will allow navigation to all controls and links on the page by pressing the tab key.

Advanced pane in Safari preferences with Accessibility section highlighted

If you want Tab key navigation within the Safari user interface AND within the browser content you must enable both preferences, the System Preference Keyboard setting and the Safari Advanced Accessibility Preference.

Chrome Content Tab Key Navigation

There is also a setting in Chrome to allow tab key navigation to links and controls. Open Settings either via the menus or by entering chrome://settings in the navigation field. Scroll to the bottom of the page and select the “show advanced settings..” link. Then navigate to Web content section and select the checkbox labeled, “Pressing Tab on a webpage highlights links as well as form fields”.

Web Content section of Chrome advanced settings highlighted

Like in Safari, if you want tab key navigation within the Chrome user interface AND within the browser content you must enable both preferences, the System Preference Keyboard setting and the Chrome advanced Web content setting.

Firefox Content Tab Key Navigation

Firefox does not have a separate option for tab key navigation to links and form controls. In Firefox the OS X system preference takes precedence. Thus in Firefox you must have the OS X System Preference for “All Controls” selected in order for tab key navigation to work within the content and the user interface.

Firefox does have a preference in the Accessibility section of the General tab of the Accessibility pane to, “Always use the cursor keys to navigate within pages”. When this is checked the arrow keys can be used to navigate through the content line by line and character by character. However, this setting has no effect unless the OS X System Preference for Keyboard shortcuts is also set to “All Controls”.

VoiceOver Content Navigation in Safari

The OS X System preference doesn’t really affect how VoiceOver works. With the Safari preference to “Press tab to highlight each item on a webpage” selected the tab key navigation to links will work with or without VoiceOver running. However, with VoiceOver the user can use the VoiceOver key + arrows to navigate within HTML content. The VoiceOver key navigation works irregardless of the OS X or Safari preference.

Conclusion

In Safari and Chrome the browser preference for tab key navigation takes precedence. In Firefox the user must modify the OS X system preference for tab key navigation to links and controls within the content. VoiceOver navigation within HTML content via the VoiceOver + arrow keys works no matter how the OS X system preference is set.


About Becka11y

Web Accessibility Architect at IBM. Have worked on various open source projects including Dojo, Apache Cordova/PhoneGap, and Readium

12 comments:

  1. I’m not sure what you mean? I see the + icon at the far right of the tab list. Focusing and activating that will open a new tab (I could do it via the keyboard). There is also the command+t shortcut to open a new tab.

  2. The defaults in Safari and Chrome on the Mac are NOT to navigate to links with the Tab key. Thus, in Safari and Chrome tab navigation to links does not work by default. Firefox has no specific setting for tab navigation to links and it will follow the System Properties settings which defaults to “Text Boxes and Lists only”.

Leave a Reply

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