Accessibility order does not match the layout order
Raised from major This is a modal that covers the whole app. The first element the swipe reaches is the paid subscribe button and the close button is reached last of seven, so the swipe-then-double-tap pattern that opens every VoiceOver session starts a purchase on a screen the user has not heard yet.
- Paywall
- subscribeButton
- voiceover
- iPhone 13 mini
- T4 · Conversion
Evidence
Illustration, not a screenshot: the app is fictional and this frame is generated from the same pixel rectangles the report publishes.
- actual
- subscribeButton
- elements
- 'subscribeButton' reached at position 1
- expected
- paywallHeading
- first_divergence_position
- 1
- out_of_order
- 4
Reproduced in 3 of 3 attempts
Suggested fix
The subscribe button is declared first in the modal's view hierarchy, so it is the first thing VoiceOver lands on and the close button is reached last, at position 7. Give the sheet an explicit reading order, or declare the heading before the action.
VStack {
heading
priceRows
subscribeButton
}
.accessibilityElement(children: .contain)
.accessibilitySortPriority(0)