Change order of read items with VoiceOver

Question

I have a bunch of buttons on the screen which are positioned intuitively visually but are not read in an intuitive order by VoiceOver. This is because certain buttons like U

Answer 1

In Swift you just have to set view's accessiblityElements array property:

view.accessibilityElements = [view1, view2, view3] // order you wish to have

Answer 2

I think you can do it in the storyboard. The VoiceOver order is determined by the order of the views in the document outline.

Just drag and drop the views in the view hierarchy in the right order.

Edit:

Sorry I can not post screenhots until 10 reputation. In the storyboard, the document outline is the area on the left where your scenes with their subviews are listed. Here, subviews are ordered one below each other. When you change this order, the reading-order of VoiceOver will change.

Answer 3

I found a convenience way yesterday. Similar to @TejAces ' answer. Make a new swift file, then copy these things into it.

import UIKit

extension UIView {
    func updateOrder(_ direction: Bool = true) {
        var tempElements: [Any]? = [Any]()
        let views = (direction) ? subviews : subviews.reversed()
        for aView in views {
            tempElements?.append(aView)
        }
        accessibilityElements = tempElements
    }
}

class ReorderAccessibilityByStoryBoardView: UIView {
    override func didAddSubview(_ subview: UIView) {
        updateOrder()
        super.didAddSubview(subview)
    }
}

Set the UIView(contains views you want to reorder)'s class as ReorderAccessibilityByStoryBoardView. Then you can reorder them by reordering storyboard's view list.

Because subview doesn't contain views in StackView/ScrollView, you need to make a independent class in this file. Such as the ReorderAccessibilityByStoryBoardStackView down below.

class ReorderAccessibilityByStoryBoardStackView: UIStackView {
    override func didAddSubview(_ subview: UIView) {
        updateOrder(false)
        super.didAddSubview(subview)
    }
}

With these codes, you can also reorder view's added in code by adding them in a specific order.

Answer 4

I know this is an old thread, but I found that the easiest way to do it is to subclass UIView as such (Swift 3). Then simply modify your main UIView type in storyboard to AccessibiltySubviewsOrderedByTag and update the tags in each subview you want read in order.

class AccessibilitySubviewsOrderedByTag: UIView {
    
    override func layoutSubviews() {
        
        self.accessibilityElements = [UIView]()
        for accessibilitySubview in self.subviews {
            if accessibilitySubview.isAccessibilityElement {
                self.accessibilityElements?.append(accessibilitySubview)
            }
        }
        self.accessibilityElements?.sort(by: {($0 as AnyObject).tag < ($1 as AnyObject).tag})
    }
}

Answer 5

You can change the order setting the view's accessibilityElements array:

self.view.accessibilityElements = @[self.view1, self.view2, self.view3, self.view4];

or

self.anotherView.accessibilityElements = @[self.label1, self.txtView1, self.label2, self.txtView2];

If you need to set the interaction enabled programmatically:

[self.view1 setUserInteractionEnabled:YES];

If the view is hidden the voice over will not pass through it.

Answer 6

I tried Wesley's answer of setting the array of the accessibilityElements but it didn't work for me.

Apple has some documentation Enhancing the Accessibility of Table View Cells with an example in code. Basically you set the accessibility label of the cell (the parent view) to the values of the accessibility labels of the child views.

[cell setAccessibilityLabel:[NSString stringWithFormat:@"%@, %@", cityLabel, temperatureLabel]];

This is what worked for me.