{"id":116087,"date":"2020-05-19T19:37:56","date_gmt":"2020-05-19T19:37:56","guid":{"rendered":"https:\/\/developer.apple.com\/news\/?id=v56qu1b3"},"modified":"2020-05-19T19:37:56","modified_gmt":"2020-05-19T19:37:56","slug":"enhance-the-voiceover-experience-in-your-app","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2020\/05\/19\/enhance-the-voiceover-experience-in-your-app\/","title":{"rendered":"Enhance the VoiceOver experience in your app"},"content":{"rendered":"
<\/div>\n

VoiceOver is a core part of helping people navigate without needing to view their screen. Take this article, for instance: You may be reading this text visually; however, if you\u2019re a developer who uses VoiceOver, you\u2019ll hear this paragraph (and the rest of the article) spoken to you along with verbal descriptions of any important elements you might need to know about. And if you\u2019ve opened this article in the Developer app, you\u2019ll also hear about navigational elements in the app.<\/p>\n

Whether you personally use VoiceOver or not, here\u2019s how you can put yourself in the mindset of those who do to help design a standout experience.<\/p>\n

Master accessibility elements in your app<\/h3>\n

When someone enables VoiceOver on iOS, iPadOS, watchOS, or tvOS, it begins describing all of the labeled elements on screen. To decide what to read, VoiceOver looks for accessibility elements \u2014 individual or grouped visual elements within a view \u2014 as well as whether someone can interact with these elements. As it describes an element, VoiceOver also highlights it on screen by displaying a black rectangle around the content.<\/p>\n

\n

Tip: Explore VoiceOver on your own device<\/em><\/strong><\/p>\n

While Xcode provides you with several tools to test your app\u2019s accessibility, you can learn a lot about VoiceOver and how various apps have implemented it by taking a test drive on your own iPhone, iPad, Mac, Apple Watch, or Apple TV. You can enable VoiceOver in the Settings app or System Preferences on your Mac, and if you want to have easy access to the feature, you can even enable a hardware-based Accessibility Shortcut.<\/em><\/p>\n

\n

VoiceOver also adds a few specific multitouch gestures and taps to help people navigate their device. Swiping to the right anywhere on the screen will navigate to the next element in the view, while swiping to the left will navigate to the previous one. Each time VoiceOver lands on a new element, it speaks details like its accessibility label and value aloud, along with hints or traits if the element has any. <\/p>\n

Alternatively, people may tap directly on a visual element to navigate to it. If it\u2019s within the bounds of an accessibility element, VoiceOver will focus on it. Otherwise, VoiceOver will emit a \u201cboink\u201d sound.<\/p>\n

By default, all standard UIKit controls are accessibility elements. To flag a custom control or view as an accessibility element, you can use isAccessibilityElement<\/code>:<\/p>\n

var<\/span> isAccessibilityElement: Bool<\/span> { get<\/span> set<\/span> }<\/code><\/pre>\n
Learn more about accessibility elements ><\/a><\/p>\n
Group and declutter accessibility elements<\/h3>\n
When navigating by swiping, VoiceOver visits each element in order of its appearance on the screen. That said, this isn\u2019t always the most efficient way for someone to absorb information: If your app has too many accessibility elements, it may take someone a very long time to understand it. Instead, look for opportunities to group your accessibility elements together and create a simplified hierarchy. <\/p>\n
When you group your accessibility elements, VoiceOver will describe them together, which can speed up navigation through your app. For example, you might group a view that contains a title, text, and a time stamp label, as with Health\u2019s Heart Rate title, heartbeat reading, and time of latest reading.<\/p>\n
<\/p>\n
The Health app uses grouped elements in the Summary view to provide a streamlined experience for people using VoiceOver.<\/p>\n<\/div>\n
This also helps provide context for someone using VoiceOver that would otherwise be present in a visual interface: By grouping them and having them read together, this lets people know that the time and text are associated with the title, rather than three unrelated items.<\/p>\n
Add custom actions <\/h3>\n
You can assign any accessibility element custom actions, which provides extra functionality. For example, if you use Mail without VoiceOver enabled, you can tap on a message inside the inbox to view it, but you can also swipe left or right on an individual message to access other features like deleting, flagging, or moving a message. Custom actions let people who use VoiceOver have access to those same features in a different manner: When VoiceOver focuses on the message element, it speaks the hint \u201cActions Available: Swipe up or down to select a custom action.\u201d Once you arrive at the action you want, you can double-tap to perform it.<\/p>\n
\n
Fun fact: When you implement leading or trailing table view swipe gestures in your app, you automatically get VoiceOver actions for these buttons in your project.<\/em><\/p>\n
\n
Custom actions are very powerful when combined with grouped elements and can help simplify your navigable hierarchy. If you have a view as an accessibility element that has multiple buttons as subviews, for example, you aren\u2019t always able to navigate to those buttons with VoiceOver. While it might be tempting to break up this up into smaller elements and allow buttons to become individually focusable, this may add clutter. <\/p>\n
We strongly recommend using Custom Actions to expose these button actions, letting you keep the element\u2019s organization while still providing full controls to someone using VoiceOver. When you carefully group your elements and add custom actions, it creates a better overall navigation experience and will make your app far more enjoyable for people who rely on VoiceOver.<\/p>\n
To set a UIAccessibilityCustomAction<\/code> on your accessibility elements, you can use accessibilityCustomActions<\/code>:<\/p>\n
var<\/span> accessibilityCustomActions: [UIAccessibilityCustomAction<\/span>]? { get<\/span> set<\/span> }<\/code><\/pre>\n
Flag layout changes<\/h3>\n
Your app may change its layout visually to indicate the result of an action or event. In the Shortcuts app, for example, tapping the + button brings up components that will help someone build a shortcut. For people who use VoiceOver, you can use the \u201cscreen changed\u201d or \u201clayout changed\u201d notifications to guide their focus to the new elements. <\/p>\n
<\/p>\n
The Shortcuts app plays a \u201cscreen changed\u201d notification after someone selects the + button.<\/p>\n<\/div>\n
It\u2019s best to use \u201clayout changed\u201d only when there\u2019s a major change to your interface, as pulling focus too often can make people confused and lose context inside your app.<\/p>\n
To post an accessibility notification, you can use post(notification:argument:)<\/code> on UIAccessibility<\/code>:<\/p>\n
static<\/span> func<\/span> post<\/span>(notification: UIAccessibility.Notification, argument: Any<\/span>?)<\/span><\/span><\/code><\/pre>\n
Next steps<\/h3>\n
When you make these improvements to your app, you\u2019re not only unlocking better VoiceOver support, you\u2019re also laying the groundwork for our other assistive technologies like Switch Control and Full Keyboard Access. So go, explore, and make your app\u2019s accessibility experience a great one \u2014 because technology is most powerful when it empowers everyone.<\/p>\n
Resources<\/h3>\n
Learn more about VoiceOver gestures ><\/a><\/p>\n
Watch \u201cWriting Great Accessibility Labels\u201d ><\/a><\/p>\n
Watch \u201cMaking Apps More Accessible With Custom Actions\u201d ><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
VoiceOver is a core part of helping people navigate without needing to view their screen. Take this article, for instance: You may be reading this text visually; however, if you\u2019re a developer who uses VoiceOver, you\u2019ll hear this paragraph (and the rest of the article) spoken to you along with verbal descriptions of any important […]<\/p>\n","protected":false},"author":2,"featured_media":116088,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[],"class_list":["post-116087","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-apple-developer-news"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/116087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=116087"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/116087\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/116088"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=116087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=116087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=116087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Learn more about accessibility notifications ><\/a><\/p>\n
Learn more about custom actions ><\/a><\/p>\n