SemanticOrderView

O SemanticOrderView permite controlar a ordem dos VisualElements para leitores de ecrã e melhorar a acessibilidade de uma aplicação. Isto pode ser particularmente útil ao construir interfaces de utilizador em ordens diferentes da ordem em que os utilizadores e leitores de ecrã as navegam.

Usando a SemanticOrderView

O exemplo seguinte mostra como o SemanticOrderView pode alterar a ordem pela qual o leitor de ecrã anuncia os elementos, afastando-a da ordem pela qual estes são adicionados à interface de utilizador. O XAML abaixo mostra que o TitleLabel renderiza o título após o DescriptionLabel que renderiza a descrição; isto significa que, visualmente, veremos a descrição antes do título. Embora isso possa fazer sentido quando alguém está a olhar para ele, não faz necessariamente sentido para alguém com deficiência visual que não vê o ecrã (completamente).

<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 ultrapassar isso, no ficheiro de código por trás podemos alterar a ordem que será usada pelo leitor de ecrã do dispositivo da seguinte forma:

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 isto, dizemos ao SemanticOrderView que a ordem "correta" para estes controlos, quando acedidos através de software de leitura de ecrã, consiste em focar primeiro o TitleLabel e depois o DescriptionLabel.

Exemplos

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

API

Você pode encontrar o código-fonte para SemanticOrderView no repositório GitHub do .NET MAUI Community Toolkit.