SemanticOrderView

O SemanticOrderView permite controlar a ordem dos VisualElements para leitores de tela e melhorar a acessibilidade do aplicativo. Isso pode ser especialmente útil ao criar interfaces de usuário em uma ordem diferente daquela em que os usuários e os leitores de tela as percorrerão.

Usando o SemanticOrderView

O exemplo a seguir mostra como o SemanticOrderView pode alterar a ordem em que o leitor de tela anuncia os elementos, tornando-a diferente da ordem em que eles são adicionados à interface do usuário. O XAML abaixo mostra que o TitleLabel renderiza o título após o DescriptionLabel que renderiza a descrição; isso significa que, visualmente, veremos a descrição antes do título. Embora isso possa fazer sentido quando alguém está olhando para ele, não necessariamente faz sentido para alguém que é deficiente visual e não vê a tela (inteiramente).

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    x:Class="CommunityToolkit.Maui.Sample.Pages.Views.SemanticOrderViewPage"
    Title="Semantic Order View">
    <ContentPage.Content>
        <toolkit:SemanticOrderView x:Name="SemanticOrderView">
            <Grid RowDefinitions="2*,*">
                
                <Label x:Name="DescriptionLabel" Text="{Binding Description}" />

                <Label x:Name="TitleLabel" Text="{Binding Title}" FontSize="30" />

            </Grid>
        </toolkit:SemanticOrderView>
    </ContentPage.Content>
</ContentPage>

Para contornar isso, no arquivo de code-behind, podemos alterar a ordem que será usada pelo leitor de tela do dispositivo da seguinte maneira:

using System.Collections.Generic;

namespace CommunityToolkit.Maui.Sample.Pages.Views;

public partial class SemanticOrderViewPage : ContentPage
{
    public SemanticOrderViewPage()
    {
        InitializeComponent();

        this.SemanticOrderView.ViewOrder = new List<View> { TitleLabel, DescriptionLabel };
    }
}

Com isso, informamos ao SemanticOrderView que a ordem "adequada" para esses controles, quando acessados por meio de um leitor de tela, é colocar o foco primeiro no TitleLabel e depois no DescriptionLabel.

Exemplos

Você pode encontrar um exemplo desse recurso em ação no aplicativo de exemplo .NET MAUI Community Toolkit.

API

O código-fonte do SemanticOrderView pode ser encontrado no repositório GitHub do .NET MAUI Community Toolkit.