Skip to main content
Logo Appt Light

Accessibility focus indicator on Xamarin

Users should know which element has focus when using a keyboard or assistive technology. For example, you could show a rectangle around the focused element. Or you can adjust the colors whenever an element receives focus. Focus indicators can take many different forms. The focus indicator should remain visible while the element is in focused state.

In Xamarin.Forms, you can adjust colors when an element receives focus. However, it's not possible to change the focus indicator of assistive technologies. Users can adjust their preferences in the system settings on Android and iOS.

The Visual State Manager (VSM) provides a structured way to make visual changes to the user interface from code. The VSM contains a visual state group named CommonStates which includes the Focused state.

The code sample below shows how to change the background color of a button on focus.

<Style TargetType="Button">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="DefaultColor" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Focused">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="FocusedColor" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="DisabledColor" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Feedback?

Let us know!