Creating accessible controls with Xamarin.Forms

Xamarin Forms is marketed as a tool for simple data entry apps and prototyping, but wtih a little bit of knowledge, Forms can work for a cross platform app.

One thing that Forms lacks on its controls is access to the accessibility features that are necessary for your app to be usable by screen reader users. However, adding that capability is very easy.

I’m going to walk through adding accessible labels to buttons. The first thing we need is a new control, since Button doesn’t allow us to show text to a screen reader on an image button. This is a Forms control, so put it into the cross-platform project of your Forms solution

We just extend the Forms button with a bindable property, and we’re done with the control.

We need to do a similar thing with the Xamarin renderer. Here’s an implementation of a renderer that uses the bindable property from our AccessibleButton and sets the value eo the Android control’s ContentDescription proprety, which is visible to screen reader users on Android. This renderer is an Android renderer, so it goes into the Android project of your Forms solution.

One other detail we need to set on the renderer, we need to export our renderer so that it actually gets used to render our Forms controls. we need this line outside the namespace declaration in our Renderer’s file.

Then, you can use this within a Forms page just like any other Forms control

<btn:AccessibleButton Text="This shows on the screen" AccessibleText="This is read by talkback" ….

comments powered by Disqus