Using Opera 10 Beta with 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 comments Single-Key Shortcut Comments
Switch to previous tab on tab bar 1 Navigate to get VO feedback
Switch to next tab on tab bar 2 Navigate to get VO feedback
Restore zoom to 100% 6 Navigate to get VO feedback
Zoom out by 100% 7 Navigate to get VO feedback
Zoom in by 100% 8 Navigate to get VO feedback
Zoom out by 10% 9 Navigate to get VO feedback
Zoom in by 10% 0 Navigate to get VO feedback
Cycle through links in page A and Q Works as expected
Cycle through headers in page S and W Works as expected
Cycle through elements in page D and E Recommended to hit D/E a second time to get VO feedback
Toggle between author mode and user mode Shift + G Navigate to get VO feedback
Address bar history drop-down H Works as expected
Load and display all images I Navigate to get VO feedback
Toggle loading of images Shift + I Navigate to get VO feedback
Forward X Navigate to get VO feedback
Fast forward Shift + X Navigate to get VO feedback
Back Z Navigate to get VO feedback
Rewind Shift + Z Navigate 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 comments Keyboard command Comments
Toggle VoiceOver on / off Cmd + F5
Interact with the HTML content VO + Shift + down arrow (↓)
Interact with the browser chrome VO + Shift + up arrow (↑)
Navigate content Shift+ Up, Down, Left or Right arrow
Read content VO + A
Stop reading content Ctrl
Move forwards/backward through form elements Tab / Shift+Tab
Select Space bar
Activate Enter
List items in a page or in the chrome VO +  I
Navigate the lists Arrow keys
Switch to previous tab on tab bar 1 Navigate to get VO feedback
Switch to next tab on tab bar 2 Navigate to get VO feedback
Restore zoom to 100% 6 Navigate to get VO feedback
Zoom out by 100% 7 Navigate to get VO feedback
Zoom in by 100% 8 Navigate to get VO feedback
Zoom out by 10% 9 Navigate to get VO feedback
Zoom in by 10% 0 Navigate to get VO feedback
Cycle through links in page A and Q
Cycle through headers in page S and W
Cycle through elements in page D and E Recommended to hit D/E a second time to get VO feedback
Toggle between author mode and user mode Shift + G Navigate to get VO feedback
Address bar history drop-down H
Load and display all images I Navigate to get VO feedback
Toggle loading of images Shift + I Navigate to get VO feedback
Forward X Navigate to get VO feedback
Fast forward Shift + X Navigate to get VO feedback
Back Z Navigate to get VO feedback
Rewind Shift + Z Navigate to get VO feedback

Links and things

7 thoughts on “Using Opera 10 Beta with VoiceOver

  1. Pingback: dotjay (Jon Gibbins)

  2. Hi,

    My name is Alex Jurgensen. I updated the Codetalks page for ARIA test cases a few weeks ago wiht VoiceOver in Leopard with Safari. Haven’t done Opera yet though. My point is that VO is listed now.

    Hopefully someone will add the Opera test results.

    Regards,
    Alex,

  3. Note: Though Webkit/Safari does support some ARIA rolls, they don’t all work as detailed on the codetalks page and have therefore failed.

    Also, Safari 4.0.2 is out now.

    Regards,
    Alex,

  4. Pingback: alastc (alastc)

  5. @Alex – thanks for pointing out that VoiceOver has been listed in Codetalks – I was obviously looking in the wrong place before and I guess you mean here http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases.
    Perhaps we could chat by email about getting Opera added. My mail is henny at iheni dot com.

    @alastc – I’m not on MacVisionaries – it looks like a useful group for access and Apple products. I should probably get signed up. Thanks for the tip. Thanks for your VO post by the way. Really helped when clarifying things and stopped me getting bogged down in the mass of help documentation from Apple :)

  6. Pingback: shelleypowers (Shelley Powers)

  7. Pingback: Screen reader software usage shifts on desktop and mobile » iheni :: making the web worldwide

Comments are closed.