jump start for voiceover (macos + ios) and the rotor

Doing a lot of a11y work at work, and so I made this page to help people over the hurdle of using a voicereader...

Getting started with VoiceOver can be daunting at first - for people used to traditional screen/keyboard/pointer device/touchscreen, the amount of audio information coming in can be overwhelming, and even the most basic of touchscreen operations - for example, entering the passcode on the lock screen - will require extra steps.

iOS:

Go to Settings | General | Accessibility and set VoiceOver to On.

Doing so fundamentally changes the UI. A "What Widget Has The Focus" is added. Previously, tapping an onscreen button clicks it. Now, doing so highlights the button and the voice reads the caption. To click the currently highlighted button, you double tap the screen.

On the VoiceOver screen,. you can select "VoiceOver Practice" this screen will let you get a feel for how flicks - left and right to select previous and next and double tap for activate are the most important, but two and three finger flicks have various meanings as well for where the voiceover will start reading.

You may be tempted to just use the touchscreen as more or less normal, just switching tap to highlight, double tap to activate, but it is probably better to get practice using the flick navigation as well.

MacOS:

Go to System Preferences | Accessibility - VoiceOver is in the sidebar, so click Enable VoiceOver in its panel. You might try VoiceOver Training here as well.

PROTIP: the default "enable VoiceOver" keybinding is cmd-f5. However, MacPros with the touchbar might find this fiddly - you might consider going to System Preferences|Keyboard|Accessibility and setting "Turn VoiceOver on or off" to cmd-5.

Back to the main VoiceOver dialog - open "Open VoiceOver Utility". Here you can select the "VoiceOver modifier". Personally I prefer Caps Lock to the shift/command/option bundles, but it's a personal preference - but one you need to be comfortable with for activating the rotor. From here on in we will follow the convention of calling this key VO-

The Rotor is started with VO-U

The Rotor is the primary method of navigation for a certain part of the web audience. For the current webpage, It collates all the page parts of certain category into a flat list - for example all the links on the page, or all the form elements. (Under VoiceOver Utility | Web | Web Rotor you can see the categories you can have the rotor serve up) Firing it up on a webpage, you primarily navigate with arrow-keys: left and right to switch cartgory, up and down to select items. Hit enter to jump the focus to that item, and then VO-a to start reading there.

Apple has a page on VoiceOver Basics - I also found Deque University's VoiceOver Keyboard Shortcuts very handy.

After using the Rotor for a while, you may start to understand the purpose of many of the WCAG guidelines - providing structure that these tools can leverage, even apart from the visual display of the webpage.