question

jalza avatar image
0 Votes"
jalza asked WenyanZhang-MSFT commented

CheckBox and accesibility behavior is unexpeted in Android, how control it's text color

I'm developing Xamarin.Forms app, and I have to take into account people with visual disabilities. I mostly use black and white colors to have the highest contrast and device's day/night mode is used to set element color. I'm using automation properties to give information to the screen reader.

The CheckBox doesn't have Text property. But if I use AutomationProperties.Name the text is shown in Android and I can't set it's color, because is not the same of CheckBox.Color property. This is a big problem because sometimes the text is unreadable.

Example code with 2 checkboxes, first without AutomationProperties and second with AutomationProperties.

App.xaml:

 <Application xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="CheckBoxTest.App">
     <Application.Resources>
         <!-- Light theme colors -->
         <Color x:Key="LightThemeBackgroundColor">WhiteSmoke</Color>
         <Color x:Key="LightThemeTextColor">Black</Color>
         <!-- Dark theme colors -->
         <Color x:Key="DarkThemeBackgroundColor">Black</Color>
         <Color x:Key="DarkThemeTextColor">WhiteSmoke</Color>
     </Application.Resources>
 </Application>

MainPage.xaml:

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="CheckBoxTest.MainPage"
              BackgroundColor="{AppThemeBinding Light={StaticResource LightThemeBackgroundColor}, Dark={StaticResource DarkThemeBackgroundColor}}">
     <StackLayout>
         <Label Text="Checkboxes" HorizontalTextAlignment="Center" FontSize="Medium"
                TextColor="{AppThemeBinding Light={StaticResource LightThemeTextColor}, Dark={StaticResource DarkThemeTextColor}}"/>
         <CheckBox HorizontalOptions="Center"
                   Color="{AppThemeBinding Light={StaticResource LightThemeTextColor}, Dark={StaticResource DarkThemeTextColor}}"/>
         <CheckBox HorizontalOptions="Center"
                   Color="{AppThemeBinding Light={StaticResource LightThemeTextColor}, Dark={StaticResource DarkThemeTextColor}}"
                   AutomationProperties.IsInAccessibleTree="True" AutomationProperties.Name="Accept conditions"/>
     </StackLayout>
 </ContentPage>

These are day and night mode captures:

134566-checkbox.png

As you can see:
- In day/light mode, the text in the second CheckBox is white, and it is unreadable.
- In night/dark mode, the text in the second CheckBox is gray.

In another app, and I don't know why, in night/dark mode the text is black (with black background)

So is it possible to change this text color to have full control in app design?

dotnet-xamarinformsdotnet-android
checkbox.png (26.4 KiB)
· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

jalza avatar image jalza WenyanZhang-MSFT ·

And do you know why is this text displayed when AutomationProperties.Name is set? I thought these properties were only to allow the screen reader speech the text.

0 Votes 0 ·

I think you are right, it works for VoiceOver or TalkBack. Xamarin.Forms allows accessibility values to be set on user interface elements by using attached properties from the AutomationProperties class, which in turn set native accessibility values.


0 Votes 0 ·

0 Answers