Nested Elements Name

A focusable view should have all visible text within its accessible name available to assistive technologies like VoiceOver and Voice Control.

Impact

People using VoiceOver are most impacted. Developers may add paragraphs of text to a container accessibility element, but VoiceOver may not read all text within the container. Hence, people using VoiceOver may not be aware of all on-screen text.

Confirmation

1. Turn on VoiceOver
2. Focus on the accessibility element containing the text
3. One of the following will happen:
   • Inaccessible: VoiceOver will not read the text.
   • Accessible: VoiceOver will read all text contained within the focus box.

How to Fix

UIKit

An issue found by this rule is caused by using the default accessibilityLabel for an accessibility element containing multiple text elements.

To fix, enforce that any accessibility element containing multiple text elements have all visible text in its accessibilityLabel:

let paragraphOne = UILabel()
let paragraphTwo = UILabel()
let accessibilityElement = UIView()

paragraphOne.text = "One paragraph of text about something."
paragraphTwo.text = "A second paragraph of text about something."

accessibilityElement.addSubviews([paragraphOne, paragraphTwo])

// Update the accessibility element's accessibilityLabel, so both paragraphs are read by VoiceOver.
view.accessibilityLabel = "\(paragraphOne.text) \(paragraphTwo.text)"

SwiftUI

An issue found by this rule within SwiftUI indicates misuse of the accessibilityElement modifier in addition to the accessibilityElement(children:..) modifier.

It's recommended to use these modifiers on a grouping view rather than individual elements. Note the order and AccessibilityChildBehavior specified below.

VStack(alignment: .leading) {
    HStack {
      Text("Title:")
      book.title.map({ title in
        Text(title)
      })
    }
    HStack {
      Text("Author:")
      book.author.map({ author in
        Text(author)
      })
    }

    HStack {
      Text("Genre:")
      book.genre.map({ genre in
        Text(genre)
      })
    }
}
.accessibilityElement()
.accessibilityElement(children: .combine)

React Native

An issue found by this rule within React Native views indicates a misuse of the accessible property and/or accessibilityElementsHidden property.

If you are explicitly adding these properties, be sure they are true so that visible text remains available to assistive technology users.