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:
- Open System Preferences.
- Click Keyboard and Mouse.
- Select the Keyboard shortcuts tab.
- Ensure the "Turn full keyboard access on or off" option is checked.
Next:
- Open Universal Access within System Preferences.
- Check "Enable access for assistive devices".
Setting up keyboard access in Opera
Once Mac is set up you'll then need to check Opera is ready for keyboard access:
- Choose Opera > Preferences.
- Click Advanced.
- Select Shortcuts in the list of settings.
- 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.
- Toggle VoiceOver on or off - Cmd + F5.
- Navigate around the chrome - VO + Cmd + Shift and Arrow keys.
- Interact the HTML content - VO + Shift + down arrow (↓).
- Interact with the browser chrome - VO + Shift + up arrow (↑).
- Navigate content (Spatial Navigation, see below) - Shift+ Up, Down, Left or Right arrow.
- 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.
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 | NA |
Interact with the HTML content | VO + Shift + down arrow (↓) | NA |
Interact with the browser chrome | VO + Shift + up arrow (↑) | NA |
Navigate content | Shift+ Up, Down, Left or Right arrow | NA |
Read content | VO + A | NA |
Stop reading content | Ctrl | NA |
Move forwards/backward through form elements | Tab / Shift+Tab | NA |
Select | Space bar | NA |
Activate | Enter | NA |
List items in a page or in the chrome | VO + I | NA |
Navigate the lists | Arrow keys | NA |
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 | NA |
Cycle through headers in page | S and W | NA |
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 | NA |
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
- Opera accessibility - where we're at.
- Keyboard shortcuts in Opera - comprehensive overview on how to use Opera via just the keyboard.
- VoiceOver commands (PDF) - Apple's overview of VoiceOver commands presented as you'd see the commands on a keyboard.
- VoiceOver commands - brought to you by Jon Gibbons in an accessible data table.
- VoiceOver 1: Basics - from Alastair Campbell.