May 24, 2019

Making Mobile Apps Accessible with Xamarin

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.

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.

AndroidiOSUWP
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.

ANDROIDIOSUWP
Hint AccessibilityHintAutomationProperties.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.

ANDROIDIOSUWP
ContentDescriptionAccessibilityLabelAutomationProperties.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.

ANDROIDIOSUWP
SetLabelForNot MappedAutomationProperties.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.

Ref
https://docs.microsoft.com – https://xamarinhelp.com – https://blog.xamarin.com/

Leave a Reply

Your email address will not be published. Required fields are marked *