{"id":31215,"date":"2017-04-27T13:09:11","date_gmt":"2017-04-27T20:09:11","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=31215"},"modified":"2017-04-27T13:09:11","modified_gmt":"2017-04-27T20:09:11","slug":"accessbility-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/accessbility-xamarin-forms\/","title":{"rendered":"Making Your Xamarin.Forms Apps Accessible"},"content":{"rendered":"<p>\t\t\t\t<em>Note: With the release of Xamarin.Forms 2.3.5-pre3, we have renamed the <code>Accessibility<\/code> class&#8217;s name to <code>AutomationProperties<\/code>.<\/em><\/p>\n<p>iOS, Android, and Windows all expose APIs for developers to build accessible mobile apps for everyone. We&#8217;re excited to announce that we&#8217;ve added new APIs for accessibility in Xamarin.Forms to make it even easier for developers to build accessible, cross-platform mobile applications. In this post, we&#8217;ll take a look at new APIs added to Xamarin.Forms that make it easy to build accessible mobile applications.<\/p>\n<h3>AutomationProperties APIs in Xamarin.Forms<\/h3>\n<p><a href=\"https:\/\/releases.xamarin.com\/pre-release-xamarin-forms-2-3-5-233\/\">Xamarin.Forms 2.3.5<\/a> provides a base set of hint-related accessibility APIs. They consist of the following:<\/p>\n<ul>\n<li>AutomationProperties.Hint<\/li>\n<li>AutomationProperties.IsInAccessibleTree<\/li>\n<li>AutomationProperties.LabeledBy<\/li>\n<li>AutomationProperties.Name<\/li>\n<\/ul>\n<p>By defining these properties, we can utilize the underlying accessibility functionality in iOS and Android, such as <a href=\"https:\/\/www.apple.com\/accessibility\/iphone\/vision\/\">VoiceOver<\/a>.<\/p>\n<h3>Making the Xamarin Evolve 2016 App Accessible<\/h3>\n<p>The easiest way to dig into how these new APIs work is with a real-world example. Let&#8217;s take the <a href=\"https:\/\/github.com\/xamarinhq\/app-evolve\/blob\/master\/src\/XamarinEvolve.Clients.UI\/Pages\/Info\/LoginPage.xaml\">LoginPage<\/a> from the <a href=\"https:\/\/github.com\/xamarinhq\/app-evolve\">Xamarin Evolve 2016 mobile application<\/a> and make it accessible using the new APIs in Xamarin.Forms. In this layout, we have the usual Xamarin.Forms elements such as <code>Entry<\/code> and <code>Button<\/code>. Prior to Xamarin.Forms 2.3.5, we would have to use platform effects or a custom renderer to utilize the accessibility APIs. With the new APIs, we just need to add a few properties and our mobile app becomes accessible:<\/p>\n<pre>\n<code>\n\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\n<\/code>\n<\/pre>\n<p>Run the code on a physical device with accessibility functionality enabled, and the value you provided for <code>AutomationProperties.Hint<\/code> will be spoken to the user. This uses VoiceOver on iOS; on Android, some controls, incuding <code>Button<\/code>, unfortunately don&#8217;t behavior properly for reasons pertaining to Android itself, although an element such as <code>Slider<\/code> will read a combination of the <code>Hint<\/code> and <code>Name<\/code> values.<\/p>\n<p>To enable VoiceOver for iOS, navigate to Settings -&gt; General -&gt; Accessibility -&gt; VoiceOver. For Android, install <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=com.google.android.marvin.talkback\">TalkBack<\/a> which is very likely already installed on the device and can be enabled under Settings -&gt; Accessibility -&gt; Vision. Windows users can enable the Narrator under the Ease of Access option in Settings.<\/p>\n<p>Remember, you&#8217;ll need to have Xamarin.Forms 2.3.5 added to all projects using Xamarin.Forms, including your iOS and Android projects. Note that the <code>AutomationProperties<\/code> properties may not be available in IntelliSense, as these are attached properties.<\/p>\n<h2>Conclusion<\/h2>\n<p>As you&#8217;ve seen with the above example, adding just four properties to my control in XAML added hint-driven accessibility to my mobile apps. We encourage you to give these new APIs in Xamarin.Forms 2.3.5 a try, and let us know what you think! You can read more about the various accessibility features on each platform&#8217;s website (<a href=\"https:\/\/developer.apple.com\/library\/content\/documentation\/UserExperience\/Conceptual\/iPhoneAccessibility\/Accessibility_on_iPhone\/Accessibility_on_iPhone.html#\/\/apple_ref\/doc\/uid\/TP40008785-CH100-SW2\">iOS<\/a>, <a href=\"https:\/\/developer.android.com\/training\/accessibility\/index.html\">Android<\/a>, <a href=\"https:\/\/docs.microsoft.com\/en-us\/uwp\/api\/Windows.UI.Xaml.Automation.AutomationProperties#properties\">Windows<\/a>).\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: With the release of Xamarin.Forms 2.3.5-pre3, we have renamed the Accessibility class&#8217;s name to AutomationProperties. iOS, Android, and Windows all expose APIs for developers to build accessible mobile apps for everyone. We&#8217;re excited to announce that we&#8217;ve added new APIs for accessibility in Xamarin.Forms to make it even easier for developers to build accessible, [&hellip;]<\/p>\n","protected":false},"author":1958,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[5,6,4,16],"class_list":["post-31215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-android","tag-ios","tag-xamarin-platform","tag-xamarin-forms"],"acf":[],"blog_post_summary":"<p>Note: With the release of Xamarin.Forms 2.3.5-pre3, we have renamed the Accessibility class&#8217;s name to AutomationProperties. iOS, Android, and Windows all expose APIs for developers to build accessible mobile apps for everyone. We&#8217;re excited to announce that we&#8217;ve added new APIs for accessibility in Xamarin.Forms to make it even easier for developers to build accessible, [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/31215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1958"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=31215"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/31215\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=31215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=31215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=31215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}