Using Opera 10 With the Mac Screen Reader VoiceOver

Support for the Mac native screen reader VoiceOver was added to Opera in version 9.5. This is a quick overview explaining what you can access using VoiceOver with Opera. I'm hoping it will be of use to people with screen readers and developers debugging content alike.

Before you get started, if you're not already familiar with keyboard access in Opera, it's worth having a read of Opera accessibility: where we're at. I'll cover what you need to know here but article is good for background information.

Huge thanks go out to Victor Tsaran over at Yahoo! who gave me some great feedback while I was testing as well as Jon Gibbons (Dotjay) who rustled up an accessible table of VoiceOver commands and Alastair Campbell who pointed me to his overview of VoiceOver.

Setting up keyboard access on OSX

Mac is odd as it requires that you switch on full keyboard access and optimise it for access technology before you can truly get started. Fortunately however it's pretty simple to set up:

  1. Open System Preferences.
  2. Click Keyboard and Mouse.
  3. Select the Keyboard shortcuts tab.
  4. Ensure the "Turn full keyboard access on or off" option is checked.

Next:

  1. Open Universal Access within System Preferences.
  2. Check "Enable access for assistive devices".
System Preferences in Mac with Keyboard shortcuts selected and "Turn full keyboard access on or off" highlighted

Setting up keyboard access in Opera

Once Mac is set up you'll then need to check Opera is ready for keyboard access:

  1. Choose Opera > Preferences.
  2. Click Advanced.
  3. Select Shortcuts in the list of settings.
  4. Check the “Enable single-key shortcuts” checkbox.

Basic VoiceOver keyboard commands

With keyboard access set up in Mac and Opera you're ready to go. These are the basic VoiceOver commands you need to start interacting with the browser chrome and HTML content. Note that “VoiceOver keys” (or VO), means the Ctrl and Option keys pressed together.

  1. Toggle VoiceOver on or off - Cmd + F5.
  2. Navigate around the chrome - VO + Cmd + Shift and Arrow keys.
  3. Interact the HTML content - VO + Shift + down arrow (↓).
  4. Interact with the browser chrome - VO + Shift + up arrow (↑).
  5. Navigate content (Spatial Navigation, see below) - Shift+ Up, Down, Left or Right arrow.
  6. Tab through form elements - TAB / Shift+TAB.

Basic Opera keyboard commands

When using Opera you can do more than just tab linearly around the page as you would in other browsers. The TAB key only picks up form elements allowing you quick and easy access to forms by jumping over other content. To access all content on a web page you can then use the following:

  • Spatial Navigation - By holding down Shift + left, up, right and down arrows (← ↑ → ↓), you can move up down, left right and across the page. The pus side of this is that you don't have to laboriously tab though linear content.
  • Single key shortcuts - One you have enabled Single Key Shortcuts (see 'Setting up keyboard access in Opera' above) you can simply use 'S' and 'W' to move forward and backwards through headings and 'A' and 'Q' to do the same with links. Check out the navigating headings, links, page elements, images, tabs and zooming section below for more details.

The important thing to remember is that while VoiceOver has it's own keyboard commands for accessing headings and links often navigation works better if  Opera Single Key Shortcuts and Spatial Navigation is used. Single key shortcuts can also be customised either via the Preferences (In  Advanced > Shortcuts > Keyboard setup then Edit) or by changing the .ini files.

Preferences

Before you start browsing you'll most likely want to customise how you browse using Preferences.  Using VoiceOver you should be able to configure content, security, shortcuts, tabs etc using the following commands:

  • Open Preferences - Cmd+Comma (,).
  • Tab through all content (including switching between tabs) -  Ctrl+Alt+ Right, Left, Up or Down arrow keys.
  • To interact with a list -  Shift+Ctrl+Alt+Down.
  • Cycle through lists - Arrow keys.
  • Access  highlighted list item -  Ctrl+Alt+Right, Left, Up or Down arrow keys.
The Preferences screen showing Shortcuts highlighted in the Advanced tab with Enable Single Key Shortcuts selected

Reading text

You can read what you like when you like using the following keyboard commands:

  • Read content - VO + A.
  • Stop reading - Ctrl.
  • Navigate through paragraphs, headings, and elements - Single key shortcut 'D' (forward) or 'E' (backward).

Navigating headings, links, page elements, images, tabs and zooming

As mentioned above all elements can be accessed using either Spatial Navigation (Shift+Arrow keys) or single key shortcuts.

What follows is a list of main keyboard shortcuts. Where I have said "Navigate to get VO feedback" it means the function can be carried out but VoiceOver does not give feedback. Instead you need to start navigating in order to hear feedback.,

Function and commentsSingle-Key ShortcutComments
Switch to previous tab on tab bar1Navigate to get VO feedback
Switch to next tab on tab bar2Navigate to get VO feedback
Restore zoom to 100%6Navigate to get VO feedback
Zoom out by 100%7Navigate to get VO feedback
Zoom in by 100%8Navigate to get VO feedback
Zoom out by 10%9Navigate to get VO feedback
Zoom in by 10%0Navigate to get VO feedback
Cycle through links in pageA and QWorks as expected
Cycle through headers in pageS and WWorks as expected
Cycle through elements in pageD and ERecommended to hit D/E a second time to get VO feedback
Toggle between author mode and user modeShift + GNavigate to get VO feedback
Address bar history drop-downHWorks as expected
Load and display all imagesINavigate to get VO feedback
Toggle loading of imagesShift + INavigate to get VO feedback
ForwardXNavigate to get VO feedback
Fast forwardShift + XNavigate to get VO feedback
BackZNavigate to get VO feedback
RewindShift + ZNavigate to get VO feedback

I'm not familiar enough with VoiceOver as a technology but I'm told by our engineers that occasionally things lack feedback because it is hard to see what should be spoken and can be recognised. For example VoiceOver seems to have no concept of zoom level for instance.

I wonder also if this is because VoiceOver has been built with Safari in mind. Reading through the documentation you certainly get that impression. That said there is definitely more fine-tuning that we want to do our end.

Forms

As mentioned briefly above navigating forms on web pages is done using the Tab key.

  • Move forwards/backward through form elements - Tab / Shift+Tab
  • Select - Space bar
  • Activate - Enter

Item List Chooser

The Item List Chooser in VoiceOver literally lists - in a keyboard navigable popup - all items available in a page or via the chrome. This is great if you want to get an overview of everything that's going on.

Everything is listed alphabetically and by typing the first letter or more you'll automatically get taken to where you want. If you're a developer this is a good way of seeing what is and what isn't accessible.

  • List items in a page or in the chrome - VO + I
  • Navigate the lists - Arrow keys.
  • Escape - ESC
  • Return to the chrome - VO + Shift + up arrow (↑)
  • Return to HTML content -  VO+Shift+down arrow (↓)

WAI-ARIA

While Opera is working on WAI-ARIA support I haven't found much information regarding VoiceOver support of  WAI-ARIA. VoiceOver is not listed on the Codetalks ARIA support page however Steve Faulkner has done some ARIA role tests on MAC with Safari 4 beta, Firefox 3 (minefield) and  Opera 10 Alpha and results show that 14 or 50 ARIA roles are exposed on Mac (Firefox exposes 0 and Safari exposes 15).

Update 30 July, 09 - Alex Jurgensen has very kindly pointed out a set of ARIA test cases on Codetalks that cover VoiceOver. This gives a good overview of where VoiceOver is at however Opera is yet to be added.

It's early days for Opera and WAI-ARIA support so this is a section I will return to soon rather than give too much time to now.

Known quirks and feedback

You should be able to comfortably navigate most content in web pages if you are familiar with Opera's keyboard navigation setup and shortcuts.

There are some areas of the chrome that you can't reach however there are keyboard shortcuts to access all the main options and features you should need. I did find also that at times navigating out of HTML content was sticky so I'd switch to using VO + Shift + Cmd + Up arrow and it would take me up to a toolbar.

We are obviously always looking to improve on what we have so if you have feedback or questions please leave a comment and I'll answer as best I can.

Summary of keyboard shortcuts

Below is a list of the keyboard commands I've referenced in this article. I'll be adding in further comments based on feedback where necessary.

Function and commentsKeyboard commandComments
Toggle VoiceOver on / offCmd + F5NA
Interact with the HTML contentVO + Shift + down arrow (↓)NA
Interact with the browser chromeVO + Shift + up arrow (↑)NA
Navigate contentShift+ Up, Down, Left or Right arrowNA
Read contentVO + ANA
Stop reading contentCtrlNA
Move forwards/backward through form elementsTab / Shift+TabNA
SelectSpace barNA
ActivateEnterNA
List items in a page or in the chromeVO +  INA
Navigate the listsArrow keysNA
Switch to previous tab on tab bar1Navigate to get VO feedback
Switch to next tab on tab bar2Navigate to get VO feedback
Restore zoom to 100%6Navigate to get VO feedback
Zoom out by 100%7Navigate to get VO feedback
Zoom in by 100%8Navigate to get VO feedback
Zoom out by 10%9Navigate to get VO feedback
Zoom in by 10%0Navigate to get VO feedback
Cycle through links in pageA and QNA
Cycle through headers in pageS and WNA
Cycle through elements in pageD and ERecommended to hit D/E a second time to get VO feedback
Toggle between author mode and user modeShift + GNavigate to get VO feedback
Address bar history drop-downHNA
Load and display all imagesINavigate to get VO feedback
Toggle loading of imagesShift + INavigate to get VO feedback
ForwardXNavigate to get VO feedback
Fast forwardShift + XNavigate to get VO feedback
BackZNavigate to get VO feedback
RewindShift + ZNavigate to get VO feedback

Links and things