SemanticOrderView

SemanticOrderView 允许控制屏幕阅读器的 VisualElements 顺序并改进应用程序的辅助功能。 在构建用户界面时,如果其顺序不同于用户和屏幕阅读器导览这些用户界面的顺序,这非常有用。

使用 SemanticOrderView

以下示例演示如何使用 SemanticOrderView 更改屏幕阅读器朗读界面元素的顺序,使之采用有别于这些元素在用户界面中的添加顺序进行朗读。 在下面的 XAML 中,渲染标题的 TitleLabel 出现在渲染描述的 DescriptionLabel 之后,这意味着在视觉上,我们将先看到标题,后看到描述。 这对于能够看清屏幕的用户来讲行得通,但对于因为视觉障碍而无法(完全)看清屏幕的用户来说,则未必如此。

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

为克服这一点,我们可以在代码隐藏文件中更改设备屏幕阅读器所遵照的顺序,如下所示:

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

这样,当通过屏幕阅读器软件访问时,SemanticOrderView 对于这些控件就会采用“正确”的焦点顺序,即先 TitleLabelDescriptionLabel

示例

可以在 .NET MAUI 社区工具包示例应用程序中找到此功能的示例。

API

可以前往 .NET MAUI 社区工具包 GitHub 存储库查看 SemanticOrderView 的源代码。