SemanticOrderView

O SemanticOrderView fornece a capacidade de controlar a ordem do VisualElements para leitores de tela e melhorar a acessibilidade de um aplicativo. Isso pode ser particularmente útil ao criar interfaces de usuário em ordens diferentes da ordem em que os usuários e leitores de tela navegarão por eles.

Usando o SemanticOrderView

O exemplo a seguir mostra como o SemanticOrderView pode alterar a ordem na qual o leitor de tela anuncia elementos, longe da ordem em que eles são adicionados à interface do usuário. O XAML abaixo mostra o TitleLabel renderizando 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 (por completo).

<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 superar isso, no arquivo 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 acessada por meio do software de leitor de tela, é primeiro focalizar em TitleLabel e depois em DescriptionLabel.

Exemplos

Você pode encontrar um exemplo desse comportamento em ação no Aplicativo de exemplo do .NET MAUI Community Toolkit.

API

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