Accessibility group - .NET MAUI

In MAUI, you can group items together by setting AutomationProperties.IsInAccessibleTree to true. You also need to set a SemanticProperties.Description for the grouped elements.

<HorizontalStackLayout
    x:Name="MenuButtonLayout"
    AutomationId="MenuButton"
    AutomationProperties.IsInAccessibleTree="True"
    SemanticProperties.Description="Menu container"
    Padding="0,0,5,0">
    <Image
        x:Name="MenuImage"
        HeightRequest="20"
        HorizontalOptions="Start"
        SemanticProperties.Description="Menu image"
        Source="dotnet_bot.png"
        WidthRequest="20" />

    <Label
        x:Name="MenuLabel"
        Margin="5,0,0,0"
        Text="Menu label"
        VerticalTextAlignment="Center" />
    <HorizontalStackLayout.GestureRecognizers>
        <TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped" />
    </HorizontalStackLayout.GestureRecognizers>
</HorizontalStackLayout>

When you only use IsInaccessibleTree="True", the following descriptions will be read by the screen reader:

  • iOS: "Button"
  • Android: "Menu image, menu label, double tap to activate"

When you also provide SemanticProperties.Description="Menu container", the descriptions will be:

  • iOS: "Menu container, Button"
  • Android: "Menu container, double tap to activate"