Exploring Keyboard accessibility in Xamarin Forms

When developing Applications it’s important to keep in mind that usability and accessibility must be on top of the list of features to add. In this post, we will be learning about keyboard accessibility.

We will be having a lot of types of users with different needs or conditions, for example, users who use screen readers, or have mobility issues may need an appropriate established tab order between controls and that can also make our App’s UX better! 🤓

Let’s start!

Understanding Default Tab Order

First of all, it’s important to understand the default Tab Order. This one is established specifically in the same order the controls have been added in the XAML.

Let’s see an example:

I added some entries in a Grid, which will allow us to better understand how the ordering works by default, note that this order is exactly the same in which the lines of code were added: First name, Phone number, and Middle name.

Setting a specific Tab Order with `TabIndex` property

We have the TabIndex property, which allow us to specify which will be the focus order between the existing controls, we can perceive navigating through controls by pressing the Tab key. TabIndex receives Int values and is handled in ascending order when navigating between controls, once it concludes with all the existing ones, it will return and re-executes the same established order.

In the following example we will use the TabIndex to fix the focus order of the Entries presented in the previous example:

And what if I want to exclude some controls? 🧐

We have two options to exclude the controls:

1⃣. If we activate the IsEnable property, automatically the control goes out of the order of the tabulation focus.

2⃣. But if we want to exclude those controls without the need for them to be disabled, we can do that as well! This can be achieved with IsTabStop property which indicates whether a VisualElement is included in the tabbed navigation. Its default value is True and when you add the value as False, the control ignore the TabIndex property (If it has one).

Controls supported by `TabIndex` and `IsTabStop` properties

Hope this post has been very useful to you because making much more accessible applications to everyone is a topic that I am passionate about 🙈 See you next time!