Overview
概要
An Accessibility Rotor is a shortcut for Accessibility users to quickly navigate to specific elements of the user interface, and optionally specific ranges of text within those elements.
An entry in a Rotor may contain a label to identify the entry to the user, and identifier used to determine which Accessibility element the Rotor entry should navigate to, as well as an optional range used for entries that navigate to a specific position in the text of their associated Accessibility element. An entry can also specify a handler to be called before the entry is navigated to, to do any manual work needed to bring the Accessibility element on-screen.
In the following example, a Message application creates a Rotor allowing users to navigate to specifically the messages originating from VIPs.
ScrollView {
LazyVStack {
ForEach(messages) { message in
MessageView(message)
}
}
}
.accessibilityElement(children: .contain)
.accessibilityRotor("VIPs") {
ForEach(messages) { message in
if message.isVIP {
AccessibilityRotorEntry(message.subject, id: message.id)
}
}
}
An entry may also be created using an optional namespace, for situations where there are multiple Accessibility elements within a ForEach iteration or where a ScrollView
is not present. In this case, the prepare
closure may be needed in order to scroll the element into position using ScrollViewReader
. The same namespace should be passed to calls to accessibilityRotorEntry(id:in:)
to tag the Accessibility elements associated with this entry.
In the following example, a Message application creates a Rotor allowing users to navigate to specifically the messages originating from VIPs. The Rotor entries are associated with the content text of the message, which is one of the two views within the ForEach that generate Accessibility elements. That view is tagged with accessibilityRotorEntry(id:in:)
so that it can be found by the AccessibilityRotorEntry
, and ScrollViewReader
is used with the prepare
closure to scroll it into position.
struct MessageListView: View {
@Namespace var namespace
var body: some View {
ScrollViewReader { scroller in
ScrollView {
LazyVStack {
ForEach(allMessages) { message in
VStack {
Text(message.subject)
Text(message.content)
.accessibilityRotorEntry(
"\(message.id)_content",
in: namespace
)
}
}
}
}
.accessibilityElement(children: .contain)
.accessibilityRotor("VIP Messages") {
ForEach(vipMessages) { vipMessage in
AccessibilityRotorEntry(vipMessage.subject,
id: "\(vipMessage.id)_content", in: namespace)
{
scroller.scrollTo(vipMessage.id)
}
}
}
}
}
}