Combine UISwitch and UITableViewCell for VoiceOver interaction

Question

In Calendar, when you create a new event, if you tap on the All Day cell with VoiceOver enabled, Siri says "All Day switch button on/off, double tap to change setting". And indeed double tapping will toggle the switch. Also, it's not possible to tap on just the toggle switch itself - you have to interact with the cell itself to toggle the switch, the switch itself is not an accessible element.

In my app I have the exact same setup with a label and a switch. But when I tap the cell with VoiceOver enabled it only reads the label so the blind user has no idea there's a toggle switch in that cell. If they tap the switch itself then they can interact with it, so it's the opposite of the setup in the Calendar app.

How can I obtain the same behavior that Apple implemented? I need some way to combine the switch into the cell so VoiceOver reads both upon highlighting the cell, then when they double tap it should toggle the switch, and I'm not sure how that setup can be accomplished. Thanks!

Answer 1

To implement the desired behavior, instead of placing the UISwitch in the contentView of the cell, add it as the accessoryView programmatically. Then the cell and switch will behave exactly as expected when using VoiceOver, exactly as it does in Calendar.

Answer 2

You should be able to set a custom accessibility description on the cell using

cell.accessibilityLabel = @"Double tap to toggle setting";

You can set up custom gestures for when VoiceOver is running according to this answer:

https://stackoverflow.com/a/12337128/567511

But here you would not need custom gestures, instead your didSelectRowAtIndexPath would flip the switch only when UIAccessibilityIsVoiceOverRunning is true.

Answer 3

I would like to elaborate on the answer of Joey, and clarify how a solution to this question can be achieved in code.

In the tableView:cellForRowAtIndexPath:, create a custom UISwitch view and append it to the accessoryView of the cell. This could look something like the following.

UISwitch *switchView = [[UISwitch alloc] initWithFrame:CGRectZero];
[switchView setOn:NO];
[switchView addTarget:self action:@selector(selector:) forControlEvents:UIControlEventValueChanged];
cell.accessoryView = switchView;

return cell;

The cell will now behave like any native iOS switch known from e.g. Settings or Calendar. Double tapping on the cell with VoiceOver enabled, will now toggle the UISwitch (on/off), and VoiceOver will automatically notify the user about the state of the switch, together with an accessibility hint.