SemanticOrderView

SemanticOrderView permet de contrôler l’ordre des VisualElements pour les lecteurs d’écran et d’améliorer l’accessibilité d’une application. Cela peut être particulièrement utile lors de la création d’interfaces utilisateur dans des ordres différents de l’ordre dans lequel les utilisateurs et les lecteurs d’écran les parcourent.

Utilisation de SemanticOrderView

L’exemple suivant montre comment SemanticOrderView peut modifier l’ordre dans lequel le lecteur d’écran annonce des éléments de manière à ce qu’il soit différent de l’ordre dans lequel ils sont ajoutés à l’interface utilisateur. Le code XAML ci-dessous montre comment TitleLabel effectue le rendu du titre après que DescriptionLabel effectue le rendu de la description, ce qui signifie que visuellement, nous verrons la description avant le titre. Bien que cela puisse avoir du sens lorsque quelqu’un regarde l’écran, cela n’en a pas nécessairement pour une personne malvoyante qui ne voit pas (entièrement) l’écran.

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

Pour ce faire, dans le fichier code-behind, nous pouvons modifier comme suit l’ordre qui sera utilisé par le lecteur d’écran de l’appareil :

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

De cette manière, nous indiquons à SemanticOrderView que l’ordre « approprié » pour ces contrôles, lorsqu’on y accède via le logiciel de lecteur d’écran, est de se concentrer d’abord sur le TitleLabel, puis sur le DescriptionLabel.

Exemples

Vous trouverez un exemple de cette fonctionnalité en action dans l’Exemple d’application du kit d’outils de la communauté .NET MAUI.

API

Vous pouvez trouver le code source deSemanticOrderView sur le référentiel du kit de ressources de la communauté .NET MAUI sur GitHub.