SemanticOrderView

SemanticOrderView offre la possibilità di controllare l’ordine dei VisualElements per i lettori di schermo e migliorare l’accessibilità dell’applicazione. Ciò può essere particolarmente utile quando si creano interfacce utente in un ordine diverso da quello in cui gli utenti e gli screen reader le percorreranno.

Uso di SemanticOrderView

L'esempio seguente mostra come il tag SemanticOrderView possa modificare l'ordine in cui lo screen reader annuncia gli elementi rispetto all'ordine in cui vengono aggiunti all'interfaccia utente. Il codice XAML seguente mostra il rendering del TitleLabel titolo dopo l'oggetto DescriptionLabel che esegue il rendering della descrizione. Ciò significa che la descrizione verrà visualizzata visivamente prima del titolo. Anche se questo potrebbe avere senso quando qualcuno lo guarda, non ha necessariamente senso per qualcuno che è ipovedenti e non vede lo schermo (interamente).

<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>

Per ovviare a ciò, nel file code-behind è possibile modificare l'ordine che sarà usato dallo screen reader del dispositivo come segue:

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 };
    }
}

Con questo, diciamo al SemanticOrderView che l'ordine "corretto" di questi controlli, quando vi si accede tramite uno screen reader, è di portare prima il focus su TitleLabel e poi su DescriptionLabel.

Esempi

È possibile trovare un esempio di questa funzionalità in azione nell'applicazione di esempio .NET MAUI Community Toolkit.

API

È possibile trovare il codice sorgente per SemanticOrderView nel repository .NET MAUI Community Toolkit GitHub.