SemanticOrderView

Mit SemanticOrderView lässt sich die Reihenfolge von VisualElements für Screenreader steuern und die Barrierefreiheit einer Anwendung verbessern. Dies kann besonders nützlich sein, wenn Benutzeroberflächen in einer anderen Reihenfolge erstellt werden als der, in der Benutzer und Screenreader durch sie navigieren.

Verwenden der SemanticOrderView

Das folgende Beispiel zeigt, wie SemanticOrderView die Reihenfolge ändern kann, in der der Screenreader Elemente ankündigt, sodass sie von der Reihenfolge abweicht, in der sie der Benutzeroberfläche hinzugefügt werden. Der folgende XAML-Code zeigt das TitleLabel Rendern des Titels nach dem DescriptionLabel Rendern der Beschreibung. Dies bedeutet, dass die Beschreibung vor dem Titel visuell angezeigt wird. Dies kann zwar sinnvoll sein, wenn jemand es betrachtet, aber es ist nicht unbedingt sinnvoll für jemanden, der sehbehindert ist und den Bildschirm 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>

Um das zu beheben, können wir in der Code-Behind-Datei die Reihenfolge ändern, die vom Screenreader 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 der SemanticOrderView mit, dass die „richtige“ Reihenfolge für diese Steuerelemente bei der Verwendung von Screenreader-Software darin besteht, zuerst den Fokus auf TitleLabel und dann auf DescriptionLabel zu setzen.

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 im .NET MAUI Community Toolkit GitHub Repository.