Skip to content
Home Navigating web with VoiceOver rotor in iPhone and iPad 

Navigating web with VoiceOver rotor in iPhone and iPad 

a person using his iphone

While exploring Pune city with my friends, we decided to book bus tickets through a web site for our convenience. Although the booking process initially took some time, I was able to complete it within minutes. Intrigued by my quick booking, my friend asked me how I managed to do it so efficiently. They had trouble navigating the web on iPhone and iPad with VoiceOver screen reader because they were navigating through web content using only swipe gestures. They wanted to know if there are any shortcuts available on iPhone and iPad to navigate the web, similar to the way desktop screen readers like JAWS, NVDA, Narrator, and others use quick navigation keystrokes.

So, I thought of writing an article on ‘navigating web with VoiceOver rotor on iPhone and iPad’. To begin with, let's start with understanding the rotor.

What is rotor in VoiceOver?

VoiceOver is a built-in screen reader found on all iPhone, iPad and Mac devices. The rotor is one of the features of the VoiceOver, which lets you navigate through a set of elements on the web, apps and system utilities as follows: 

  • Increase/decrease Volume 
  •  Increase/decrease the speech rate. 
  •  Reading methods i.e., character, word, line and so on.
  • Navigate through headings, lists, links and so on the web pages. 

How do you use rotor on iPhone and iPad? 

First, to turn on VoiceOver:

  1. Go to "Settings"
  2. Select the "Accessibility" option. 
  3. Select the "VoiceOver" option. 
  4. Activate the "VoiceOver On" switch. 

To use the rotor, follow the below steps:

  1. Rotate two fingers on the screen of an iPhone or iPad device as if you are turning a dial either clockwise or anticlockwise.
  2. The VoiceOver will read out the first rotor option. 
  3. Keep rotating your fingers to hear more options. 
  4. Lift your fingers to choose an option from the rotor. 
  5. By flicking up/down one can access the selected options on the screen.

The elements of the rotor options change based on the application in use at any given time. For example, if you choose the heading option when a web page is open, a flick down or up will move VoiceOver to the next or previous heading on the web page. 

With rotor options, we can move to the next element by Flicking down and move to the previous element by flicking up with one finger. If you swipe left and right on the screen, VoiceOver will read out the next item on the page. 

One more important thing about the rotor feature is that, if we choose any option then VoiceOver announces the number of elements present on the web page for the selected option. 

For example, when a user selects "headings" option in the rotor on BarrierBreak’s home page, VoiceOver announces "13 headings". 

Screenshot that displays 13 headings within the caption panel of VoiceOver on BarrierBreak Homepage when user select "headings" options in rotor

Talk to our Accessibility Expert

Rotor Options and their actions

The following tables show the Rotor Options and their actions for navigating the screen content and some system utilities. 

Note: Rotor options and actions mentioned in this post are as per iOS 16.5.

In this post, I have covered rotor options related to web and some basic actions.  

Reading options

Rotor optionsVoiceOver Action
CharacterMoves to next/previous character
WordMoves to next/previous word
LineMoves to next/previous line

System utilities options

Rotor optionsVoiceOver Action
Speech rateIncrease/decrease speech rate
VolumeIncrease/decrease volume
ContainerMove VoiceOver focus from one container to another. For example, Doc area to the home screen. 

Web element options

Rotor optionsVoiceOver Action
HeadingMoves to the next/previous heading
ListMoves to the next/previous list
TableMoves to the next/previous table (focus stay at the beginning of table)
ButtonMoves to the next/previous button
Form controlMoves to the next/previous form control (check box, radio buttons and so on)
Text fieldsMoves to the next/previous text field
Search fieldsMoves to the next/previous search field
LinksMoves to the next/previous links
Visited linksMoves to the next/previous visited links
Unvisited linksMoves to the next/previous unvisited links
In-Page LinksMoves to the next/previous In-Page Links 
ImagesMoves to the next/previous images
LandmarkMoves to the next/previous landmark (Banner, main and so on)
Same elementMoves to the next/previous same element

Some of the default options of the rotor are "Headings", "Links", "Form controls", "Containers" and so on. VoiceOver provides users with an option to customize the options that come up in the rotor. To customize the rotor options, perform the following steps:

  1. Go to "Settings".
  2. Select the "Accessibility" option.
  3. Select the "VoiceOver" option. 
  4. Select the "rotor" option. 
  5. Choose rotor options that you required such as "Table", "Landmark", "Unvisited links", "Visited links" and so on. 

Screenshot of list of options such as Headings, Links, Form Controls, Tables, Lists and so on available in rotor setting.

So far, we discussed about the different rotor options of VoiceOver, now let’s discuss the rotor actions. 

What is rotor action?

The rotor actions are another feature of VoiceOver which allows user to perform action on apps. This feature was introduced in iOS 14. 

  • Edit apps on home screen: This function enables the user to "Drag" and "Delete" for apps on the home screen. 
  • Direct touch in apps: Direct touch is a way in which user can tell VoiceOver to ignore touch events in part or all on an app's screen so that the app can handle those touch events directly. 

To configure rotor actions, perform the following steps:  

  1. Go to the "Settings" 
  2. Select the "Accessibility" option. 
  3. Select the "VoiceOver" option. 
  4. Select the "rotor action" option. 

Browsing with VoiceOver Rotor 

Now let’s see the rotor in action. I’ll be downloading the "SAAS Accessibility Toolkit" from the BarrierBreak website. 

  1. Open BarrierBreak website in safari browser. 
  2. Select "headings" option in the rotor. 
  3. By Flicking down with one finger, navigate to "Accessibility Consulting" heading. 
  4. Navigate to "Download now" button using right swipe and double tap to activate it. 
  5. Next, select "Form controls" option in the rotor. 
  6. By Flicking down with one finger, navigate to "Name", "Corporate Email", "Company", "Industry" form fields and fill up the details. 
  7. Swipe right and navigate to "Request Toolkit" button and double tap to activate it. 

Wasn’t it fast and easy?  

The VoiceOver rotor is a powerful tool that allows users with visual impairments to navigate the web effortlessly on their iPhones and iPads. And now that you have an understanding of the various rotor options used for web navigation, it is time to acquaint yourself with VoiceOver and take your accessibility journey in web navigation to the next level! 

Share your thoughts in the comments section below, and let's continue the conversation on creating a more inclusive web for all.

Useful VoiceOver Resources: 

This article by Lalit Kadtan is a part of our BB Geek series where BarrierBreak team members share their expertise on accessibility and inclusion, drawing from their extensive experience in the field.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top