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.

Notes from Inclusive Mobility Talk

As promised, here are the notes I made in preparation for my Inclusive Mobility Core Conversation at SXSWi 2011. I didn’t need to rely on these too much as people actively participated and asked questions! General: Talk is about making mobile applications accessible for ALL. Don’t want to just talk about people with disabilities because […]

SXSW – Final Interactive Day

I supported my friends at two accessibility talks today. First was Accessibility for the Visually Impaired: Ground Breaking New Technologies. This featured Michael Cooper from the W3C who I worked with when I was on the Web Content Accessibility Guidelines working group. He was asked questions by the panel moderator, Genevieve Wilkins. Michael did a […]