Accessibility Support in Xamarin Forms

Accessibility options, allows accessibility programs to read your app and provide any appropriate assistance. The most common, is a narrator, being able to read your app, to verbal speak to a user about what parts of your app do. Accessibility support in our apps, is something a lot of developers overlook. It was previously difficult to add platform specific accessibility support with Xamarin Forms. Starting in Xamarin Forms 2.3.5, we now have basic accessibility support for each platform. Previously this had to be done via Custom Renderers, or more recently Effects.

Note: You will need at least 2.3.5-pre3 for this.

 

Accessibility Options

Xamarin Forms includes 4 different Accessibility Options, that are set via Attached Properties, in the class AutomationProperties. These set the accessibility options natively, so that a narrator can speak about the element.

IsInAccessibleTree

IsInAccessibleTree is a boolean that is determines if this element is accessible. You must set this to true, in order for the other elements to be used.

// XAML
<Entry Accessibility.IsInAccessibleTree="True" 
       Text="Hello" />

// Code Behind
var entry = new Entry();
entry.SetValue(Accessibility.IsInAccessibleTreeProperty, true);

Behind the scenes, it sets these properties for the control, on each platform.

Android iOS UWP
Focusable  IsAccessibilityElement  AutomationProperties.AccessibilityViewProperty

 

HelpText

The HelpText is a text value, that can be spoken, if there is nothing else to describe the element.

// XAML
<Entry AutomationProperties.IsInAccessibleTree="True" 
       AutomationProperties.HelpText="Howdy"
       Text="Hello" />

// Code Behind
var entry = new Entry();
entry.SetValue(AutomationProperties.IsInAccessibleTreeProperty, true);
entry.SetValue(AutomationProperties.HelpText, "Howdy");

Behind the scenes, it sets these properties for the control, on each platform.

ANDROID IOS UWP
Hint  AccessibilityHint AutomationProperties.HelpTextProperty

Name

This is just a name of the element.

// XAML
<Entry AutomationProperties.IsInAccessibleTree="True" 
       AutomationProperties.Name="EntryBox"
       Text="Hello" />

// Code Behind
var entry = new Entry();
entry.SetValue(AutomationProperties.IsInAccessibleTreeProperty, true);
entry.SetValue(AutomationProperties.Name, "EntryBox");

Behind the scenes, it sets these properties for the control, on each platform.

ANDROID IOS UWP
ContentDescription AccessibilityLabel AutomationProperties.NameProperty

LabeledBy

Labeled By, allows another element to define accessibility information. For example if you have an Entry, but a label is next to it, describing the element. Then the text value of that label can be used to describe the element.

// XAML
<Label x:Name="EntryLabel" Text="Username" />
<Entry AutomationProperties.IsInAccessibleTree="True" 
       AutomationProperties.LabeledBy="{x:Reference EntryLabel}" />

// Code Behind
var entryLabel = new Label() { Text="Username" };
var entry = new Entry();
entry.SetValue(AutomationProperties.IsInAccessibleTreeProperty, true);
entry.SetValue(AutomationProperties.LabeledBy, entryLabel);

Behind the scenes, it sets these properties for the control, on each platform.

ANDROID IOS UWP
SetLabelFor Not Mapped AutomationProperties.LabeledByProperty

Narration

Each platform has a different program to narrate, these values. Windows 10 has the Narrator (Settings -> Ease of Access -> Narrator), iOS has VoiceOver (Settings -> General -> Accessibility -> VoiceOver) and Android you can download TalkBack. How the program narrates each elements is up to the program itself. For example in UWP, it will prioritize Name, LabeledBy and then HelpText. In Android, it may combine the Name and Hint values. Testing on each platform with each element, will be needed to ensure you have a decent experience.

Learn More

Xamarin provides some Accessibility Guidelines for Xamarin apps, which goes beyond these new Accessibility Options. You can learn many things, relating to many different types of accessibility options and design to help make your app more accessible.


XAMARIN.FORMS MONTHLY NEWSLETTER

JOIN 1,000+ SUBSCRIBERS

  1. Don't miss out on updates
  2. The latest info from this site, Xamarin and the community
  3. Unsubscribe at any time*

* We use MailChimp, with double opt-in, and instant unsubscribe

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer | Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

Leave A Comment?