SemanticOrderView

SemanticOrderView bietet die Möglichkeit, die Reihenfolge von VisualElements für Sprachausgaben zu steuern und die Barrierefreiheit einer Anwendung zu verbessern. Dies kann besonders nützlich sein, wenn Benutzeroberflächen in einer Reihenfolge erstellt werden, die von der Reihenfolge abweicht, in der Benutzer und Sprachausgaben durch sie navigieren.

Verwenden der SemanticOrderView

Das folgende Beispiel zeigt, wie SemanticOrderView die Reihenfolge, in der die Sprachausgabe Elemente anzeigt, von der Reihenfolge, in der sie der Benutzeroberfläche hinzugefügt werden, abweichen kann. Der folgende XAML-Code zeigt das TitleLabel-Rendering des Titels nach der DescriptionLabel, die die Beschreibung rendert. Dies bedeutet, dass die Beschreibung vor dem Titel visuell angezeigt wird. Dies kann zwar sinnvoll sein, wenn jemand sehen kann, aber es ist nicht unbedingt sinnvoll für jemanden, der sehbehindert ist und die Anzeige nicht (vollständig) sieht.

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

Dazu können wir in der CodeBehind-Datei die Reihenfolge ändern, die von der Sprachausgabe des Geräts wie folgt verwendet wird:

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

Damit teilen wir SemanticOrderView mit, dass die „richtige“ Reihenfolge für diese Steuerelemente beim Zugriff über eine Sprachausgabe-Software darin besteht, zuerst die TitleLabel und dann die DescriptionLabel zu fokussieren.

Beispiele

Sie finden ein Beispiel für dieses Feature in Aktion in der Beispielanwendung für das .NET MAUI Community Toolkit.

API

Sie finden den Quellcode für SemanticOrderView über das GitHub-Repository für das .NET MAUI Community Toolkit.