Accessibility, Xamarin

Exploring Automation Properties in Xamarin Forms

Imagine that you are creating an application that can read aloud the description of each element you are interacting with! This would be great because this will allow a greater number of users to use your App, for example, a person with a reduced visual field will be very happy with this!💕  This is called Accessibility and it’s extremely important to keep in mind when creating an App! Let’s start!

We are ready to start! 😎

🔧 Platform information

We can achieve the read-aloud functionality thanks to each platform’s built-in read-aloud tool that allow us, as users to listen to the narration about what is happening with the app. To access these functionalities we use the Automation Properties. These read-aloud tools have names depending on the Platform you are on, let’s see which are these names!

La imagen tiene un atributo ALT vacío; su nombre de archivo es image-2.png

📒 If you want to know more information about these, you can enter the following links:  TalkBackVoiceOverNarrator.

How can we apply it? 🤔

It’s extremely easy to integrate this function into our Apps, there are four Attached Properties that will help us achieve it, you just have to add these (according to your need) in the specific control that you want to be visible for reader. Let’s know which are these attached properties:

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2021-07-01-at-7.04.13-PM.png

🔹 AutomationProperties.IsInAccessibleTree

This attached Property receives a Boolean value which indicates if the control this property was added to is available to be read by screen readers, therefore it’s the attached property that allows the other properties to fulfill their role, for this it must have a True value.

🔹 AutomationProperties.Name

Once the previous property has been added, then we will go to this one which is responsible for having the description, short, precise, and concise of the element to which it belongs because it will be read by the readers of each platform, therefore it’s important don’t forget this property so that the user can always be kept informed about what is happening in their interaction in the App.

🔹 AutomationProperties.HelpText

Here we can add a slightly longer text describing the elements and can be thought of as tooltip text associated with the element that will be read.  (On some platforms, the edit controls (like Entry) can omit this property and replace it with the PlaceHolder text.)

🔹 AutomationProperties.LabeledBy

It allows another element (control) to indicate the accessibility information for a current one, for example when we are designing a screen that needs an Entry to write the name, we add a label with its description for a better user experience, this is the same goal of LabeledBy.

🌟 It’s all, with these simple attached properties you can make the interactions of your application read correctly! I hope you can apply it and it will be very useful to you!

 Thanks for reading! 💚💕


Spanish post:

Tagged , , ,

Leave a Reply

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